1, the DHTML

Dynamic HTML is not a new language or a new technology, but a general term for integrating existing technologies to enable web pages to maintain Dynamic effects even offline.

2, dom

Document Object Model

The Document Object Model is dedicated to manipulating documents (HTML and CSS)

3, the dom tree

DOM treats an HTML document as an inverted tree structure

In AN HTML document, all elements, attributes, text, comments, and so on are treated as a DOM node /DOM object /DOM element

4, important concept **

  1. The root is actually the Document object
  2. In JS, what we don’t need to create is automatically created by the browser’s JS interpreter, and a page only has a Document
  3. What it does: You can find any of the following DOM elements through the root and manipulate them

5. Get elements

  1. Obtained by using HTML features
 // Obtain by id
 const ele = document.getElementById("Id value")
 ​
 // By class name
 const ele = document/parent.getElementsByClassName("Label name");
 ​
 // By the tag name
 const ele = document/parent.getElementsByTagName("Label name");
 ​
 // note that ---- could not find an empty set to return, and the return class array set was found
 ​
 // add a selector for h5
 const ele = document.querySelector("Selector");
 const eles = document.querySelectorAll("Selector");
 ​
Copy the code

  1. Search through relationships

    If you want to use it, you need to find at least one person to use it

    1. Parent element: xx.parentNode; // Single element
    2. Child element: xx. Children; / / collection
    3. First son: xx. FirstElementChild; // Single element
    4. Last son: xx. LastElementChild; // Single element
    5. Before a brother: xx. PreviousElementSibling; // Single element
    6. Next sibling: xx.nextelementSibling; // Single element

Operation element *

  1. The content of the element: what is in the tag

    1. innerHTML

    2. innerText

      Summary: These two operations are almost similar, but only innerHTML can recognize a tag. InnerText can only manipulate plain text — only double tags are available

    3. The value attribute

      Setup and fetch content prepared specifically for single-label INPUe

  2. Element attributes:

     <div class='xx' name = 'xx' width = 'xx' zidingyi = 'xx' alt src></div>
Copy the code

    1. Gets the attribute value of the element

       elem.getAttribute("Attribute name");
Copy the code

    2. Sets the attribute value of the element

       elem.setAttribute("Attribute name"."Attribute value");
Copy the code

    Simplified operations on elements: — This operation cannot operate on custom attributes

    1. To obtain

      Elem. The property nameCopy the code

    2. Set up the

      Elem. Attribute name ='Attribute value'
Copy the code

      \