主题选择:system

JS获取子节点、父节点和兄弟节点的若干种方式

原文链接:https://blog.csdn.net/laok_/article/details/75760572

一、js获取子节点的方式

1.通过获取dom方式直接获取子节点

其中test的父标签id的值,div为标签的名字。getElementsByTagName是一个方法。返回的是一个数组。在访问的时候要按数组的形式访问。

var a = document.getElementById("test").getElementsByTagName("div");

2.通过childNodes获取子节点

使用childNodes获取子节点的时候,childNodes返回的是子节点的集合,是一个数组的格式。他会把换行和空格也当成是节点信息。

var b =document.getElementById("test").childNodes; //为了不显示不必须的换行的空格,我们如果要使用childNodes就必须进行必要的过滤。通过正则表达式式取掉不必要的信息。 //去掉换行的空格 for(var i=0; i<b.length;i++){ if(b[i].nodeName == "#text" && !/\s/.test(b.nodeValue)){ document.getElementById("test").removeChild(b[i]); } } //打印测试 for(var i=0;i<b.length;i++){ console.log(i+"---------") console.log(b[i]); } //补充 document.getElementById("test").childElementCount; 可以直接获取长度 同length

3.通过children来获取子节点

var getFirstChild = document.getElementById("test").children[0];

评论