HTML | DOM 目录属性

HTML | DOM 目录属性指的是在 JavaScript 中访问 HTML 文档的元素和元素集合的属性。这些属性是用来组织和定位 HTML 元素的。

目录属性列表

以下是一些常见的 HTML | DOM 目录属性：

| 属性 | 描述 | | ------------- | ---------------------------------------------------------- | | children | 返回指定元素的子元素 | | firstChild | 返回一个元素的第一个子元素 | | lastChild | 返回节点子元素的最后一个节点 | | nextSibling | 返回紧接在当前节点后面的下一个兄弟节点 | | parentNode | 返回某一节点的父节点 | | previousSibling | 返回紧邻在当前节点之前的前一个兄弟节点 | | childNodes | 以 NodeList 对象返回节点的子节点列表。 | | firstElementChild | 返回元素的第一个子元素。如果元素没有子元素，则返回 null。 | | lastElementChild | 返回元素的最后一个子元素。如果元素没有子元素，则返回 null。 | | nextElementSibling | 返回紧接在当前元素后面的下一个兄弟元素。 | | previousElementSibling | 返回紧邻在当前元素之前的前一个兄弟元素。 |

children 属性

children 属性返回元素的子元素列表。它是一个 NodeList 对象，可以通过索引访问每个子元素的节点和元素。

以下是一个例子：

var parent = document.getElementById("parentElement");
var childList = parent.children;

for (var i = 0; i < childList.length; i++) {
  console.log(childList[i]);
}

firstChild 和 lastChild 属性

firstChild 属性返回元素的第一个子节点，而 lastChild 属性返回元素的最后一个子节点。

以下是一个例子：

var parent = document.getElementById("parentElement");
var firstChild = parent.firstChild;
var lastChild = parent.lastChild;

nextSibling 和 previousSibling 属性

nextSibling 属性返回紧接在当前节点后面的下一个兄弟节点，而 previousSibling 属性返回紧邻在当前节点之前的前一个兄弟节点。

以下是一个例子：

var element = document.getElementById("currentElement");
var nextSibling = element.nextSibling;
var previousSibling = element.previousSibling;

parentNode 属性

parentNode 属性返回某一节点的父节点。

以下是一个例子：

var element = document.getElementById("currentElement");
var parent = element.parentNode;

childNodes 属性

childNodes 属性以 NodeList 对象返回一个节点的子节点列表。可以使用数字索引来访问每个子节点。

以下是一个例子：

var parent = document.getElementById("parentElement");
var childNodes = parent.childNodes;

for (var i = 0; i < childNodes.length; i++) {
  console.log(childNodes[i]);
}

firstElementChild 和 lastElementChild 属性

firstElementChild 属性返回一个元素的第一个子元素。如果元素没有子元素，则返回 null。lastElementChild 属性返回一个元素的最后一个子元素。如果元素没有子元素，则返回 null。

以下是一个例子：

var parent = document.getElementById("parentElement");
var firstElementChild = parent.firstElementChild;
var lastElementChild = parent.lastElementChild;

nextElementSibling 和 previousElementSibling 属性

nextElementSibling 属性返回紧接在当前元素后面的下一个兄弟元素，而 previousElementSibling 属性返回紧邻在当前元素之前的前一个兄弟元素。

以下是一个例子：

var element = document.getElementById("currentElement");
var nextElementSibling = element.nextElementSibling;
var previousElementSibling = element.previousElementSibling;

以上是常见的 HTML | DOM 目录属性，它们可以帮助您在 JavaScript 中访问 HTML 文档元素以及元素集合。