I. Introduction to DOM

JavaScript also initially provides a rudimentary DOM, so let’s take a look at what the DOM is.

(1. What is DOM?)

DOM, short for Document Object Model, is a set of methods for abstracting and conceptualizing the content of a Document. In addition, we need to learn about DHTML

(2. What is DHTML?)

DHTML (dynamic HTML) a term used to describe the combination of HTML, CSS, and JavaScript technologies. Meaning:

  • Markup of web pages as elements using HTML
  • Use CSS to set the style of elements and their display position
  • Use JavaScript to control and change the style of the page in real time

(3.DOM development history)

DOM was born in the “Browser war” between Microsoft and Netscape in the late 1990s. In order to fight it out between JavaScript and JScript, the two sides gave the browser powerful functions on a large scale. But when Microsoft and Netspace developed DHTML using different standards, rendering many web pages unusable and incompatible on non-Microsoft platforms and browsers, the W3C, which sets standards for Web communications, began planning the DOM.

Second, the object

An object is a very important data type. An object is a self-contained collection of data that can be accessed in two forms: attributes and methods. Each element in a document is an object.

  • Properties: Variables of a particular object
  • Method: A specific function that can be called by a specific object

(1. Built-in object)

A built-in object is a JavaScript object that has been created but not initialized. For example, arrays are our most common array

    Var arr = new Array(a);Copy the code

When we use the new keyword to initialize an Array, we are creating an instance of an Array object.

(2. Host object)

The objects predefined by the browser are called host objects. Host objects include forms, images, elements, etc. The most common host object is the Document object.

Three, node,

D is a document, O is the object, M is the model. A document is a collection of nodes. Let’s look at the three most commonly used nodes.

(1. Element node)

The DOM atoms are element nodes, and the name of the tag is the name of the element, and the position of each element constitutes the structure of the document.

    <p></p>   
Copy the code

(2. Text node)

The text node is contained inside the element node. For example, the text content “Hello Word” contained in the element

is a text node.

    <p> Hello Word </p> 
Copy the code

(3. Attribute node)

Attribute nodes are used to give a more specific description of the element and are contained within the element node.

    <p style="color:red"; > Hello Word </p>
Copy the code

4. Get elements

There are three ways to get DOM element nodes.

(1. GetElementById method)

We first create a P element, then create an ID value for the element, and use the getElementById method to get the text node of the element.

    <p id="box">Hello Word</p>
    <script>
        var a = document.getElementById("box").innerHTML;
        alert(a);
    </script>
Copy the code

Let’s see what happens

In the figure above we can see that the text of the P element with id box was successfully popped up.

(2. GetElementsByTagName method)

The getElementsByTagName method returns an array of objects, and the parameter value is the label name

    alert(document.getElementsByTagName("p").length);
Copy the code

Let’s see what happens

From the figure above we can see that a number was successfully returned, which represents the array value of the p element.

(3. GetElementsByClassName method)

This method is similar to getElementsByTagName in that it returns an array of elements with the same class name. You can also use this method to find elements with multiple class names.

Conclusion:

  • A document is a tree of nodes
  • GetElementById returns an object that corresponds to a specific element node in the document
  • GetElementsByTagName and getElementsByTagName return an array of objects corresponding to a specific set of element nodes in the document
  • Each node is an object