JS之DOM

别那么晚睡哦
0 阅读7分钟

JS之DOM

DOM

首先我们来了解一下啥是DOM

DOM (Document Object Model) 译为文档对象模型，是 HTML 和 XML 文档的编程接口。

HTML DOM 定义了访问和操作 HTML 文档的标准方法。

DOM 以树结构表达 HTML 文档。

HTML DOM 树形结构:

DOM HTML tree

现在这个表你可能会看的莫名其妙的 现在我还是举个例子给你们看吧 假设我们有这样一段 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>我的页面</title>
</head>
<body>
    <h1 id="title">Hello World</h1>
    <p class="content">这是一个段落</p>
</body>
</html>

浏览器解析后，会生成一棵树：

document（根节点）
  └── html
       ├── head
       │    └── title
       │         └── "我的页面"（文本节点）
       └── body
            ├── h1（id="title"）
            │    └── "Hello World"（文本节点）
            └── p（class="content"）
                 └── "这是一个段落"（文本节点）

现在这样子解释你应该明白了吧 而JS就可以通过DOM来访问这棵树的任意节点，并且修改他们，稍后我们就会讲js是如何通过DOM来修改节点的

补充

这里解释一下console.log的用处 console.log() 是 JavaScript 在控制台输出信息（在页面中按F12 或者 右键点击检查 都可以打开控制台）的方法，是开发中最常用的调试工具。 就相当于 linux 的 echo 语句 相当于 c 语言 跟 java 语言 中的 printf

let name = "张三";
console.log(name);  // 控制台会输出：张三

DOM核心概念：document 对象

在浏览器中，document 是 DOM 树的根节点，也是我们操作网页的入口。 你可以在上图的树示例图中看到 document是根节点 包含着整一个文档对象也就是当前的页面

console.log(document);           // 输出整个文档对象
console.log(document.title);     // 获取页面标题
document.title = "新标题";        // 修改页面标题

接下来我们开始讲解如何获取并且操作 DOM 元素

  • 获取 DOM 元素（查）

​ 1.根据 ID获取

​ 这里介绍的方法就是document.getElementById这个方法 这是最准确的方法

<!DOCTYPE html>
<html>
<head>
    <title>我的页面</title>
</head>
<body>
    <h1 id="title">Hello World</h1>
    <p class="content">这是一个段落</p>
</body>
</html>

//这里的title其实就是获取到了 id 名为 title 的 document 的 <h1 id="title">Hello World</h1> 文本节点
const title = document.getElementById("title");
console.log(title);  //那么在控制台输出的就是： <h1 id="title">Hello World</h1>

​ 2.根据 CSS 选择器获取 ​ 这里介绍的方法就是 document.querySelector() 这个方法 ​ 还是通过一个例子来解释

// 获取第一个匹配的元素
const h1 = document.querySelector("#title");      // 通过 ID
const p = document.querySelector(".content");     // 通过 class 
//看见了规律了吗 ID就是前缀是# 而class的前缀就是.

// 获取所有匹配的元素（返回 NodeList）
//有人就要问了 涛哥涛哥 啥玩意是 NodeList 其实就是节点列表 一个包含多个 DOM 节点的类数组对象。
const allParagraphs = document.querySelectorAll("p");//这里如果你有很多个以类为class的标签 那么他就会全部获取到
console.log(allParagraphs.length);  // 段落数量

​ 3.根据标签名或 class 获取

// 根据标签名
const allDivs = document.getElementsByTagName("h1");

// 根据 class 名
const items = document.getElementsByClassName("content");

  • 操作 DOM 元素（增、删、改）

​ 1.修改内容

​ 这里介绍两种方法 分别是 textContent 和 innerHTML ​ 现在说一下这两个的特点 ​ textContent：只改文本，安全 ​ innerHTML：解析HTML标签，但可能被注入恶意脚本

​ 现在还是通过代码解析这两个的作用

const title = document.getElementById("title");

// 修改文本内容（推荐）
title.textContent = "新标题";
//看见了吗 这里的textContent就只是把文本修改了

// 修改 HTML 内容（慎用，有 XSS 风险）
title.innerHTML = "<span>带标签的标题</span>";
//但是这个就不一样 这个方法是通过解析html标签来修改 也就是说可以修改该文本结点的标签 太阴了 不推荐使用

​ 2.修改属性

​ 这里介绍的方法是 getAttribute 和 setAttribute 以及简便写法

const link = document.querySelector("a");//注意我在这里通过css选择器获取到了一个<a>标签 不知道你们还记不记得 <a>标签是一个超链接标签 也就是含有 href 属性（也就是跳转的网页地址） 不记得的人给我滚回去重学

