浏览器的dom兼容

使用childNodes来遍历dom元素子节点

<ul>
    <li>123</li>
    <li>123</li>
    <li>123</li>
</ul>

对于上面一段代码，如果IE来解析，<ul>元素会有3个子节点，就是3个<li>。对于其他浏览器，则会解析出7个元素，3个<li>和4个文本节点。

<ul><li>123</li><li>123</li><li>123</li></ul>

如果将空白符删除，那么所有浏览器都会返回3个子节点。

如果需要使用childNodes来遍历dom元素子节点，需要先检查一下元素的nodeType属性。

for(let i = 0,len = element.childNodes.length; i<len; i++){
  if(element.childNodes[i].nodeType == 1){
    //...
  }
}

常见dom类型的nodeType：