超级实习生学习笔记——DOM查找操作_var lis = ul.children;-优快云博客

本文链接：https://blog.youkuaiyun.com/weixin_32423232/article/details/124858778

1. 获取子节点

pro children（推荐使用）

获取元素子节点，没有兼容问题

<body>
   <ul>
       <li>两个黄鹂</li>
       <li>一行白鹭</li>
       <li>窗含西岭</li>
       <li>门泊东吴</li>
   </ul>
</body>
<script>
   var ul=document.querySelector('ul');
   var lis=ul.children;
   console.log(lis);
   
</script>

pro childNodes
会获取非元素类型的子节点

pro firstChild
ie6,7,8没问题，现代浏览器不兼容

pro firstElementChild
ie6,7,8不兼容

pro lastChild, lastElementChild
问题同上

2. 获取下一个兄弟节点
pro nextSibling (有兼容问题)
ie9以上及safari, chrome, firefox会将后边的换行部分作为节点进行处理

可以使用nodeType来查看节点类型

nodeType返回值：

1 元素节点

2 属性节点

3 文本节点

8 注释

//兼容写法
<body>
    <ul>
        <li>两个黄鹂</li>
        <li>一行白鹭</li>
        <li>窗含西岭</li>
        <li>门泊东吴</li>
    </ul>
</body>
<script>
    var li1=document.querySelectorAll('li')[0];
    var li2= li1.nextSibling.nodeType===1 ? li1.nextSibling : li1.nextElementSibling;
    console.log(li2);
</script>

pro nextElementSibling
可以忽略文档节点，只获取元素节点

但是 ie6,7,8不认

3. 获取上一个兄弟节点
pro previousSibling
pro previousElementSibling
用法和兼容写法同上

4. 获取父节点
pro parentNode