// 获取/设置属性 其实这里你完全可以通过见文知意来看 get就是获取 set就是设置
link.getAttribute("href");        // 获取
link.setAttribute("href", "https://example.com");  // 设置

// 直接操作属性（更常用） 这里就是更加简单的 就相当于java中直接操作这个对象的属性 现在应该好理解一点了吧
link.href = "https://example.com";
link.id = "newId";

​ 3.修改样式

​ 这里其实跟上面差不多 我依旧举一个例子给你们你们一下子就明白了

const box = document.querySelector(".box"); //我在这里获取了以css类名为box的标签

// 直接修改 style 属性 看见了吗直接通过style属性的属性来进行修改
//现在 css 不记得的人也给我滚回去重学
box.style.backgroundColor = "red";
box.style.fontSize = "20px";

// 添加/移除 CSS 类（推荐） 直接使用add remove toggle来修改
box.classList.add("active");
box.classList.remove("hidden");
box.classList.toggle("visible");   // 有则删，无则加 这个会弄混 请你记住

​ 4.创建和添加新元素

​ 这里就有点意思了 你可以通过 js 来使用DOM来直接创造一个标签语句 ​ 直接上代码！！！

// 创建新元素 注意一下这些方法
const newDiv = document.createElement("div");
newDiv.textContent = "我是新来的";
newDiv.classList.add("new-item");

// 添加到 body 末尾
document.body.appendChild(newDiv);

// 添加到指定元素内部
const container = document.querySelector(".container");
container.appendChild(newDiv);

// 插入到指定元素前面
const reference = document.querySelector(".reference");
container.insertBefore(newDiv, reference);
//我相信你按着顺序理解一定可以弄懂的！！！

​ 5.删除元素

​ 这里就是十分简短的语句 remove

const element = document.querySelector(".to-remove");
element.remove();  // 直接删除（现代方法）

// 传统方法
element.parentNode.removeChild(element);
  • 事件处理（可交互性）

​ DOM 的核心能力之一是响应用户操作，这就是事件。相信如果你们自己学过比如Java GUI的就可以更快的理解 其实就是监听器 比 如鼠标监听器

​ 1.添加事件监听

const button = document.querySelector("#myButton");
//这里就是对按钮添加了一个监听器

// 方式一：addEventListener（推荐）
button.addEventListener("click", function() {
    alert("按钮被点击了！");
});

// 方式二：onclick 属性（不推荐，只能绑定一个）
button.onclick = function() {
    console.log("点击");
};

​ 2.常用事件类型

​ 你们用屁股想也可以想到 一个页面会发生无数的事件 比如鼠标滑动 点击按钮 鼠标静止不动 太多太多了 所以我也不要求你们全都会 ​ 只需要你需要使用的时候去查到需要使用哪一些东西就可以了 现在我把常用的事件类型贴出来 你们自己研究

事件触发时机
click点击元素
mouseenter鼠标进入元素
mouseleave鼠标离开元素
keydown按下键盘按键
submit表单提交
load页面或资源加载完成
input输入框内容变化

​

  • DOM 操作的核心原则

原则说明
先获取，再操作所有操作都需要先拿到元素引用
优先用 querySelector最灵活，CSS 选择器语法
文本操作用 textContent比 innerHTML 安全
样式类优先于直接改 style用 classList 维护样式，逻辑更清晰
事件委托动态添加的元素，事件监听挂到父元素上

你们就按照这个顺序去想逻辑 就能十分好的记住整一套流程

注意

有同学已经听说过 Vue React框架 或许有人会说 我以后直接学 Vue React 框架就行了 我干嘛还要学 js 原生 DOM 啊？ 其实并不能这样子想 因为其实你仔细想想这两种主流的框架到底干了些啥 其实就是帮我们更加高效，更加声明式地使用 DOM 举个例子

// 原生 DOM 操作
const div = document.createElement("div");
div.textContent = "Hello";
div.classList.add("box");
document.body.appendChild(div);

// Vue 的写法（封装了上述过程）
<div class="box">{{ message }}</div>

// React 的写法
<div className="box">{message}</div>

Vue 和 React 都提出"虚拟 DOM"的概念，但它的存在是为了更高效地更新真实 DOM。

  • 虚拟 DOM 是 JS 对象，用来描述真实 DOM 结构
  • 最终还是要通过 DOM API 去操作真实 DOM

如果你连真实 DOM 都不了解，理解虚拟 DOM 就像没学过加法直接学乘法——能背公式，但不理解原理

完结撒花

好了 js 的学习就到这 我后面会写一份TS的文档

祝大家生活愉快 学啥啥都会！！！

avatar
文章
阅读
粉丝