首页 > 代码库 > javascript中的子节点查找，childNodes和children

javascript中的子节点查找，childNodes和children

2024-08-21 14:48:43   221人阅读

一、查找元素：

1.getElementById()：接收一个参数：要取得的元素的 ID。如果找到相应的元素则返回该元素，如果不存在带有相应 ID 的元素，则返回 null。严格匹配，包括大小写。

IE7 及较低版本还为此方法添加了一个有意思的“怪癖”： name 特性与给定 ID 匹配的表单元素（<input>、<textarea>、 <button>及<select>）也会被该方法返回。如果有哪个表单元素的 name 特性等于指定的 ID，而且该元素在文档中位于带有给定 ID 的元素前面，那么 IE 就会返回那个表单元素。

2.getElementsByTagName()。这个方法接受一个参数，即要取得元素的标签名，而返回的是包含零或多个元素的 NodeList。

3.getElementsByName()。顾名思义，这个方法会返回带有给定 name 特性的所有元素。最常使用 getElementsByName()方法的情况是取得单选按钮。

 

二、查找元素直接点：

1.元素.childNodes : 只读 属性 子节点列表集合，包含文本和元素类型的节点。

2.元素.children：只读 属性 子节点列表集合，只包含元素类型节点。

3.元素.nodeType : 只读 属性 当前元素的节点类型
元素节点:1
属性节点:2
文本节点:3

　　

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子节点</title>
<script>
window.onload = function() {
	var oDiv = document.getElementById(‘div1‘);
	var len = oDiv.childNodes.length;

	alert(len);	//ie8 -- 1; ie9~ie11 -- 3,包含span前后换行

	/*找出当前元素只包含同样还是元素的子节点的两种方法*/
	for(var i=0; i<len; i++){
		if(oDiv.childNodes[i].nodeType == 1){
			console.log(oDiv.childNodes[i]);   //<span></span>
		}
	}

	alert(oDiv.children.length);//ie8~ie11 -- 1
	
}
</script>
</head>

<body>
    <div id="div1">
    	<span></span>
    </div>
</body>
</html>

　　

　　

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>子节点</title>
<script>
window.onload = function() {
	var oDiv = document.getElementById(‘div1‘);
	var len = oDiv.childNodes.length;

	alert(len);	//ie8 -- 2,包含注释和span; ie9~ie11 -- 5,包含注释,换行和span

	/*找出当前元素只包含同样还是元素的子节点的两种方法*/
	for(var i=0; i<len; i++){
		if(oDiv.childNodes[i].nodeType == 1){
			console.log(oDiv.childNodes[i]);   //<span></span>
		}
	}

	alert(oDiv.children.length);//ie8 -- 2,包含注释和span;	ie9~ie11 -- 1,只包含span
	
}
</script>
</head>

<body>
    <div id="div1">
    　　<!-- 嘿嘿 -->
    	<span></span>
    </div>
</body>
</html>

　　总结：IE8中children 和childNodes属性表现一样，包含注释节点和元素节点。但 IE9 之后的版本children只返回元素节点,childNodes返回注释，空白，和元素节点。

　　

javascript中的子节点查找，childNodes和children


联系
我们