节点操作(Dom中父子节点)

2023-09-25 21:23:58

1.节点层级

利用Dom树可以把节点划分为不同的层级关系，常见的父子兄弟关系

1.1父级节点

node.parentNode找的是关于node元素最近的父级节点(亲爸爸)如果找不到父节点就返回为null

2.子节点

2.1获取子节点

node.childnodes能够获取到node节点所有子节点的集合，该集合为即时更新的集合，但是如果之只获取nodetype值(节点类型)为3的元素节点，那么就不能使用chiildnodes来获取

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    //获取到ul的全部子节点
    var ul=document.querySelector('ul')
    //利用node type来判断元素节点或者文本节点
    console.log(ul.childNodes);
    console.log(ul.childNodes[0].nodeType);
</script>
</html>

其中text为文本节点

li为元素节点

但是我们也可以直接利用(非标准)的children是一个非标准，但是的得到了各个浏览器的支持，因此我们可以放心使用，且可以直接获取到node 的子元素节点

node,children

2.2获取第一个子节点和最后一个子节点

<body>
    <ul>
        <li></li>
        <li></li>
        <li></li>
        <li></li>
    </ul>
</body>
<script>
    //获取到ul的全部子节点
    var ul=document.querySelector('ul')
    //利用node type来判断元素节点或者文本节点
  console.log(ul.lastChild);
  console.log(ul.lastElementChild);
</script>
</html>

观察结果我们可以看到lastchild输出一个#test,是因为换行空格也被当作lastchild，被答应输出来，但是我们需要的时最后一个真正的子文本节点，

使用lastElementchild,这是控制台打印输出li元素节点

但是这两个方法都有一点小问题，支支持IE9以上的版本

firstchild会包含其他节点，而firstElementchild只包含元素节点

因为在开发中，firstElementchild会有兼容性问题，所以早实际开发过程中，会使用兼容性好的child来获取需求节点

2.兄弟节点

2.1nextSibling

node.nextSibing表示node的兄弟节点和包括元素节点或者文本节点

2.2prevousSibling

表示上一个previousSibling表示node的上一个兄弟节点

2.3nextELmentSibling

返回下一个兄弟元素节点，找不到则返回null

但是这个节点还是会有兼容性问题

则可以利用没有兼容性问题的nextSibling来处理

3.删除节点

removechild

4.复制节点

cloneNode()如果括号参数为空或者为false,则时浅拷贝，即复制节点本生，不克隆里面的子节点

如果括号里面为true,则时深度拷贝，会复制节点本省里面所有的子节点

码农公寓