JS擷取DOM節點

<div id ="father">
	<div id='target'>
		<div id="children1"></div>
		<div id="children2"></div>
		<div id="children3"></div>
	</div>
</div>
           

1. js擷取元素子節點

• 通過dom的方式直接擷取節點

父節點ID為target，有兩個位元組點，擷取target下所有位元組點

const childrens = document.getElementById('target').getElementTagName('div');
           

得出的childrens是一個數組，數組中的元素是target下的子節點。

• 通過childNodes擷取子節點

childNodes傳回的是子節點的集合，是一個數組形式。

const childrens = document.getElementById('target').childNodes;
           

• 通過children擷取子節點

同樣會傳回一個以子節點為元素的數組

const childrens = document.getElementById('target').children;
           

• 通過firstElementChild擷取第一個子節點

const children = document.getElementById('target').firstElementChild;
           

• 通過lastChild(lastElementChild)擷取最後一個子節點

const children = document.getElementById('target').lastChild;
const children = document.getElementById('target').lastElementChild;
           

2. js擷取元素父節點

• 通過parentNode擷取父節點

擷取目标元素的

直接父元素

const father = document.getElementById('target').parentNode;
           

• 通過parentElement擷取父節點

擷取目标元素的

直接父元素

,和parentNode一樣。但是parentElement是IE标準

const father = document.getElementById('target').parentElement;
           

• 通過offsetParent擷取所有父節點

擷取目标元素的所有父節點，直接能夠擷取到所有父親節點， 這個對應的值是body下的所有節點資訊

const fathers = document.getElementById('target').offsetParent;
           

3. js擷取元素兄弟節點

• 通過父節點擷取兄弟節點

const brother1 = document.getElementById('children1').parentNode.children[1];
           

• 通過previousSibling， previousElementSibling擷取上一個兄弟節點

previousSibling會比對字元，包括換行和空格，而不是節點。previousElementSibling則直接比對節點。

const brother1 = document.getElementById("children2").previousElementSibling;
const brother2 = document.getElementById("children2").previousSibling;
           

• nextSibling和nextElementSibling擷取下一個兄弟節點

同previousSibling和previousElementSibling，nextSibling和nextElementSibling也是類似的。

const brother1 = document.getElementById("children2").nextElementSibling;
var brother2 = document.getElementById("children2").nextSibling;