关于什么是DOM这档子事

DOM

DOM：Documment Object Model
文档对象应用
通俗：用JS来操作HTML

window.document

整个HTML代码会被浏览器解析为JS对象
这个对象的名字就是Document，储存在全局区的window里面

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

在这里插入图片描述
我们现在是使用log打印的展示的美化后的样式

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

在这里插入图片描述

DOM树

学习DOM之前我们要知道DOM树
HTML的标签解构，如果用途来表示的话，就是层层嵌套，层层递进，这个解构就类似于一棵树
在这里插入图片描述

DOM树对照图

<!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>

而结构就是：
在这里插入图片描述
DOM操作：就是操作document这个对象，来修改页面的内容
DOM操作分为两类：找到要操作的元素+操作元素的属性
需求向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>

在这里插入图片描述
为什么JS之中没有box，还能使用不会报错呢？
id：唯一标识：当JS中事故写一个变量，当这个JS里面什么都没有的话，就会去找ID
所以我们一般会去查询到这个属性再使用
所以：

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

打印一下我们就会发现，他其实是一个超大的对象，
在这里插入图片描述
详细打印我们就会发现

接下来我们改个颜色试试

结果：

大家就会说：我这样改的的话还不如直接写个CSS，其实他们之间是有去别的——他是动态的

DOM的事件

事件操作：有了事件之后页面就可以与用户进行操作了
比如说添加一个点击事件点击之后变色
所以我们可以这样写

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

当然我们也可以通过回调函数监听来实现

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

点击前
在这里插入图片描述
点击后：

通过标签查找属性

需求：点击list变色
get：获取
Element：元素们
by：通过
Tag：标签
Name：名字