DOM 节点关系

onlymark_YU

于 2020-04-24 11:26:09 发布

阅读量295

点赞数

分类专栏： javascript 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_35314280/article/details/105725243

版权

2 篇文章 0 订阅

订阅专栏

节点树中的节点彼此之间有一定的等级关系。

<html>
   <head>
       <title>DOM 教程</title>
   </head>

  <body>
       <h1>DOM 第一课</h1>
       <p>Hello world!</p>
   </body>
</html>

在这里插入图片描述

通过 JavaScript，您可以使用以下节点属性在节点之间导航：

属性	描述	使用
parentNode	父节点	element.parentNode
childNodes	子节点集合	element.childNodes
childNodes[nodenumber]	第N个子节点	element.childNode[0]
firstChild	第一个子节点 IE	element.firstChild
firstElementChild	第一个子节点除了IE	element.firstElementChild
lastChild	最后一个子节点 IE	element.lastChild
lastElementChild	最后一个子节点除了IE	element.lastElementChild
nextElementSibling	下一个同级节点	element.nextElementSibling
previousElementSibling	上一个同级节点	element.previousElementSibling
body	获取页面body节点	document.body
documentElement	获取整个页面html节点	document.documentElement

方法	描述	使用
createElement	创建节点	新的标签(元素节点) = document.createElement(“标签名”);
appendChild	父节点的最后插入一个新的子节点	父节点.appendChild(新的子节点);
insertBefore	在参考节点前插入一个新的节点。如果参考节点为null，那么他将在父节点最后插入一个子节点。	父节点.insertBefore(新的子节点,作为参考的子节点);
removeChild	删除节点	父节点.removeChild(子节点);
cloneNode	`复制节点`不带参数/带参数false：只复制节点本身，不复制子节点。带参数true：既复制节点本身，也复制其所有的子节点。	要复制的节点.cloneNode();

这里讲一下nodeType。

关注