DOM 节点操作

DOM 节点操作

节点属性

1. nodeType 节点的类型，属性值为数字，表示不同的节点类型，共 12 种，只读

   • 属性值为1 是元素节点
   • 2 属性节点
   • 3 文本节点

2. nodeName 节点的名称(标签名、属性名、#text)，只读

3. nodeValue 节点值，返回或设置当前节点的值

   • 元素节点的 nodeValue 始终是 null
   • 属性和文本节点可以设置 节点值
   • 属性和文本节点值更改后，会直接作用在html的标签之上。

父子节点常用属性

• childNodes ：只读属性，获取一个节点所有 “子节点” 的实时的集合，集合是动态变化的。

• children ：只读属性，返回一个节点所有的 子"元素节点"集合(伪数组)，是一个动态更新的 HTML 元素集合(开始如果中有一个，后期增加，它的子元素节点也动态增加)。

• firstChild ：只读属性，返回该节点的所有类型子节点的第一个，如果该节点没有子节点则返回 null。

• lastChild ：只读属性，返回该节点的所有类型子节点的最后一个，如果该节点没有子节点则返回 null。

• lastElementChild ：获取所有子 “元素节点”的最后一个

• parentNode ：返回一个当前节点的父节点（可以是document对象），如果没有这样的节点，比如说像这个节点是树结构 的顶端或者没有插入一棵树中，这个属性返回 null。

• parentElement ：返回当前节点的父“元素节点”（不能是document对象），如果该元素没有父节点，或者父节点不是一个 DOM 元素，则返回 null。

• 节点的父级节点只有一个

兄弟节点常用属性

• nextSibling 只读属性，返回与该节点同级的下一个节点，如果没有返回null。
• previousSibling 只读属性，返回与该节点同级的上一个节点，如果没有返回null。
• nextElementSibling 只读属性，返回与该节点同级的下一个元素节点，如果没有返回null。
• previousElementSibling 只读属性，返回与该节点同级的上一个元素节点，如果没有返回null。
• 注意：nextElementSibling 和 previousElementSibling 有兼容性问题，IE9以后才支持

创建新节点的方法

• document.createElement(“div（表签名）”) 创建元素节点
• document.createAttribute(“id（属性名）”) 创建属性节点
• document.createTextNode(“hello（内容）”) 创建文本节点

注意 ：

• 节点创造后是储存在内存中，并没有添加到DOM树上（在html中看不到）。
• 一般将创建的新节点存在变量中，方便使用。
• 自己创建的节点本身都是对象，也可以去添加一些属性和方法，这些属性和方法在将来节点加载到DOM树中后，依旧保留。

节点常用操作方法1

1. parentNode.appendChild(child)：将一个节点添加到指定父节点的子节点列表末尾。
   • 原有节点也可以传给appendChild的参数
   • 功能是将节点从原有位置删除，添加到指定位置
2. parentNode.replaceChild(newChild, oldChild)：用指定的节点替换当前节点的一个子节点，并返回被替换掉的节点。
3. parentNode.insertBefore(newNode, referenceNode)：在参考节点之前插入一个拥有指定 父节点的子节点，referenceNode 必须设置，如果 referenceElement 为 null 则 newNode 将被插入到子节点的末尾。
4. parentNode.removeChild(child)：移除当前节点的一个子节点。这个子节点必须存在于当前节点中

节点常用操作方法2

• Node.cloneNode()：克隆一个节点，并且可以选择是否克隆这个节点下的所有内容。参数为 Boolean 布尔值，表示是否采用深度克隆。如果为 true,则该节点的所有后代节点也都会被 克隆,如果为 false,则只克隆该节点本身。默认值为 true，节点下的内容会被克隆。（定义时直接添加参数，不要使用默认的）
• 注意：克隆时，标签上的属性和属性值也会被复制，写在标签行内的绑定事件可以被复制，但是通过 JavaScript 动态绑定的事件不会被复制。

节点常用操作方法 3

• Node.hasChildNodes()：没有参数，返回一个 Boolean 布尔值，来表示该元素是否包含有子节点（不区分节点类型，有换行之类的文本节点，返回值也是ture）。有子节点返回ture，没有返回false。
• Node.contains(child)：返回一个 Boolean 布尔值，来表示传入的节点是否为该节点的后代节点（不局限父子关系，只要是后代就返回true）。是后代节点返回ture，不是返回false。

判断方法总结

有三种方法可以判断当前节点是否有子节点。

• node.firstChild !== null
• node.childNodes.length > 0
• node.hasChildNodes()

案例应用

• 动态创建列表
• 动态创建表格
• 选择水果