About what is the DOM thing

DOM

DOM: Document Object Model
document object application
popular: use JS to manipulate HTML

window.document

The entire HTML code will be parsed into a JS object by the browser.
The name of this object is Document, which is stored in the window of the global area.

    <script>
      // 整个HTML代码会被浏览器解析为JS对象
      // 这个对象的名字就是Document，储存在全局区的window里面
      console.log(window);
      console.log(window.document);
    </script>

insert image description here
We are now using the beautified style of the display printed by log

console.dir(window);
console.dir(window.document);

insert image description here

DOM tree

Before learning DOM, we need to know
the tag deconstruction of DOM tree HTML. If it is expressed by use, it is nested layer by layer and progressive layer by layer. This deconstruction is similar to a tree
insert image description here

DOM tree control diagram

<!DOCTYPE html>
<html lang="en">
  <body>
    <div>
      <h1>text1</h1>
      <h2>text2</h2>
      <ul>
        <li>1</li>
        <li>2</li>
        <li>2</li>
        <li>
          <em>01</em>
          <em>02</em>
          <em>03</em>
        </li>
      </ul>
      <script></script>
    </div>
  </body>
</html>

The structure is:
insert image description here
DOM operation: it is to operate the document object to modify the content of the page.
DOM operations are divided into two categories: find the element to be operated + the attribute of the operated element,
and need to add items to the element with id=box

<!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>Document</title>
</head>
<body>
  <div id="box">

  </div>
  <script>
    box.innerHTML="hello DOM ！"
  </script>
</body>
</html>

insert image description here
Why is there no box in JS, and it can still be used without reporting an error?
id: unique identifier: when writing a variable in JS, if there is nothing in the JS, it will look for the ID,
so we usually check this property and use it again
So:

<body>
  <div id="box"></div>
  <script>
    // get:获取
    // element:元素
    // id：唯一标识
    var box = document.getElementById("box");
    console.dir(box);
    console.log(box);
  </script>
</body>

After printing it, we will find that it is actually a very large object. After
insert image description here
printing it in detail, we will find it.

Next, let’s change the color and try

the result:

everyone will say: If I change it like this, it’s better to write a CSS directly. In fact, they There is something else in between - he is dynamic

DOM events

Event operation: After the event, the page can be operated with the user.
For example, add a click event to change the color after clicking
, so we can write like this

<body>
  <div id="box" onclick="color()">master</div>
  <script>
    var box = document.getElementById("box");
    function color() {
      
      
      box.style.color = "red";
    }
  </script>
</body>

Of course, we can also implement it through callback function monitoring

<body>
  <div id="box">master</div>
  <script>
    var box = document.getElementById("box");
    box.onclick = function color() {
    
    
      box.style.color = "red";
    };
  </script>
</body>

Before click
insert image description here
After click:

Find properties by tag

Requirements: Click on the list to change color
Get: Get
Element: elements
by: through
Tag: label
Name: name