node.firstChild与 node.children[0]2个取得的都是父节点的第一个子节点。但问题就出现在这里。
<ul id="wrap">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
如这样所设置时，node.firstChild就会取得文本节点，当做一个第一节点替换的时候，你就会发现节点不但没有被替换，而且还增加了一个节点，
而node.children[0]取到的节点就是元素节点，替换成功。
测试例子
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
</head>
<body>
<ul id="wrap">
<li>test1</li>
<li>test2</li>
<li>test3</li>
<li>test4</li>
</ul>
<button id="add">添加</button>
<button id="insert">插入</button>
<button id="replace">替换</button>
<button id="remove">删除</button>
<script type="text/javascript">
function myClick(node, fun) {
var wrap = document.getElementById(node);
wrap.onclick = fun;
}
var warp = document.getElementById("wrap");
// add
myClick("add", function() {
var li = document.createElement("li");
var add = document.createTextNode("add");
li.appendChild(add);
warp.appendChild(li);
});
// insert
myClick("insert", function() {
var li = document.createElement("li");
var add = document.createTextNode("add");
li.appendChild(add);
warp.insertBefore(li,wrap.firstChild);
});
// replace
myClick("replace",function(){
var li = document.createElement("li");
var add = document.createTextNode("add");
// alert(warp.children[0]==warp.firstChild);//文本节点
li.appendChild(add);
//warp.replaceChild(li,warp.firstChild);//替换失败，会发现第一个节点不但没被替换，还增加了。
warp.replaceChild(li,warp.children[0]);
});
// remove
myClick("remove", function() {
warp.removeChild(warp.lastChild);
});
</script>
</body>
</html>
这是在warp.firstChild 下操作的
