JavaScript - Document Object Model (DOM)

<p> DOM Detailed Explanation: The programming interface of the web document

<p> 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.

<p>

How to find and access HTML elements on the HTML page? <p> Find HTML elements according to ID

• Example:

Find the HTML element according to the label name <p>

<code class="language-javascript">const element = document.getElementById("intro");</code>

Example:
• Find HTML elements according to the category name

<p>

Example:

<code class="language-javascript">const element = document.getElementsByTagName("p");</code>

• 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.). <p>

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

<code class="language-javascript">const x = document.getElementsByClassName("intro");</code>

• Use the HTML object collection to find the HTML element

<p> Node (nodes) querySelectorAll()

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

<code class="language-javascript">const x = document.querySelectorAll("p.intro");</code>

Element nodes:

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

, <p>, etc.

In the above example, <p> is an element node.

<p> text node:

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

<code class="language-html"><h1>Hello, World!</h1></code>

<p> <h1> Create elements:

Use the <p> method to create HTML elements. Create text nodes:

Use <p> to create text nodes.

<code class="language-html"><h1>Hello, World!</h1></code>

Add text to the element: <p> Use the <h1> method to add text nodes to the created elements.

<p> 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: () <p> Through the above methods, you can effectively operate and modify the content of the webpage.

The above is the detailed content of JavaScript - Document Object Model (DOM). For more information, please follow other related articles on the PHP Chinese website!