JavaScript原生节点操作小结

深入JavaScript原生节点操作：从获取到操作，全面指南

前言：

一、获取节点

1. 子节点：

children虽然不是标准的DOM属性，但在几乎所有浏览器中都得到了支持。它返回的是直接子元素的集合，不包含文本节点。注意，IE浏览器中的children还包括注释节点。

另一种获取子节点的方式是通过childNodes，它是DOM的标准属性。它会返回所有的子节点，包括文本节点。

二、获取子节点的类型和名称

1. 获取第一个子节点：通过firstChild属性。例如：document.getElementById('b_pole').childNodes[0].childNodes[0].firstChild。

2. 获取一个特定的子节点：通过lastChild属性。例如：document.getElementById('b_pole').childNodes[0].childNodes[0].lastChild。

3. 判断是否有子节点：通过hasChildNodes()方法。例如：document.getElementById('b_pole').childNodes[0].childNodes[0].hasChildNodes()。

4. 判断节点类型和名称：通过nodeType和nodeName属性。nodeType的值为1代表元素节点，值为2代表属性节点，值为3代表文本节点。nodeName则表示节点的名称。例如：document.getElementById('b_pole').childNodes[0].nodeType // 1 和 document.getElementById('b_pole').childNodes[0].nodeName // 'UL'。

1. 创建元素节点：通过createElement方法。例如：document.createElement('div')。

四、移除和获取相邻节点

移除节点可以通过removeChild方法实现，它会删除指定的子节点并返回被删除的节点dom。例如：document.getElementById('b_pole').removeChild(document.getElementById('b_pole').childNodes[0])。获取元素的下一个或上一个同胞节点可以通过nextSibling和previousSibling属性实现。例如：document.getElementById('b_pole').nextSibling和document.getElementById('b_pole').previousSibling。这些方法可以帮助你获取和操作节点的相邻节点。