节点增删查

132 阅读2分钟

常见错误:

 // 以后我们方法使用就是如下形式,如果是null,就是默认会追加到最后
​
// 在节点上执行insertBefore方法失败了       需要两个参数      但上  只有一个设置了
​
// Failed to execute 'insertBefore' on 'Node': 2 arguments required, but only 1 present
// 失败了   去  执行   removeChild  在 节点     这个 节点 将要被 删除   不是  一个 子元素 相对于当前节点
// Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
 // 在节点上执行方法失败了,因为你想删除的元素不是当前节点的直接子元素
// 在节点上执行方法失败了                       参数    1  不是一个节点类型
// Failed to execute 'removeChild' on 'Node': parameter 1 is not of type 'Node'
// tbody.removeChild(btns)

节点查找

子节点查找(父找子)

childNodes:获取所有订单子节点,包括文本节点(空格、换行)、注释节点等

children:获取所有的元素节点,返回一个伪数组 遍历得到对应元素

语法 父元素.children

子找父

parentNode:查找父节点即父盒子

语法:子元素.parentNode

找兄弟元素

nextElementSibling 找下一个兄弟节点

previousElementSibling 找上一个兄弟节点

语法:元素.nextElementSibling

元素.previousElementSibling

增加节点

创建节点

document.createElement('要创建的标签名')

一般先创建节点,然后插入节点

节点的插入

插入到父元素的最后后面
父元素.appendChild(要插入的元素) 
​
插入父元素中某个子元素的前面
父容器.insertBefore(需要插入的元素,在哪个元素前面)
        // 如果参照位置为null,则放在第一位

克隆节点

元素.cloneNode(布尔值) 克隆一个已有的节点

括号的布尔值默认为false

true 克隆时包含后代节点一起克隆(深拷贝)即可以拷贝文本内容 flase 克隆时不包括后代节点(浅拷贝)只拷贝结构,没有文本内容

节点删除

父元素.removeChild(要删除的元素)

注意:删除元素必须于父元素的子元素,即是父子关系

自己删除元素本身

对象.romove