<body>
<div>
<h1>1</h1>
<h2>2</h2>
<p class="item">3</p>
<p>4</p>
<span>5</span>
</div>
</body>
-
1. 獲取指定元素所有的子元素 (children) or (childNodes)
let oDiv = document.querySelector("div"); // children屬性獲取到的是指定元素中所有的子元素 console.log(oDiv.children); // childNodes屬性獲取到的是指定元素中所有的節(jié)點 console.log(oDiv.childNodes); // 通過childNodes屬性獲取到指定元素中所有的子元素 for (let node of oDiv.childNodes){ if (node.nodeType === Node.ELEMENT_NODE){ console.log(node); } }
-
2. 什么是節(jié)點?
- DOM對象(document), 這個對象以樹的形式保存了界面上所有的內(nèi)容
-
HTML頁面每一部分都是由節(jié)點(標簽(元素), 文本, 屬性)
HTML DOM 樹
-
3.1 獲取指定節(jié)點的第一個子節(jié)點 (firstChild)
let oDiv = document.querySelector("div"); console.log(oDiv.firstChild); -
3.2獲取指定節(jié)點的第一個子元素 (firstElementChild)
let oDiv = document.querySelector("div"); console.log(oDiv.firstElementChild);
-
4.1 獲取指定節(jié)點的最后一個子節(jié)點 (lastChild)
let oDiv = document.querySelector("div"); console.log(oDiv.lastChild); -
4.2 獲取指定節(jié)點的最后一個子元素 (lastElementChild)
let oDiv = document.querySelector("div"); console.log(oDiv.lastElementChild);
-
5. 1 通過子元素獲取父節(jié)點 (parentNode)
let item = document.querySelector(".item"); console.log(item.parentNode); -
5.2 通過子元素獲取父元素 (parentElement)
let item = document.querySelector(".item"); console.log(item.parentElement);
-
6.1 獲取相鄰上一個節(jié)點 (previousSibling)
let item = document.querySelector(".item"); console.log(item.previousSibling); -
6.2 獲取相鄰上一個元素 (previousElementSibling)
let item = document.querySelector(".item"); console.log(item.previousElementSibling);
-
7.1 獲取相鄰下一個節(jié)點 (nextSibling)
let item = document.querySelector(".item"); console.log(item.nextSibling); -
7.2 獲取相鄰下一個元素 (nextElementSibling)
let item = document.querySelector(".item"); console.log(item.nextElementSibling);
