<div id ="father">
<div id='target'>
<div id="children1"></div>
<div id="children2"></div>
<div id="children3"></div>
</div>
</div>
1. js獲取元素子節點
父節點ID爲target,有兩個字節點,獲取target下所有字節點
const childrens = document.getElementById('target').getElementTagName('div');
得出的childrens是一個數組,數組中的元素是target下的子節點。
childNodes返回的是子節點的集合,是一個數組形式。
const childrens = document.getElementById('target').childNodes;
同樣會返回一個以子節點爲元素的數組
const childrens = document.getElementById('target').children;
const children = document.getElementById('target').firstElementChild;
const children = document.getElementById('target').lastChild;
const children = document.getElementById('target').lastElementChild;
2. js獲取元素父節點
獲取目標元素的直接父元素
const father = document.getElementById('target').parentNode;
獲取目標元素的直接父元素
,和parentNode一樣。但是parentElement是IE標準
const father = document.getElementById('target').parentElement;
獲取目標元素的所有父節點,直接能夠獲取到所有父親節點, 這個對應的值是body下的所有節點信息
const fathers = document.getElementById('target').offsetParent;
3. js獲取元素兄弟節點
const brother1 = document.getElementById('children1').parentNode.children[1];
previousSibling會匹配字符,包括換行和空格,而不是節點。previousElementSibling則直接匹配節點。
const brother1 = document.getElementById("children2").previousElementSibling;
const brother2 = document.getElementById("children2").previousSibling;
同previousSibling和previousElementSibling,nextSibling和nextElementSibling也是類似的。
const brother1 = document.getElementById("children2").nextElementSibling;
var brother2 = document.getElementById("children2").nextSibling;