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;
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章