DOM, the document Object Model (DOM), is a basic knowledge that front-end developers must learn. In this article, you’ll learn how to select elements in AN HTML document, how to create elements, how to change inline CSS styles, and how to listen for events.

What is the DOM

DOM document object model is the programming interface of HTML and XML documents. It represents a document with a logical tree. Each branch of the tree ends with a node. Make the page more dynamic.

DOM treats an HTML document as a tree of nodes, each representing an HTML element. Here is the HTML code to better understand the DOM tree structure.

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>DOM tree </title> </head> <body> <h1>DOM object model </h1> <h2>DOM tree structure </h2> </body> </ HTML >Copy the code

The document is called the root node and contains a child node, the < HTML > element. The < HTML > element contains two child elements, the and elements.

Both and have their own child elements, as shown below:

These elements in the document can be accessed and changed through JavaScript. Here’s how to work with the DOM using JavaScript.

Select elements

How do you select elements in a document? There are several different ways to select elements in an HTML document. Here are three of them:

  • getElementById(): returns an element that matches a specific ID.
  • querySelector(): Returns the first HTMLElement object in the document that matches the specified selector or selector group.
  • querySelectorAll(): returns a list of elements in the document that match the specified selector group (nodes traversed through the document using depth-first order).

getElementById()

In HTML, ID is the unique identifier of an HTML element, which means that you cannot set the same ID for two different elements. You must ensure that the ID is unique throughout the document.

In JavaScript, you can get HTML tags by using id names.

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>DOM tree </title> </head> <body> < H1 >DOM object model </h1> <h2>DOM tree structure </h2> <p id="intro">DOM is the document object model, which is a programming interface. </p> <script type="text/javascript"> const elemIntro = document.getElementById("intro"); console.log(elemIntro); </script> </body> </html>Copy the code

Open developer tools:

To get the textContent of an object, use textContent or innerText:

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>DOM tree </title> </head> <body> < H1 >DOM object model </h1> <h2>DOM tree structure </h2> <p id="intro">DOM is the document object model, which is a programming interface. </p> <script type="text/javascript"> const elemIntro = document.getElementById("intro"); console.log(elemIntro); // get the textContent of the element const elemText = elemintr.textcontent; // elemIntro.innerText console.log(elemText); </script> </body> </html>Copy the code

Open the controller to view:

querySelector()

Use this method to find elements with one or more CSS selectors. In the following example, use querySelector() to get the corresponding title and list elements.

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>DOM tree </title> </head> <body> </h1> <ul class="movies"> <li> </li> <li> </li> <li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li type="text/javascript"> const elemTitle = document.querySelector("h1"); const elemList = document.querySelector(".movies"); console.log("h1"); console.log(elemTitle); console.log("ul movies"); console.log(elemList); </script> </body> </html>Copy the code

Open the document in your browser and open the developer tool, you can see the following:

querySelectorAll()

This method looks for all elements that match the CSS selector and returns a list of nodes. Here’s how it looks for each li element in the movie schedule:

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>DOM tree </title> </head> <body> </h1> <ul class="movies"> <li> </li> <li> </li> <li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li type="text/javascript"> const elemTitle = document.querySelector("h1"); const movieItems = document.querySelectorAll(".movies > li"); console.log(movieItems); </script> </body> </html>Copy the code

The console printing effect is as follows:

The above node list can be traversed as follows:

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>DOM tree </title> </head> <body> </h1> <ul class="movies"> <li> </li> <li> </li> <li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li type="text/javascript"> const elemTitle = document.querySelector("h1"); const movieItems = document.querySelectorAll(".movies > li"); movieItems.forEach((item) => { console.log(item); }); </script> </body> </html>Copy the code

The console printing effect is as follows:

Add new elements

How do YOU add new elements to a document? You can add a new element to the DOM tree using document.createElement(), and add content to its new element via textContent, as in the following example, adding a new date to a movie date list:

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>DOM tree </title> </head> <body> </h1> <ul class="movies" id="movies"> <li type="text/javascript"> const movieItems = document.getElementById("movies"); const newMovie = document.createElement("li"); Newmovie. textContent = "Eagle catches chicken "; movieItems.appendChild(newMovie); </script> </body> </html>Copy the code

After running, the page effect is as follows:

Changing CSS Styles

How do I change inline CSS styles? Use the style attribute to change the CSS style in the HTML document, or take the National Day movie schedule as an example, change the font size and font color of the page title H1 element:

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>DOM tree </title> </head> <body> </h1> <ul class="movies"> <li> </li> <li> </li> <li> </li> </li> </li> </li> </li> </li> </li> </li> </li> </li type="text/javascript"> const pageTitle = document.querySelector("h1"); pageTitle.style.fontSize = "24px"; pageTitle.style.color = "#0000FF"; </script> </body> </html>Copy the code

After running, the page effect is as follows:

For CSS style attributes, in JavaScript, the camel way is adopted, such as font size in JavaScript corresponding to the property of fontSize, background-color is backgroundColor.

How to listen for events

How do I use events to listen for elements on a page? Using the addEventListener() method, the following example adds a new movie schedule to the list by clicking the button as follows:

<! DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, Initial-scale =1.0" /> <meta HTTP-equiv =" x-UA-compatible "content=" IE =edge" /> <title>DOM tree </title> </head> <body> <h1> <ul id="movies"> <li> <li> < Li > < Li > < Li > < Li > < Li > <li> <li> <li> <li> <li> <button button Id ="addNew"> </button> <script type="text/javascript"> const moviesList = document.getelementbyid ("movies"); const button = document.getElementById("addNew"); const addNewMovie = (movieTitle, elemTarget) => { const newMovie = document.createElement("li"); newMovie.textContent = movieTitle; newMovie.style.color = "#ff0000"; elemTarget.appendChild(newMovie); }; Button.addeventlistener ("click", () => {addNewMovie(" moviesList ", moviesList); }); </script> </body> </html>Copy the code

After running, the page effect is as follows:

In the actual project, event monitoring processing is more responsible than this, for modern WEB development, rich front-end framework, for the event processing has been encapsulated very well, even let developers forget the relevant knowledge of event monitoring, such as event bubbling, event capture, event delegation, this article will not expand.

conclusion

The DOM Document Object Model is a programming interface for HTML and XML documents. When a browser first reads (parses) an HTML document, it creates a large object, a very large object based on the HTML document, which is the DOM. It is a tree structure modeled from HTML. The DOM is used to interact with and modify the DOM structure or specific elements or nodes.