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

2021-06-16 22:03:04 阅读：263 来源： 互联网

标签：box span text parentNode js console 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]

标签：box,span,text,parentNode,js,console,childNodes,children,节点
来源： https://blog.csdn.net/u010234868/article/details/117968081

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

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