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

Make your text dance with the marquee attribute in HTML

Introduction to HTML DOM_PowerNode Java Academy

Make your text dance with the marquee attribute in HTML

Node.js+postman to simulate HTTP server and client interaction

SVG button example code based on CSS animation

Simple implementation of Mysql add, delete, modify and query statements

Understand the difference between BR and P tags through examples

One-click installation of MySQL 5.7 and password policy modification method

MySQL 5.7.21 installation and password configuration tutorial

Detailed steps to install MYSQL8.0 on CentOS7.6

A brief analysis of MySQL cardinality statistics

MySQL data type selection principles

Recommend

Docker Data Storage Volumes Detailed Explanation

Solve the problem that Docker cannot ping the host machine under Mac

Inspiring Design Examples of Glossy and Shiny Website Design

Analysis and solutions to problems encountered in the use of label tags

Detailed explanation of three ways to configure Nginx virtual hosts (based on ports)

MySQL 8.0.19 supports locking an account after entering an incorrect password three times (example)

Native JS implements a very good-looking counter

Tutorial on installing MySQL 5.7.28 on CentOS 6.2 (mysql notes)

Analysis of the issues and solutions for repeated submission, repeated refresh, and backoff prevention

Win10 uses Tsinghua source to quickly install pytorch-GPU version (recommended)

Basic understanding and use of HTML select option

Two methods to implement MySQL group counting and range aggregation

Implementing form submission without refreshing the page based on HTML

WeChat applet + ECharts to achieve dynamic refresh process record

WeChat applet realizes taking photos and selecting pictures from albums