操作dom
Administrator Administrator 0 评论 Web前端 3 阅读

操作dom

_

一，声明变量const优先

const 优先，尽量使用 const，原因是:

  • const 语义化更好
  • 很多变量我们声明的时候就知道他不会被更改了，那为什么不用 const呢?
  • 实际开发中也是，比如react框架，基本const
  • 涉及基本数据类型的可以用let，例如循环里面
  • 涉及引用数据类型的一定能够要用const

二，Web API基本认知

2.1 作用和分类

  • 作用: 就是使用 JS 去操作 html 和浏览器
  • 分类：DOM(文档对象模型)、BOM(浏览器对象模型)

2.2 什么是DOM

  • DOM(Document Object Model--文档对象模型) 是用来呈现以及与任意 HTML 或 XML 文档交互的 API

  • 白话文：DOM 是浏览器提供的一套专门用来 操作网页内容 的功能

  • DOM 作用：

    • 开发网页内容特效和实现用户交互

2953321-20240913101427481-507886314.png

2.3 DOM树

  • DOM 树是什么

    • 将 HTML 文档以树状结构直观的表现出来，我们称之为文档树或 DOM 树
    • 描述网页内容关系的名词
    • 作用：文档树直观的体现了标签与标签之间的关系

2953321-20240913101427422-867348804.png

2.4 DOM对象

  • DOM 对象：浏览器根据 html 标签生成的JS 对象

    • 所有的标签属性都可以在这个对象上面找到
    • 修改这个对象的属性会自动映射到标签身上

  • DOM 的核心思想

    • 把网页内容当做对象来处理

  • document 对象

    • 是 DOM 里提供的一个对象

    • 所以它提供的属性和方法都是用来访问和操作网页内容的

      • 例：document.write()

  • 网页所有内容都在 document 里面

三，获取DOM对象

3.1 根据CSS选择器来获取DOM元素

  1. 选择匹配的第一个元素

    语法：

    document.querySelector('css选择器')

    参数：包含一共或多个有效的 CSS 选择器字符串

    返回值：CSS 选择器匹配的第一个元素, 一个 HTMLElement 对象。没匹配到就返回 null

  2. 选择匹配多个元素

    语法

    document.querySelectorAll('css选择器')

    参数：包含一共或多个有效的 CSS 选择器字符串

    返回值：CSS 选择器匹配的NodeList 对象集合

    得到的是一个伪数组

    • 有长度有索引号的数组
    • 但是没有 pop()push()等数组方法
    • 想要得到里面的每一个对象，则需要遍历(for)的方式获得，

3.2 其他获取DOM元素方法

//根据id获取一个元素
document.getElementById('nav')
//根据标签获取一类元素，获取页面所有div
document.getElementsByTagName('div')
//根据类名获取元素，获取页面所有类名为w的元素
document.getElementsByClassName('w')

一般不会使用这种方法

四，操作元素内容

目标：能够修改元素的文本更换内容

  • DOM对象都是根据标签生成的,所以操作标签,本质上就是操作DOM对象。
  • 就是操作对象使用的点语法，
  • 如果想要修改标签元素的里面的内容，则可以使用如下几种方式
    • 对象.innerText 属性
    • 对象.innerHTML属性

4.1 innerText

元素.innerText属性

  • 将文本内容添加/更新到任意标签位置
  • 显示纯文本，不解析标签
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="d1">测试1</div>
    <div id="d2">测试2</div>
    <div id="d3">测试3</div>

    <script>
      const div1 = document.querySelector("#d1");
      div1.innerText = "新文字内容";
    </script>
  </body>
</html>

4.2 innerHTML

元素.innerHTML属性

  • 文本内容添加/更新到任意标签位置
  • 会解析标签，多标签建议使用模板字符
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <title>Document</title>
  </head>
  <body>
    <div id="d1">测试1</div>
    <div id="d2">测试2</div>
    <div id="d3">测试3</div>

    <script>
      const div1 = document.querySelector("#d1");
      div1.innerHTML = "<h1>html</h1>";
    </script>
  </body>
</html>

五，操作元素属性

5.1 操作元素常用属性

  • 还可以通过 JS 设置 / 修改标签元素属性，比如通过 src 更换 图片

  • 最常见的属性比如:href、title、src 等

  • 语法:

    对象.属性 = 值

  • 举例

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <title>Document</title>
  </head>
  <body>
    <img src="./img/1.png" alt="" />

    <script>
      const img=document.querySelector('img');
      img.src='./img/2.png';
      img.title='标题';
    </script>
      
  </body>
</html>

