请解释此javaScript代码如何删除所有节点

Question

HTML

<ul id="myList">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

我似乎无法理解这个while语句如何删除上面列表中的所有节点.有人可以解释一下吗？

JavaScript的

while(myList.firstChild) {
    myList.removeChild(myList.firstChild)
};

Answer 1

读一会儿

HTML

<ul id="myList">
   <li>Item 1</li>
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

js代码

while(myList.firstChild) // loop will run while myList has a firstChild
    {myList.removeChild(myList.firstChild)
};

运行

1st time while loop run firstChild is <li>Item 1</li> --> code runs and remove it.

现在是HTML

<ul id="myList">
   <li>Item 2</li>
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

跑

2nd time while loop run firstChild is <li>Item 2</li> --> code runs and remove it.

现在是HTML

<ul id="myList">
   <li>Item 3</li>
   <li>Item 4</li>
</ul>

跑

3rd time while loop run firstChild is <li>Item 3</li> --> code runs and remove it.

现在是HTML

<ul id="myList">
   <li>Item 4</li>
</ul>

跑

4th time while loop run firstChild is <li>Item 4</li> --> code runs and remove it.

现在是HTML

<ul id="myList">
</ul>

跑

js代码将无法运行,因为没有第一个孩子myList.循环条件失败.