【Java Web学习 | 第12篇】JavaScript(6)DOM - 详解

个人主页: Hygge_Code

热门专栏:从0开始学习Java | Linux学习| 计算机网络

个人格言: “既然选择了远方，便不顾风雨兼程”

文章目录

• DOM操作
• • 什么是DOM？
  • 获取DOM对象的方法
  • • 1. 根据CSS选择器获取
    • 2. 其他常用获取方法
  • 修改元素内容
  • • 1. innerText属性
    • 2. innerHTML属性
  • 修改元素属性
  • • 1. 操作元素常用属性
    • 2. 操作元素样式属性
    • • （1）通过style属性操作CSS
      • （2）通过className操作CSS
      • （3）通过classList操作类控制CSS
    • 3. 操作表单属性
    • 4. 自定义属性
  • 定时器-间歇函数
  • • 1. 开启定时器
    • 2. 关闭定时器
  • 总结

DOM操作

什么是DOM？

DOM（Document Object Model，文档对象模型）是浏览器提供的一套专门用来操作网页内容的功能，它允许我们开发网页内容特效和实现用户交互。DOM的核心思想是把网页内容当作对象来处理，而document对象则是网页中最大的对象，所有网页内容都包含在document里面。

DOM树将HTML文档以树状结构直观地表现出来，体现了标签与标签之间的关系。浏览器会根据HTML标签生成对应的JS对象（DOM对象），这些对象包含了标签的所有属性，修改这些对象的属性会自动映射到对应的标签上。

获取DOM对象的方法

获取DOM对象是进行DOM操作的第一步，以下是常用的获取方法：

1. 根据CSS选择器获取

• 获取匹配的第一个元素

  // 语法：document.querySelector("CSS选择器")
  const box = document.querySelector(".box1");
  const nav = document.querySelector("#nav");
  const firstLi = document.querySelector(".ull li:first-child");

• 获取匹配的多个元素

  // 语法：document.querySelectorAll("CSS选择器")
  const lis = document.querySelectorAll(".ull li");
  // 返回的是伪数组，需要遍历获取每个元素
  for (let i = 0; i < lis.length; i++) {
  console.log(lis[i]);
  }

2. 其他常用获取方法

• 根据id获取

  const element = document.getElementById("id");

• 根据标签名获取

  const elements = document.getElementsByTagName("tagName");

• 根据类名获取

  const elements = document.getElementsByClassName("className");

修改元素内容

要修改标签元素里面的内容，主要有两种方式：

1. innerText属性

innerText属性用于将文本添加或更新到任意标签位置，只显示纯文本，不解析HTML标签。

const change1 = document.querySelector(".change1");
console.log(change1.innerText); // 获取文字内容
change1.innerText = "<strong>成功完成了文字内容的修改1</strong>";
// 结果会显示完整的字符串，不会解析<strong>标签

2. innerHTML属性

innerHTML属性同样用于将文本添加或更新到任意标签位置，但会解析HTML标签，多标签时建议使用模板字符串。

const change2 = document.querySelector(".change2");
change2.innerHTML = "<strong>成功完成了文字内容的修改2</strong>";
// 结果会显示加粗的文字，<strong>标签会被解析

修改元素属性

1. 操作元素常用属性

如href、title、src等属性，可以直接通过点语法操作：

const img = document.querySelector(".img1");
img.src = "../HTML+CSS学习/picture/巫8.jpg"; // 修改已有属性
img.title = "除却巫山不是云"; // 添加新属性

2. 操作元素样式属性

（1）通过style属性操作CSS

const div1 = document.querySelector(".div1");
div1.style.width = "300px";
// 注意：有-连接符的属性需要转换为小驼峰命名法
div1.style.backgroundColor = "blue";
div1.style.border = "2px solid red";

（2）通过className操作CSS

当需要修改的样式较多时，使用className可以简化操作：

const div2 = document.querySelector(".div2");
// 注意：会覆盖原有类名，如需保留需一并写入
div2.className = "div2 div2Change";

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

classList提供了更灵活的类操作方式，不会覆盖原有类名：

const div3 = document.querySelector(".div3");
div3.classList.add("active"); // 追加类
div3.classList.remove("div3"); // 删除类
div3.classList.toggle("active"); // 切换类（有则删，无则加）

3. 操作表单属性

表单元素有一些特殊属性需要注意：

const input = document.querySelector("input");
// 获取表单值用value属性，而不是innerText
console.log(input.value);
input.value = "新值"; // 修改表单值
input.type = "password"; // 改变输入框类型
// 布尔值属性（如checked、disabled）
const checkbox = document.querySelector("#checkbox1");
checkbox.checked = true; // 选中复选框
checkbox.disabled = true; // 禁用复选框

4. 自定义属性

HTML5推出了专门的data-*自定义属性，其中 dataset 是 DOM 元素自带的一个属性，它是一个对象，专门用来存储当前元素上所有 data-* 自定义属性的键值对

<div data-id="1" data-spm="不知道" class="div11">1</div>

const customDiv = document.querySelector(".div11");
console.log(customDiv.dataset); // 所有data-*属性的集合
console.log(customDiv.dataset.id); // 获取data-id的值
console.log(customDiv.dataset.spm); // 获取data-spm的值

定时器-间歇函数

定时器用于每隔一段时间自动执行一段代码，如实现倒计时等功能。

1. 开启定时器

// 语法：setInterval(函数, 间隔时间)
// 匿名函数形式
let timeId1 = setInterval(function() {
console.log("林七夜");
}, 1000);
// 命名函数形式
function fn() {
console.log("一秒执行一次");
}
let timeId2 = setInterval(fn, 1000); // 注意函数名不加括号

2. 关闭定时器

// 语法：clearInterval(定时器ID)
clearInterval(timeId1);

总结

DOM操作是前端开发的核心技能之一，通过本文介绍的方法，我们可以：

1. 灵活获取各种DOM元素
2. 修改元素内容和属性
3. 操作元素样式
4. 处理表单元素
5. 使用定时器实现周期性操作

---

如果我的内容对你有帮助，请 点赞 ， 评论 ， 收藏 。创作不易，大家的支持就是我坚持下去的动力！