js获取父级节点、子集节点、兄弟节点方法

一.js获取父级节点

1. document.getElementById("test").parentElement;

2. document.getElementById("test").parentNode;

3. document.getElementById("test").offsetParent; // 获取所有父节点，返回数据为数组类型

 

二.js获取子集节点

1. document.getElementById("test").getElementsByTagName("div");//获取指定节点所有标签名为div的子节点

例如：

<p id="test">
    <div>1</div>
    <div>2</div>
    <div>3</div>
</p>

document.getElementById("test").getElementsByTagName("div");结果为 <p> 标签内容部三个div节点的集合

 

2. document.getElementById("test").childNodes

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

 

3. document.getElementById("test").firstElementChild; //获取第一个子节点

 

4. document.getElementById("test").lastElementChild; //获取最后一个子节点

 

三.js获取兄弟节点

1. document.getElementById("test").previousElementSibling; //获取上一个兄弟节点

2.document.getElementById("test").nextElementSibling; //获取下个兄弟节点

3.可以通过获取父节点后在获取相应的子节点