元素的子节点

我们先来比较两段代码:

代码1

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul id = "list">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>
 <button onclick = "test()"> 点击</button>
<script>
  function test(){
  var newNode = document.createElement("li");
  var newText = document.createTextNode("e");
  newNode.appendChild(newText);
  
  var mylist = document.getElementById("list");
  mylist.insertBefore(newNode,mylist.childNodes[1]);
}
</script>
</body>
</html>

代码1结果展示

点击按钮前

点击按钮之后

代码2

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
 <ul id = "list"><li>a</li><li>b</li><li>c</li></ul>
 <button onclick = "test()"> 点击</button>
<script>
  function test(){
  var newNode = document.createElement("li");
  var newText = document.createTextNode("e");
  newNode.appendChild(newText);
  
  var mylist = document.getElementById("list");
  mylist.insertBefore(newNode,mylist.childNodes[1]);
  
}
</script>
</body>
</html>

代码2 结果展示

点击按钮前

点击按钮之后

造成这样差异的原因是：元素的 childNodes 属性包含它所有的子节点，这些子节点有可能是元素，文本节点，注释或者处理指令。不同的浏览器在看待这些节点方面存在显著的不同，如下代码：

<ul id = "list">
  <li>a</li>
  <li>b</li>
  <li>c</li>
</ul>

如果是 IE 来解析这些代码，那么<ul> 元素会有三个子节点，分别是 3个<li> 元素。但是如果在其他浏览器中，<ul> 元素都会有 7个元素，包括 3 个<li>元素和四个文本节点（表示<li>元素之间的空白符）。如果像下面样将元素间的空白符删掉，那么所有的浏览器都会返回相同数目的子节点。

<ul id = "list"><li>a</li><li>b</li><li>c</li></ul>

对于这段代码，<ul>元素在任意浏览器中都会包含3 个子节点。如果需要通过 childNodes 属性遍历子节点那么一定不要忘记浏览器的这一差别。

元素的子节点

推荐阅读更多精彩内容