[JS]节点操作

DOM节点

DOM树中的所有内容都是节点, 我们重点关注元素节点

作用

使开发者可以根据节点的关系获取元素, 而不是只能依赖选择器, 提高了编码的灵活性

节点分类

1. 元素节点: 所有的标签都是元素节点, html是根节点
2. 属性节点: 所有的属性都是属性节点, 比如href
3. 文本节点: 所有的文本都是文本节点, 包括空格,换行
4. 注释节点: 所有的注释都是属实节点

节点属性:

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(要删除的元素);

功能: 如果元素不存在会删除失败,

删除节点属于物理删除