5.2 操作元素样式属性

  • 可以通过 JS 设置 / 修改标签元素的样式属性，

    • 比如通过 轮播图小圆点自动更换颜色样式
    • 点击按钮可以滚动图片，这是移动的图片的位置left 等等

  • 用法：

    1. 通过 style 属性操作 CSS

      对象.style.样式属性 = 值

      举例

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <title>Document</title>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }
     </style>
  </head>
  <body>
	<div class="box">
        
    </div>
	
    <script>
        //1.获取元素
        const box = document.querySelector('.box');
        //2.修改样式属性
        box.style.width='300px'
        box.style.backgroundColor= 'red'
    </script>
      
  </body>
</html>

    2. 操作类名 (className) 操作 CSS

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

      语法：

      //active 也是一共css类名
元素.className = 'active'

      举例：

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
        background-color: red;
      }
      .active {
        width: 200px;
        height: 200px;
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="box">1</div>

    <script>
      const div1 = document.querySelector("div");
      div1.className = "active";
    </script>
  </body>
</html>

      注意：

      1. 由于class是关键字，故需要用className去替代
      2. className是使用新值替换旧值，如果需要添加一个类，需要保留之前的类名

    3. 通过 classList 操作类控制 CSS

      为了解决 className 容易覆盖以前的类名，我们可以通过 classList 方式追加和删除类名

      语法

      //追加一个类
元素.classList.add('类名')
//删除一个类
元素.classList.remove('类名')
//切换一个类(有这个类就切换，没有这个类就添加上她)
元素.classList.toggle('类名')

      举例

      <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <title>Document</title>
    <style>
      .box {
        width: 100px;
        height: 100px;
      }
      .active {
        background-color: black;
      }
    </style>
  </head>
  <body>
    <div class="box">1</div>

    <script>
      const div1 = document.querySelector("div");
      //添加
      div1.classList.add("active");
      //删除
      div1.classList.remove("active");
      //切换
      div1.classList.toggle("active");
    </script>
  </body>
</html>

5.3 操作表单元素属性

  • 表单很多情况，也需要修改属性，比如点击眼睛，可以看到密码，本质是把表单类型转换为文本框。

  • 正常的有属性有取值的 跟其他的标签属性没有任何区别

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

  • 语法

    表单对象.value = '用户名'
表单对象.type = 'password'

  • 举例

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" value="电脑" />

    <script>
      //1.获取对象
      const uname = document.querySelector("input");
      //2.获取值，获取表单里面的值用 表单.value
      console.log(uname.value);
      //innerHTML得不到表单的内容，返回的是空
      console.log(uname.innerHTML);
      //3.设置值，设置表单里面的值用 表单.value = 值
      uname.value = "手机";
      //4.获取属性，获取表单里面的属性用 表单.属性名
      console.log(uname.type);
      uname.type = "password";
    </script>
  </body>
</html>

  • 表单属性中添加就有效果，移除就没有效果, 一律使用布尔值表示 如果为 true 代表添加了该属性 如果是 false 代表移除了该属性

    比如：disabled、checked、selected

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <title>Document</title>
  </head>
  <body>
    <input type="checkbox" value="电脑" />

    <script>
      //1.获取对象
      const uname = document.querySelector("input");
      //2.获取值，获取表单里面的值用 表单.value
      uname.checked = true;
    </script>
  </body>
</html>

5.4 自定义属性

  • 标准属性：标签天生自带的属性 比如 class id title 等, 可以直接使用点语法操作比如: disabled、checked、selected

  • 自定义属性：

    • 在html5中推出来了专门的data-自定义属性
    • 在标签上一律以data-开头
    • 在DOM对象上一律以dataset对象方式获取

  • 举例

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="./css/bootstrap.min.css" />
    <title>Document</title>
  </head>
  <body>
    <div class="box" data-id="10">盒子</div>

    <script>
      //1.获取对象
      const box = document.querySelector(".box");
      //获取自定义属性
      const id = box.dataset.id;
      console.log(id);
    </script>
  </body>
</html>

六，定时器-间歇函数

网页中经常会需要一种功能：** 每隔一段时间需要自动执行一段代码，** 不需要我们手动去触发，例如：网页中的倒计时，要实现这种需求，需要定时器函数。

  1. 开启定时器

    setInterval(函数,时间间隔);

    举例

    function fn(){
    console.log(1);
}
//写法1
let id1 = setInterval(fn, 1000);
//写法2
let id2 = setInterval(function(){
	console.log(1);
}, 1000);
//写法3
let id2 = setInterval(()=>{
	console.log(1);
}, 1000);

    注意：

    1. 函数名不需要加括号
    2. 定时器返回的是一个id数字

  2. 关闭定时器

    let 变量名=setInterval(函数,时间间隔);
clearInterval(变量名)
文章标签
#Web前端#JavaScript
许可协议
本文采用 署名-非商业性使用-相同方式共享 4.0 国际 许可协议，转载请注明出处。
JS基础 2026-06-09
事件 2026-06-09

© 2026 苏叶的belog