<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属性获取到的是指定元素中所有的节点 console.log(oDiv.childNodes); // 通过childNodes属性获取到指定元素中所有的子元素 for (let node of oDiv.childNodes){ if (node.nodeType === Node.ELEMENT_NODE){ console.log(node); } }
-
2. 什么是节点?
- DOM对象(document), 这个对象以树的形式保存了界面上所有的内容
-
HTML页面每一部分都是由节点(标签(元素), 文本, 属性)
HTML DOM 树
-
3.1 获取指定节点的第一个子节点 (firstChild)
let oDiv = document.querySelector("div"); console.log(oDiv.firstChild); -
3.2获取指定节点的第一个子元素 (firstElementChild)
let oDiv = document.querySelector("div"); console.log(oDiv.firstElementChild);
-
4.1 获取指定节点的最后一个子节点 (lastChild)
let oDiv = document.querySelector("div"); console.log(oDiv.lastChild); -
4.2 获取指定节点的最后一个子元素 (lastElementChild)
let oDiv = document.querySelector("div"); console.log(oDiv.lastElementChild);
-
5. 1 通过子元素获取父节点 (parentNode)
let item = document.querySelector(".item"); console.log(item.parentNode); -
5.2 通过子元素获取父元素 (parentElement)
let item = document.querySelector(".item"); console.log(item.parentElement);
-
6.1 获取相邻上一个节点 (previousSibling)
let item = document.querySelector(".item"); console.log(item.previousSibling); -
6.2 获取相邻上一个元素 (previousElementSibling)
let item = document.querySelector(".item"); console.log(item.previousElementSibling);
-
7.1 获取相邻下一个节点 (nextSibling)
let item = document.querySelector(".item"); console.log(item.nextSibling); -
7.2 获取相邻下一个元素 (nextElementSibling)
let item = document.querySelector(".item"); console.log(item.nextElementSibling);
