This is the 14th day of my participation in the August Text Challenge.More challenges in August

The concept of the DOM

Document Object Model (DOM) is a standard programming interface recommended by W3C to deal with extensible Markup language. It is a platform – and language-independent application programming interface (API) that dynamically accesses programs and scripts to update their content, structure, and style of WWW documents (currently, HTML and XML documents are defined through the notes section). Documents can be further processed, and the results can be added to the current page. DOM is a tree-based API document that requires the entire document to be represented in storage during processing.

DOM tree DOM is also known as the document tree model

  • Document: A web page can be called a document
  • Nodes: Everything in a web page is a node (tags, attributes, text, comments, etc.)
  • Element: Tags in a web page
  • Attribute: Indicates the attribute of the tag

Getting page elements

Gets the element by ID

document.getElementById()

  • Method: Call the getElementById method of the Document object.
  • Parameter: String id attribute value.
  • Return value: the element object with the corresponding ID name.

Note:

  1. Because id names are unique, some browsers support direct access to elements using ID names, but this is not a standard approach and is not recommended.

  2. If js comes before the HTML structure, the structure will not be loaded and the element with the corresponding ID cannot be obtained.

var para = document.getElementById("para");
Copy the code

Gets the element by tag name

• Method: Call the getElementsByTagName method of the Document object.

• Parameter: label name of a string type.

• Return value: array of element objects with the same name.

Note:

  1. You manipulate data in the same way you manipulate arrays.

  2. The elements obtained internally by the getElementsByTagName method are added dynamically. This means that the ID does not have to be used only after the HTML page has been rendered, like the ID. For example, a Tag can be written before the , showing an empty array and then pushed into it during page rendering.

<! DOCTYPEhtml>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="Width = device - width, initial - scale = 1.0">
  <title>Document</title>
  <script>
    // Get the element ahead of time
    var divs = document.getElementsByTagName("div");
    console.log(divs);
  </script>
</head>

<body>
  <p>text1</p>
  <p>text2</p>
  <p>text3</p>
  <p>text4</p>
  <div>div1</div>
  <div>div2</div>
  <div>div3</div>
  <div>
    <p>text5</p>
  </div>
  <script>
    console.log(divs);
    // Get the element by the tag name
    var ps = document.getElementsByTagName("p");
    console.log(ps);
    // HTMLCollection A collection of HTML elements
    // The operating room needs to follow the way of manipulating arrays
    // go through the number group
    for (var i = 0; i <= ps.length - 1; i++) {
      // Print each item
      console.log(ps[i]);
    }
    ps[0].style.background = "pink";
  </script>
</body>

</html>
Copy the code

Gets the tag element inside the element object

• You can also call the getelement by tag method inside the element object, such as the div element object

Call the getElementsByTagName method.

• Purpose: Narrow the selection of elements, similar to descendant selectors in CSS.

<body>
  <div id="box1">
    <p>text1 of box1</p>
    <p>text2 of box1</p>
    <p>text3 of box1</p>
    <p>text4 of box1</p>
  </div>
  <div id="box2">
    <p>text1 of box2</p>
    <p>text2 of box2</p>
    <p>text3 of box2</p>
    <p>text4 of box2</p>
  </div>
  <script>
    // The element object can continue to call the method that gets the element by the tag name
    // Similar to CSS descendant selectors, narrow the selection
    var box1 = document.getElementById("box1");
    // We are used to writing sequential calls separately
    var ps1 = box1.getElementsByTagName("p");
    console.log(ps1);
  </script>
</body>
Copy the code

Get elements by name (not recommended)

• Method: Call the getElementsByName method of the Document object. (getElementsByTagName differs from getElementsByTagName in that it can only be called by document.)

• Parameter: the value of the name attribute as a string.

• Return value: an array of element objects with the same value as the name attribute.

• Selected elements change dynamically.

• Not recommended: There are compatibility issues in IE and Opera. Elements with the same ID attribute value will be selected.

<body>
  <form>
    <input type="radio" name="age">0 ~ 10<br>
    <input type="radio" name="age">11 ~ 20<br>
    <input type="radio" name="age">20 ~ 30<br>
  </form>
  <div id="age">age</div>
  <script>
    // Get the element from the tag's name attribute
    var ages = document.getElementsByName("age");
    // NodeList NodeList collection class array
    console.log(ages);
    // Compatibility problem: There is compatibility problem in IE and Opera, the part with the same id attribute value will be selected
  </script>
</body>
Copy the code

Gets elements by class name

• Method: Call the getElementsByClassName method of the Document object.

• Parameter: class attribute value of string type.

• Return value: An array of element objects with the same class property value, dynamically added.

• Browser compatibility problem: Internet Explorer 8 or later is not supported

<body>
  <div id="box1">
    <p>text1 of box1</p>
    <p class="para">text2 of box1</p>
    <p class="para">text3 of box1</p>
    <p>text4 of box1</p>
  </div>
  <div id="box2">
    <p>text1 of box2</p>
    <p class="para">text2 of box2</p>
    <p class="para">text3 of box2</p>
    <p>text4 of box2</p>
  </div>
  <script>
    // Get the element from the class attribute value
    // var paras = document.getElementsByClassName("para");
    // Get the element object with id box1
    var box1 = document.getElementById("box1");
    // The getElementsByClassName method can also be called inside the element object
    var paras1 = box1.getElementsByClassName("para");
    console.log(paras1);
    // Compatibility problem: Internet Explorer 8 and below are not supported
  </script>
</body>
Copy the code

Gets elements based on the selector

• Method 1: Call the querySelector method of the Document object and use the CSS selector to select the first qualified tag element.

• Method 2: Call the querySelectorAll method of the Document object and use the CSS selector to select all qualified tag elements.

Class selector is preceded by.

Prefix the ID selector with #

• Arguments: string selectors in CSS.

• Browser compatibility problem: Browsers earlier than Internet Explorer 8 are not supported

Note:

Both methods are similar to ID selection and can only be selected after rendering is complete

conclusion

Master, no compatibility issues:

getElementById()

getElementsByTagName()

To understand:

getElementsByName()

getElementsByClassName()

querySelector()

querySelectorAll()