×

介绍下JavaScript中的一个DOM属性:childnodes

作者:andy0012020.03.30来源:Web前端之家浏览:6532评论:0

childNodes返回的是节点的子节点集合,包括元素节点、文本节点还有属性节点。

childNodes 属性,标准的,它返回指定元素的子元素集合,包括HTML节点,所有属性,文本。

语法:

element.childNodes

返回值:NodeList 对象,表示节点集合。

说明:元素中的空格被视为文本,而文本被视为节点。

示例:获得 body 元素的子节点集合:

<!DOCTYPE html>
<html>
	<head>
		<meta charset=" utf-8">
	</head>
	<body>
		<p id="demo">请点击按钮来获得 body 元素子节点的相关信息。</p>
		<button onclick="myFunction()">试一下</button>
		<script>
			function myFunction() {
				var txt = "";
				var c = document.body.childNodes;
				for(i = 0; i < c.length; i++) {
					txt = txt + c[i].nodeName + "<br>";
				};
				var x = document.getElementById("demo");
				x.innerHTML = txt;
			}
		</script>
	</body>

</html>

我们可以通过nodeType来判断是哪种类型的节点,只有当nodeType==1时才是元素节点,2是属性节点,3是文本节点。

有时候需要获取指定元素的第一个HTML子节点(非属性/文本节点),最容易想到的就是firstChild 属性。代码中第一个HTML节点前如果有换行,空格,那么firstChild返回的就不是你想要的了。可以使用nodeType来判断下。

function getFirst(elem){
    for(var i=0,e;e=elem.childNodes[i++];){
        if(e.nodeType==1)
            return e;
    }      
}

兼容性:基本兼容主流浏览器。

您的支持是我们创作的动力!
温馨提示:本文作者系 ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://jiangweishan.com/article/childnodes1232323.html

网友评论文明上网理性发言 已有0人参与

发表评论: