JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）

最新推荐文章于 2024-05-13 13:37:50 发布

吴声子夜歌

最新推荐文章于 2024-05-13 13:37:50 发布

阅读量2.9k

点赞数 7

分类专栏： JavaScript 文章标签： JavaScript JS节点访问节点

本文链接：https://blog.csdn.net/cold___play/article/details/101389338

版权

JavaScript 专栏收录该内容

47 篇文章 8 订阅

订阅专栏

访问节点

通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。

ownerDocument：返回当前节点的根元素（document对象）
parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点
childNodes：返回当前节点的所有子节点的节点列表
firstChild：返回当前节点的首个子节点
lastChild：返回当前系欸但的最后一个子节点
nextSibling：返回当前节点之后相邻的同级节点
previousSibling：返回当前节点之前相邻的同级节点

childNodes：

每个节点都有一个childNodes属性，该属性保存着一个nnodeList对象，它表示了所有子节点的列表。

nodeList是一种类数组对象，用于保存一组有序的节点，用户可以通过下标位置来访问这些节点。虽然childNodes可以通过方括号来访问nodeList的值，而且childNodes对象包含一个length属性，它表示列表包含子节点的个数（长度），但childNodes并不是数组，不能够直接调动数组的方法。

nodeList对象实际上是基于DOM结构动态执行查询的结构，DOM结构的变化能够自动反映在nodeList对象中。因此，我们不能够以静态的方式处理nodeList对象。

示例：通过方括号，item()方法访问节点

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<h1>标准BOM</h1>
		<p>这是一份简单的<strong>文档对象模型</strong></p>
		<ul>
			<li>D表示文档，HTML文档结构</li>
			<li>O表示对象，文档结构的JavaScript脚本化映射</li>
			<li>M表示模型，脚本与结构交互的方法和行为</li>
		</ul>
		<script>
			var tag = document.getElementsByTagName("ul")[0]; //获取列表元素
			var a = tag.childNodes; //获取列表元素包含的所有节点
			console.log(a[0].nodeType); //第一个节点类型，返回3，文本节点
			console.log(a.item(1).innerHTML); //返回第二个li包含的文本
			console.log(a.length); //包含的子节点数 3
		</script>
	</body>
</html>

提示：可以使用Array.prototype.slice()方法（IE8以后）把nodeList转换为数组，这样能够调用数组的相关方法。

var tag = document.getElementsByTagName("ul")[0]; //获取列表元素
var a = Array.prototype.slice.call(tag.childNodes, 0);//转换为数组
a.reverse();//逆序

parentNode

每个节点都有一个parentNode属性，该属性指向文档树种的父节点。包含在childNodes列表中的所有节点都具有相同的父节点，因此它们的parentNode属性都指向同一个节点。

parentNode属性返回节点永远是一个元素类型节点，因为只有元素节点才可能包含子节点。不过document节点没有父节点，document节点的parentNode属性将返回null。

firstChild和lastChild

firstChild属性返回第一个子节点，lastChild返回最后一个子节点。文本节点和属性节点的firstChild和lastChild属性返回值总是null。

注意：firstChild等价于childNodes的第1个元素，lastChild等价于childNodes的最后一个元素。

node.childNodes[0] = node.firstChild
node.childNodes[node.childNodes.length - 1] = node.lastChild

nextSibling和previousSibling

nextSibling返回下一个相邻节点，previousSibling返回上一个相邻节点。如果没有同属一个父节点的相邻节点，则它们将返回null。

ownerDocument

在DOM文档树种，可以使用ownerDocument属性访问根节点

node.ownerDocument

通过每个节点的ownerDocument属性，可以不必通过层层回溯的方式到达顶端，而是可以直接访问文档节点。另外，也可以使用如下方式访问根节点：

document.documentElement

上述反应节点关系的所有属性都是只读的，其中childNodes属性于其他属性相比更加方便，因为只须使用简单的关系指针，就可以通过它访问文档树种的任何节点。

另外，**hasChildNodes()方法可以检测是否包含子节点，返回true | false，比查询childNodes列表的length属性更简单、有效。

吴声子夜歌

关注

7
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
JS--JavaScript访问节点（childNodes、parentNode、firstChild、lastChild、nextSibling、previousSibling）

访问节点通过节点之间的树形关系，可以定位文档中的每个节点。DOM为Node类型定义如下属性，以方便JavaScript对文档树中每个节点进行遍历。ownerDocument：返回当前节点的根元素（document对象）parentNode：返回当前节点的父节点。所有的节点都仅有一个父节点childNodes：返回当前节点的所有子节点的节点列表firstChild：返回当前节点的首个子节...
复制链接

扫一扫

专栏目录