原生js获取元素的父子节点（parentNode、childNodes、children）

2021/6/16 22:21:05

编程Tag： js children console text 节点 childnodes span box parentNode

本文主要是介绍原生js获取元素的父子节点（parentNode、childNodes、children），对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

<div id="box">
	<span>span</span>
	<p>文本段落</p>
	<!-- 这里是注释 -->
</div>

var box = document.getElementById('box');
console.dir(box);  // childNodes: NodeList(7) [text, span, text, p, text, comment, text] 文本节点为换行符nodeValue: "↵		"   children: HTMLCollection(2) [span, p]       parentElement: body   parentNode: body

// 节点的层次结构
// 父节点 parentNode
console.log(box.parentNode); //  <body>…</body>
// 子节点 childNodes
console.log(box.childNodes); // 所有的子节点childNodes: NodeList(7) [text, span, text, p, text, comment, text]  不是子元素
// 找到box中所有的元素
for (var i = 0; i < box.childNodes.length; i++) {
	var node = box.childNodes[i];
	if (node.nodeType === 1) {
		console.log(node);   // <span>span</span>  <p>文本段落</p>
	}
}

// 直接获取子元素的属性 children
console.log(box.children);  // HTMLCollection(2) [span, p]

这篇关于原生js获取元素的父子节点（parentNode、childNodes、children）的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！

原生js获取元素的父子节点（parentNode、childNodes、children）

相关编程文章