DOM技巧和技术：父母，孩子和兄弟姐妹

>现代Web应用程序通常涉及复杂的，富含标记的HTML。 诸如jQuery之类的库简化了DOM操纵，提供了跨浏览器兼容性和广泛的功能。但是，与几年前相比，天然DOM API显着改善，在许多情况下，它们成为可行的替代方法。 本文探讨了操纵HTML的关键DOM功能，重点关注父，子和兄弟姐妹节点关系。 尽管由于历史上的不一致而导致jQuery仍然是一个流行的选择，但了解本地DOM方法对于有效的发展至关重要。

密钥概念：

>使用
• 和children属性有效计数子元素，避免包含非元素节点（如childElementCount>）。 childNodes.length>利用
检查任何子节点，包括whitespace（有效的节点类型）。
• >使用hasChildNodes()添加或重新定位元素，并使用
>或
• >。appendChild()>。 removeChild()>使用ChildNode.remove()无缝替换子元素，启用元素交换和重新定位。
• 针对特定的儿童，replaceChild()，
，
• ，firstElementChild，以进行精确的DOM操纵。 lastElementChild nextElementSiblingpreviousElementSibling计算子节点：

考虑此HTML示例（在整个文章中使用）：>

中的元素计算元素

>和

产生相同的结果（6）。 为了清楚起见，

通常是首选。 使用

<code class="language-html"><ul id="myList">
  <li>Example one</li>
  <li>Example two</li>
  <li>Example three</li>
  <li>Example four</li>
  <li>Example five</li>
  <li>Example six</li>
</ul></code>

将返回更高的数字，因为它包括所有节点类型，包括whitespace。

<ul></ul>检查子节点的检查：

<code class="language-javascript">var myList = document.getElementById('myList');
console.log(myList.children.length); // 6
console.log(myList.childElementCount); // 6</code>

>

>children.length返回一个布尔值，指示儿童节点的存在： childElementCount childElementCount即使是带有空格的空 也会返回childNodes.length。 只有一个完全空的

（没有空间）将返回

。 在

>添加新的或移动现有元素。 例如，移动 <p> </p>：hasChildNodes()>

<code class="language-javascript">console.log(myList.hasChildNodes()); // true</code>

>删除子节点。 <ul></ul>提供了更简洁的替代方案（在较旧的IE中不支持）。true> <ul></ul>false>替换元素：

>将一个孩子替换为另一个孩子：

appendChild()这将<ul></ul>替代新的

。

针对特定的孩子： 在

>注入内容：firstElementChildlastElementChild 在指定的同胞之前插入元素。 nextElementSibling>提供了对插入点的更精确的控制（，previousElementSibling，

，

）。

浏览器支持：

insertBefore()大多数方法都具有出色的浏览器支持，包括较旧的IE版本。 insertAdjacentHTML()缺乏较旧的IE的支持。beforebegin afterbeginbeforeend结论： afterend

虽然jQuery简化了DOM的操纵，但了解天然DOM API对于高效且现代的Web开发至关重要。 彻底的测试对于解决潜在的浏览器不一致至关重要。

>

以上是DOM技巧和技术：父母，孩子和兄弟姐妹的详细内容。更多信息请关注PHP中文网其他相关文章！