HTML | DOM 位置路径名属性

在DOM中，位置路径名属性用于描述元素在文档中的位置，这些属性可以帮助开发者更轻松地找到特定的元素或者节点。

1. nodeName

nodeName 属性获取当前节点的名称。它的值是一个只读属性，它的值取决于节点的类型：

const elem = document.getElementById('example');
console.log(elem.nodeName); // 'DIV'

2. nodeType

nodeType 属性获取当前节点的类型。它的值是一个只读属性，它的值取决于节点的类型：

• Element: 值为1
• Attribute: 值为2
• Text: 值为3
• Comment: 值为8
• Document: 值为9

const elem = document.getElementById('example');
console.log(elem.nodeType); // 1

3. parentNode

parentNode 属性获取当前节点的父节点：

const child = document.getElementById('child');
console.log(child.parentNode); // <div id="parent"></div>

4. childNodes

childNodes 属性获得当前元素的所有子节点。这是一个只读属性，返回一个NodeList对象，包含当前节点的所有子节点。

const parent = document.getElementById("parent");
console.log(parent.childNodes); // NodeList(3) [text, div, text]

5. nextSibling

nextSibling 属性获取元素紧接着在DOM树中同层级的下一个元素（node）。

const elem = document.getElementById('example');
console.log(elem.nextSibling); // #text

6. previousSibling

previousSibling 属性获取元素紧接着在DOM树中同层级的上一个元素（node）。

const elem = document.getElementById('second');
console.log(elem.previousSibling); // #text

7. firstChild

firstChild 属性获取元素的第一个子节点（node）。

const parent = document.getElementById("parent");
console.log(parent.firstChild); // #text

8. lastChild

lastChild 属性获取元素的最后一个子节点（node）。

const parent = document.getElementById("parent");
console.log(parent.lastChild); // #text

总之，“位置路径名属性”给开发者提供了一组有用的属性来描述DOM中的元素和节点的位置和关系，程序员可以利用这些属性在DOM树中轻松地导航，准确定位所需的元素或节点。