第14章 DOM

最新推荐文章于 2024-10-27 11:51:13 发布

weixin_48419976

最新推荐文章于 2024-10-27 11:51:13 发布

阅读量95

点赞数

文章标签： css css3 前端

本文链接：https://blog.csdn.net/weixin_48419976/article/details/129943335

版权

文章介绍了DOM中的节点关系，如父子关系、同胞关系，以及如何通过childNodes属性和parentNode、previousSibling、nextSibling属性来导航。还提到了NodeList对象和hasChildNodes()方法。此外，文章强调了appendChild()方法在添加节点到文档树中的作用。

摘要由CSDN通过智能技术生成

元素是元素的子元素，而元素则是元素的父元素,元素是元素的同胞元素，因为它们有共同的父元素。每个节点都有一个childNodes属性，其中包含一个NodeList的实例。NodeList是一个类数组对象，用于存储可以按位置存取的有序节点.

下面的例子展示了如何使用中括号或使用item()方法访问NodeList中的元素： let firstChild = someNode.childNodes[0];

每个节点都有一个parentNode属性，指向其DOM树中的父元素.

childNodes列表中的每个节点都是同一列表中其他节点的同胞节点。而使用previousSibling和nextSibling可以在这个列表的节点间导航。

childNodes属性的作用远远不止是必备属性那么简单了。这是因为利用这些关系指针，几乎可以访问到文档树中的任何节点，而这种便利性是childNodes的最大亮点。还有一个便利的方法是 hasChildNodes()，这个方法如果返回 true

2.操纵节点

最常用的方法是 appendChild()，用于在 childNodes 列表末尾添加节点.。appendChild()方法返回新添加的节点，如下所示： let returnedNode = someNode.appendChild(newNode); alert(returnedNode == newNode); // true alert(someNode.lastChild == newNode); // true

Document 类型

文档对象 document 是 HTMLDocument 的实例（HTMLDocument 继承Document），表示整个HTML页面。。document 是window 对象的属性，因此是一个全局对象

。document 是window 对象的属性，因此是一个全局对象。