Introduction to HTML DOM_PowerNode Java Academy

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

Recommend

Detailed explanation of using Vue.prototype in Vue

Table of contents 1. Basic Example 2. Set the sco...

Understand the implementation of Nginx location matching in one article

Since the team is separating the front-end and ba...

5 MySQL GUI tools recommended to help you with database management

There are many database management tools for MySQ...

Will Update in a Mysql transaction lock the table?

Two cases: 1. With index 2. Without index Prerequ...

Detailed explanation of vue-router 4 usage examples

Table of contents 1. Install and create an instan...

Detailed explanation of Linux text editor Vim

Vim is a powerful full-screen text editor and the...

How to use the debouce anti-shake function in Vue

Table of contents 1. Anti-shake function 2. Use d...

Horizontal header menu implemented with CSS3

Result:Implementation Code html <nav class=&qu...

MySQL full-text search Chinese solution and example code

MySQL full text search Chinese solution Recently,...

Introduction to Linux environment variables and process address space

Table of contents Linux environment variables and...

Three ways to jump to a page by clicking a button tag in HTML

Method 1: Using the onclick event <input type=...

How to use vw+rem for mobile layout

Are you still using rem flexible layout? Does it ...

Implementing the preview function of multiple image uploads based on HTML

I recently wrote a script for uploading multiple ...

Detailed explanation of JS WebSocket disconnection reasons and heartbeat mechanism

1. Disconnection reason There are many reasons wh...

Basic steps to use Mysql SSH tunnel connection

Preface For security reasons, the root user of My...