javascript中的子节点查找，childNodes和children
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了javascript中的子节点查找，childNodes和children相关的知识，希望对你有一定的参考价值。
一、查找元素：
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的主要内容，如果未能解决你的问题，请参考以下文章