childnodes 是 JavaScript 中的一个 html DOM 属性; 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;
- }
- }
浏览器支持
来源: http://www.css88.com/qa/javascript/11801.html