本文共 4763 字，大约阅读时间需要 15 分钟。
The Document Object Model (DOM) is a fundamental technology for interacting with web content. It provides a structured way to manipulate and traverse elements, texts, and other parts of a web document. The DOM is built on top of ECMAScript (the core JavaScript syntax) and consists of DOM (核心DOM) and BOM (浏览器对象模型Browser Object Model).
The original goal of the DOM was to standardize the manipulation of XML and HTML documents. The current version focuses on HTML, making it easier for developers to modify and enhance web content directly from JavaScript. While the HTML DOM offers a simpler API for common tasks, it doesn't cover all functionalities. For tasks that the HTML DOM can't handle, you might need to fall back to the Core DOM. For most web development scenarios, using the HTML DOM is recommended for its simplicity and efficiency.
The DOM represents every element, text, attribute, and comment in a web document as a Node. Nodes are interconnected in a hierarchical structure, forming a tree. The root of this tree is the document object, which contains all the nodes of the webpage.
<div>, <p>).id, class).<!-- comment -->).All nodes have the following three common attributes:
| Property | Element Node | Attribute Node | Text Node | Document |
|---|---|---|---|---|
| nodeName | Element's tag name (e.g., "div") | Attribute name (e.g., "id") | Text content | Document |
| nodeType | 1 | 2 | 3 | 9 |
| nodeValue | null | Attribute value | Text content | null |
Nodes in the DOM have relationships defined by parent-child relationships and brother-sibling relationships.
parentNode: Returns the parent node of the current node.childNodes: Returns an array-like object containing all direct child nodes of the current node.firstChild: Returns the first direct child node of the current node.lastChild: Returns the last direct child node of the current node.previousSibling: Returns the previous sibling node of the current node.nextSibling: Returns the next sibling node of the current node.childNodes, previousSibling, and nextSibling properties return dynamic collections, which do not hold the list of nodes but instead provide live results. This means that iterating over these collections requires a guard.^ierceWhen using methods like firstChild or lastChild, you need to be careful. For example, in the HTML snippet <p> <span></span></p>, calling firstChild on the <p> element returns the text node containing the space between <p> and <span>, not the <span> element itself. This distinction is crucial for correctly accessing and manipulating the DOM.
An effective way to traverse the DOM is to use a combination of firstChild, lastChild, and other node relationships. Here's an example to traverse all direct child elements of an element node:
function getElementChildren(element) { const children = element.childNodes; const length = children.length; for (let i = 0; i < length; i++) { // To avoid issues with dynamic collections, check if the index still exists // If this is not feasible, store the list of nodes and compare lengths const node = children[i]; if (node.nodeType === 1) { // Process first child console.log('Child element:', node.nodeName); } }} This approach prevents unnecessary DOM re-parsing by precomputing the length of childNodes and comparing it when traversing.
The DOM also includes Element Trees, which are used when you need to work with elements only and avoid issues with text nodes or attribute nodes. Elementary trees focus on element relationships such as:
parentElementNodechildrenfirstElementChildlastElementChildpreviousElementSiblingnextElementSiblingMastering the DOM is essential for web development. By understanding node hierarchies, node types, and their relationships, you can efficiently manipulate and reshape web content. Always remember to fall back to the Core DOM when the HTML DOM API isn't sufficient, and consider using an element tree when working exclusively with elements. With practice, traversing and modifying the DOM will become intuitive and efficient.
转载地址：http://pmxdz.baihongyu.com/