[JS]节点操作
DOM节点
DOM树中的所有内容都是节点, 我们重点关注元素节点
作用
使开发者可以根据节点的关系获取元素, 而不是只能依赖选择器, 提高了编码的灵活性
节点分类
- 元素节点: 所有的标签都是元素节点, html是根节点
- 属性节点: 所有的属性都是属性节点, 比如href
- 文本节点: 所有的文本都是文本节点, 包括空格,换行
- 注释节点: 所有的注释都是属实节点
节点属性:
nodeTyoe: 节点的类型 (元素节点的nodeTyoe=1)
nodeName: 节点的名称
nodeValue: 节点的值
查找节点
1,0子节点:
childrenNodes: 获取所有的子元素节点(包括文本节点, 注释节点等)
children: 获取所有子元素节点, 返回一个伪元素
firstElemenChild: 获取第一个子元素节点
lastElemenChild: 获取最后一个子元素节点
2.0父节点:
parentNode: 获取最近一级的父节点, 找不到返回null
3.0兄弟节点:
nextElementSibling: 下一个兄弟元素
previousElementSibling: 上一个兄弟元素
增加节点
先创建一个网页元素, 再把元素添加到网页中
1.0创建节点
语法: document.createElement('div')
作用: 在内存里创建一个节点
结果: 返回创建的元素,用途广泛
2.0添加节点:
语法: 父元素.appendChild(元素)
作用: 把元素插入到父元素的最后面
语法: 父元素.insertBefore(元素, 哪个元素前面);
作用: 把元素添加到指定节点的前面
克隆节点
语法: 元素.cloneNode(deep)
功能: 在内存中克隆一个节点
解释: deep的可选项
false: 默认值, 浅复制, 不包含后代节点
true: 深度复制, 包含后代节点
注意: 如果克隆的节点带了id, 需要更新id ,避免重复
删除节点
语法: 父元素.removeChild(要删除的元素);
功能: 如果元素不存在会删除失败,
删除节点属于物理删除