Detailed analysis of DOM objects of javascript in Javaweb

1.5.3 DOM Object

1.5.3.1 DOM introduction

DOM: Document Object Model. That is, JavaScript encapsulates the various components of the HTML document as objects.

In fact, we are not unfamiliar with DOM. We have come into contact with it before when learning XML. However, the tags in the XML document require us to write code to parse, while the HTML document is parsed by the browser. The encapsulated objects are divided into

  • Document: the entire document object

  • Element: element object

  • Attribute: attribute object

  • Text: text object

  • Comment: comment object

As shown below, the left side is the HTML document content, and the right side is the DOM tree.

So what is the use of learning DOM technology? The main functions are as follows:

  • Change the content of HTML elements

  • Changing the style of HTML elements (CSS)

  • React to HTML DOM events

  • Add and remove HTML elements

In short, the purpose of dynamically changing the page effect is achieved. Specifically, we can view the 06. JS-Object-DOM-Demo.html provided in the code to experience the effect of DOM.

1.5.3.2 Obtain DOM object

We know that the role of DOM is to achieve various dynamic effects on the page by modifying the content and style of HTML elements, but the prerequisite for us to operate DOM objects is to obtain the element objects first and then operate. Therefore, the main core of learning DOM is to learn the following two points:

  • How to get the element object in the DOM (Element object, also known as label)

  • How to operate the properties of the Element object, that is, the properties of the label.

Next, let’s first learn how to get the element object in the DOM.

The Element object in HTML can be obtained through the Document object, and the Document object is obtained through the window object. The API provided by the document object for obtaining the Element element object is shown in the following table:

Function Description
document.getElementById() Get based on the id attribute value and return a single Element object
document.getElementsByTagName() Get based on the tag name and return an array of Element objects
document.getElementsByName() Get based on the name attribute value and return an array of Element objects
document .getElementsByClassName() Get based on the class attribute value and return an array of Element objects

Next, we create a file named 07. JS-Object-DOM-Get Elements.html in VS Code to demonstrate the above api. First, prepare the following page code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-Object-DOM</title>
</head>
?
<body>
    <img id="h1" src="img/off.gif"><br><br>
?
    <div class="cls">Chuanzhi Education</div><br>
    <div class="cls">Dark Horse Programmer</div><br>
?
    <input type="checkbox" name="hobby"> movies
    <input type="checkbox" name="hobby"> Travel
    <input type="checkbox" name="hobby"> Games
</body>
?
</html>

  • document.getElementById(): Obtain the label object according to the id attribute of the label. The id is unique, so a single label object is obtained.

    Add the following code:

    <script>
//1. Get the Element element
?
//1.1 Get elements - get them based on ID
 var img = document.getElementById('h1');
 alert(img);
</script>

    The browser is opened, and the effect is as shown in the figure: It can be seen from the pop-up result that this is an image tag object

  • document.getElementsByTagName(): Get the tag object based on the name of the tag. There are many tags with the same name, so the return value is an array.

    Add the following code:

    //1.2 Get elements - get them based on tags - div
var divs = document.getElementsByTagName('div');
for (let i = 0; i < divs.length; i + + ) {
     alert(divs[i]);
}

    The browser outputs the pop-up box shown below twice.

  • document.getElementsByName(): Get the label object based on the name attribute value of the label. The name attribute value can be repeated, so the return value is an array.

    Add the following code:

    //1.3 Get elements - get them based on the name attribute
var ins = document.getElementsByName('hobby');
for (let i = 0; i < ins.length; i + + ) {
    alert(ins[i]);
}

    The browser will pop up three times as shown below:

  • document.getElementsByClassName(): Get the label object based on the class attribute value of the label. The class attribute value can also be repeated. The return value is an array.

    Add code as shown below:

    //1.4 Get elements - get them based on the class attribute
var divs = document.getElementsByClassName('cls');
for (let i = 0; i < divs.length; i + + ) {
     alert(divs[i]);
}

    The browser will pop up twice, both of which are div tag objects.

  • Operational properties

    So after getting the tag, how do we operate the tag’s attributes? By querying the document information, as shown in the figure below:

  • It follows that we can modify the content of the tag through the innerHTML attribute of the div tag object. At this time, we want to replace Chuanzhi Education with Chuanzhi Education 666 on the page, so we need to get the first of the two divs, so we can get the first one in the array through subscript 0 div, comment the code before writing the following code: 

    var divs = document.getElementsByClassName('cls');
var div1 = divs[0];
?
div1.innerHTML = "Chuanzhi Education 666";

    The browser refreshes the page, and the display effect is as shown below:

  • Found that the page content changed to Chuanzhi Education 666

The complete code is as follows:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JS-Object-DOM</title>
</head>
?
<body>
    <img id="h1" src="img/off.gif"><br><br>
?
    <div class="cls">Chuanzhi Education</div><br>
    <div class="cls">Dark Horse Programmer</div><br>
?
    <input type="checkbox" name="hobby"> movies
    <input type="checkbox" name="hobby"> Travel
    <input type="checkbox" name="hobby"> Games
</body>
?
<script>
    //1. Get the Element element
?
    //1.1 Get elements - get them based on ID
    // var img = document.getElementById('h1');
    // alert(img);
?
    //1.2 Get elements - get them based on tags - div
    // var divs = document.getElementsByTagName('div');
    // for (let i = 0; i < divs.length; i + + ) {
    // alert(divs[i]);
    // }
?
?
    //1.3 Get elements - get them based on the name attribute
    // var ins = document.getElementsByName('hobby');
    // for (let i = 0; i < ins.length; i + + ) {
    // alert(ins[i]);
    // }
?
?
    //1.4 Get elements - get them based on the class attribute
    // var divs = document.getElementsByClassName('cls');
    // for (let i = 0; i < divs.length; i + + ) {
    // alert(divs[i]);
    // }
?
?
?
    //2. Query reference manual, properties and methods
    var divs = document.getElementsByClassName('cls');
    var div1 = divs[0];
    
    div1.innerHTML = "Chuanzhi Education 666";
?
</script>
</html>