JavaScript DOM 文档对象模型（1）

2301_81570045

596人浏览 · 2026-05-17 15:39:56

2301_81570045 · 2026-05-17 15:39:56 发布

一、什么是DOM

DOM（Document Object Model——文档对象模型）是浏览器提供的专门用来操作网页内容的功能。DOM作用：开发网页内容特效和用户交互。

二、DOM对象

浏览器根据html标签生成的js对象。所有的标签属性都可以在这个对象上找到，修改这个对象的属性会自动映射到标签身上。核心思想：把网页内容当作对象处理。

例如：

<!--部分代码-->
<body>
  <div>123</div>
  <script>
    // div1 就是dom对象
    const div1 = document.querySelector("div");
    console.log(div1);
  </script>
</body>

三、获取DOM元素

1、根据css选择器获取dom元素

（1）匹配符合条件的第一个元素。可以根据标签名，class名，id获取。

例如：

<!--部分代码-->
<body>
  <div>第一个div</div>
  <div class="nav">第二个div</div>
  <div id="div">第三个div</div>
  <script>
      // 用标签名获取dom元素 对象名=document.querySelector("标签名")
      const div1 = document.querySelector("div");
      // 用class名获取dom元素，对象名=document.querySelector(".类名")
      const div2 = document.querySelector(".nav");
      // 用id获取dom元素，对象名=document.querySelector("#id名")
      const div3 = document.querySelector("#div");
  </script>
</body>

注：在获取无序列表ul的li可以这么写

例如：

<!--部分代码-->
<body>
  <ul>
      <li>测试1</li>
      <li>测试2</li>
      <li>测试3</li>
  </ul>
  <script>
      // 获取第一个 li
      const li = document.querySelector("ul li:first-child")
      // 获取第n个：nth-child(n)   注意：n从第1开始计数
      const li1 = document.querySelector("ul li:nth-child(2)")
      const li2 = document.querySelector("ul li:nth-child(3)")
  </script>
</body>

（2）一次性获取多个元素。用querySelectorAll，返回对象集合，得到一个伪数组（有长度有索引的数组，但是没有pop()，push()等数组方法）。

例如：

<!--部分代码-->
<body>
    <div>第一个div</div>
    <div>第二个div</div>
    <div>第三个div</div>
    <script>
        const div1 = document.querySelectorAll("div");
        console.log(div1)
    </script>
</body>

2、其他获取方式

（1）根据id获取一个元素。

语法：

对象 = document.getElementById("id")

（2）根据标签获取一类元素。

语法：

对象 = document.getElementsByTagName("标签名")

（3）根据类名获取元素。

语法：

对象 = document.getElementsByClassName("类名")

四、操作元素内容

1、innerText 和 innerHTML

使用innerText 或 innerHTML，可以获取和修改元素对象内容。

获取：对象.innerText 或 对象.innerHTML

修改：对象.innerText = 值或对象.innerHTML = 值

2、二者的区别

innerText 获取文本，显示纯文本，不解析 HTML 标签，会把标签当成普通文本显示。

innerHTML 会解析 HTML 标签，把内容渲染成对应的元素。

例如：

<!--部分代码-->
<body>
    <div>我是一个div</div>
    <script>
        // 获取元素
        const div1 = document.querySelect("div");
        // 获取元素内容
        console.log(div1.innerText);
        // 修改元素内容
        // innerText  获取纯文本
        div1.innerText = "<strong>我是第一个div</strong>";
        // innerHTML 获取文本和解释标签
        // 给新内容字体加粗
        div1.innerHTML = "<strong>我是第一个div</strong>"
    </script>
</body>

innerText 显示的样式：
在这里插入图片描述

innerHTML 显示的样式：
在这里插入图片描述

相同的内容二者的呈现样式不一样。在纠结二者用哪个时，推荐使用innerHTML。

五、操作元素属性

1、操作元素常用属性

如：href、title、src等。

语法：

对象.属性 = 值
对象有这个属性就修改，没有这个属性就增加。

例如：

<!--部分代码-->
<body>
    <img src="../imgs/1.png">
    <script>
        // 获取元素
        const imgs = document.querySelector("img");
        // 修改 src属性 换成另一张图片 2.png
        imgs.src = "../imgs/2.png";
        // 增加 title属性 
        imgs.title = "武汉大学";
    </script>
</body>

2、操作元素样式属性

（1）通过 style 属性操作 css

