JavaScript - Document Object Model (DOM)

DOM Detailed Explanation: The programming interface of the web document

DOM (Document Object Model) is a programming interface for web documents. It represents the structure of the HTML or XML document as the tree of the object. With the help of DOM, developers can use JavaScript to dynamically interact with the webpage and operate the webpage. HTML DOM allows JavaScript to change the content of HTML elements.

How to find and access HTML elements on the HTML page?

Find HTML elements according to ID

• Example:

Find the HTML element according to the label name

const element = document.getElementById("intro");

Example:
• Find HTML elements according to the category name

Example:

const element = document.getElementsByTagName("p");

• Use the CSS selector to find the HTML element

Use Method to find all HTML elements that match the specified CSS selector (ID, class name, type, attribute, attribute value, etc.).

Example: Find the paragraph element with a type of "Intro":

const x = document.getElementsByClassName("intro");

• Use the HTML object collection to find the HTML element

Node (nodes) querySelectorAll()

DOM's content is nodes, such as elements, text, attributes.

const x = document.querySelectorAll("p.intro");

Element nodes:

• means HTML or XML elements. For example: ,
,

,

, etc.

In the above example,

is an element node.

text node:

indicates the text content in the element.

<div> <code><h1></h1> The text in the element "Hello, World!" Is a text node. <p></p> <span></span> Create a new HTML element (node):

<h1 id="Hello-World">Hello, World!</h1>

<h1></h1> Create elements:

Use the

method to create HTML elements. Create text nodes:

Use

to create text nodes.

<h1 id="Hello-World">Hello, World!</h1>

Add text to the element:

Use the <h1></h1> method to add text nodes to the created elements.

Create a DIV element: Use Create

element again.

1. Insert the element into the div: Put the elements created in the front into the div. document.createElement() Insert the div into the document:
Finally, add the DIV to the document subject (or any other parent element required).
2. Example code fragment (slightly defined code, only retain the key part): document.createTextNode()
3. Change the HTML style: appendChild() grammar:
4. Example: ()

   Through the above methods, you can effectively operate and modify the content of the webpage.