Introduction to HTML DOM_PowerNode Java Academy

What is DOM?

With JavaScript, you can reconstruct the entire HTML document. You can add, remove, change, or rearrange items on the page. To change something on the page, JavaScript needs access to all elements in the HTML document. This access, along with methods and properties for adding, moving, changing, or removing HTML elements, is obtained through the Document Object Model (DOM). In 1998, the W3C published the first level of the DOM specification. This specification allows access to and manipulation of every individual element in an HTML page. All browsers implement this standard, so DOM compatibility issues are almost non-existent. The DOM can be used by JavaScript to read and change HTML, XHTML, and XML documents.

The DOM is divided into different parts (Core, XML, and HTML) and levels (DOM Level 1/2/3):

Core DOM

Defines a standard set of objects for any structured document

XML DOM

Defines a set of standard objects for XML documents

HTML DOM

Defines a standard set of objects for HTML documents.

node

According to DOM, each component in an HTML document is a node.

The DOM specifies:

The entire document is a document node
Each HTML tag is an element node
Text contained in an HTML element is a text node
Each HTML attribute is an attribute node
Comments belong to the Comments node

Node Hierarchy

Nodes have a hierarchical relationship with each other. All nodes in an HTML document form a document tree (or node tree). Each element, attribute, text, etc. in an HTML document represents a node in the tree. The tree starts at the document node and continues to branch out from there until it reaches all the text nodes at the lowest level of the tree.

The following picture shows a document tree (node tree):

Document tree (number of nodes)

Consider the following HTML document:

<html>  
  <head>  
   <title>DOM Tutorial</title>   
  </head>   
 <body>   
    <h1>DOM Lesson One</h1>   
   <p>Hello world!</p>   
 </body>   
</html>

All of the above nodes have relationships with each other. Every node except the document node has a parent node. For example, the parent node of <head> and <body> is the <html> node, and the parent node of the text node "Hello world!" is the <p> node. Most element nodes have child nodes. For example, the <head> node has one child: the <title> node. The <title> node also has one child: the text node "DOM Tutorial". When nodes share the same parent node, they are siblings (sibling nodes). For example, <h1> and <p> are siblings because their parent node is the <body> node. Nodes can also have descendants, which are all the child nodes of a node, or the children of those child nodes, and so on. For example, all text nodes are descendants of the <html> node, and the first text node is a descendant of the <head> node. Nodes can also have ancestors. An ancestor is a node's parent, or its parent's parent, and so on. For example, all text nodes can have the <html> node as an ancestor.

<<: Solve the problem of docker container exiting immediately after starting

>>: Record a pitfall of MySQL update statement update