任何标签都有style属性，通过style属性可以动态更改页面标签的样式。

语法：

对象.style.样式属性 = "值"

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: deeppink;
        }
    </style>
</head>
<body>
    <div class="box"></div>
    <script>
        // 获取元素
        const box = document.querySelector(".box");
        // 修改宽度 注意：这里是字符串，宽度有单位 px
        box.style.width="300px";
        // 修改背景颜色
        box.style.backgroundColor="hotpink";
        // 加边框
        box.style.border="2px solid black";
        // 上边框改成蓝色
        box.style.borderTop="2px solid blue";
    </script>
</body>
</html>

注意：如果 css 属性中包含连接符-时，需要转换成小驼峰命名法，要将-去掉并将其后面的第一个字母改成大写，如background-color要写成backgroundColor；赋值时不要忘记加 css 单位，大部分数字后面都需要加单位（如宽度和高度的单位 px）。

（2）操作类名（className）操作 css

如果修改的样式比较多，直接通过style属性修改比较繁琐，我们可以通过借助于 css 类名的形式。

语法：

对象 = document.className("css类名")

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
        .nav {
            color: red;
        }
        .box{
            width: 300px;
            height: 300px;
            background-color: skyblue;
            margin: 100px auto;
            padding: 10px;
            border:1px solid black;
        }
    </style>
</head>
<body>
    <div class="nav">123</div>
    <script>
        // 需求：给div 添加一个 .box 类
        // 获取元素
        const div1 = document.querySelector("div");
        // 添加类名  属性新值换旧值
        div1.className="box";
        // 保留原来的类
        div1.className="nav box"
    </script>
</body>
</html>

className是使用新值换旧值，会覆盖以前的类名。如果想保留原来的类和添加新类，则在旧类名后空格添加新类名。

（3）通过classList操作类控制css

为了解决 className 容易覆盖以前的类名的问题，使用 classList 方式追加和删除类名。

语法：

追加：元素.classList.add("类名")；
删除：元素.classList.remove("类名")；
切换：元素.classList.toggle("类名")

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            color: black;
        }
        .active{
            color:red;
            background-color: skyblue;
        }
    </style>
</head>
<body>
<div class="box active">强化学习</div>
    <script>
        const box = document.querySelector(".box");
        // 添加 追加 add()
        // box.classList.add("active");
        // 删除 remove()
        // box.classList.remove("box"); 
        // 切换类 toggle()  有就删除这个类，没有就加上这个类
        box.classList.toggle("active");

    </script>
</body>
</html>

3、操作表单元素属性

（1）表单很多情况，也需要修改属性。比如在输入密码时，点击眼睛，可以看到密码，本质是把表单类型转换成文本框。

语法：

获取：对象 . 属性名
设置：对象 . 属性名 = 新值

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
	<input type="text" value="电脑">
    <button>点击</button>
    <script>
        const uname = document.querySelector("input");
        // 获取表单的值用 value
        console.log(uname.value);
        uname.value = "我要买电脑";
        // 修改属性变成 密码
        uname.type = "password";
    </script>
</body>
</html>

（2）表单属性中添加就有效果，移除就没有效果，一律使用布尔值表示，如果为 true 代表添加了该属性，如果是 false 代表移除了该属性。如：disable、checked、selected
例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="checkbox" name="">
    <button>点击</button>
    <script>
        const ipt = document.querySelector("input");
        // 勾选框  checked 默认 false
        ipt.checked = true
        const btn = document.querySelector("button");
        // 禁用按钮  disabled 默认 false
        btn.disabled = true;
    </script>
</body>
</html>

4、自定义属性

在 HTML 中分为标准属性和自定义属性。标准属性是标签自带的属性，如class、id、title等。自定义属性在 HTML5 中推出专门的 data-自定义属性，在标签上使用 data- 开头，在 DOM 对象上以 dataset 对象方式获取。

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--自定义属性以 data- 开头-->
    <div data-id="1" data-spm="nav">1</div>
    <div data-id="2">2</div>
    <div data-id="3">3</div>
    <div data-id="4">4</div>
    <div data-id="5">5</div>
    <script>
        const one = document.querySelector("div");
        // 获取 data- 自定义属性  dataset 获取全部的自定义属性
        console.log(one.dataset);
        // 获取第一个自定义属性 值
        console.log(one.dataset.id) // 1
        console.log(one.dataset.spm) // nav
    </script>
</body>
</html>