js 之 DOM对象

一、概述：DOM是js操作网页的接口，全称为“文档对象模型”，它的作用是将网页转换成一个js对象，从而可以用js脚本进行
各种操作，例如增删内容

节点：
浏览器会根据DOM模型，将结构化模型HTML解析成一系列节点，节点是DOM的最小组成单位
其实就是html中的标签或者叫元素，在js中就叫节点，有一系列方法可以获取节点，然后对节点进行操作

节点类型：节点有以下七种类型
Document：整个文档树的顶层节点
DocumentType：doctype标签
Element：网页的各种HTML标签
......


Node.NodeType属性
不同节点的nodeType属性和对应的常量如下：
文档节点（document）：9，对应常量 Node.DOCUMENT_NODE
元素节点（element）：1，对应常量 Node.ELEMENT_NODE
......



二、document对象方法，获取元素
1、getElementsByTagName('标签名')
2、getElementsByClassName('类名')。 # ，注意，类名不带点，和querySelector不一样，用于根据类名获取元素。它返回一个实时的 HTMLCollection，这是一个类数组的对象
3、getElementsByName.  该方法用于选择拥有name属性的HTML元素，例如form，img, radio 等
4、getElementById('idName').   返回的是单个元素
5、querySelector('css选择器')。   返回的是匹配成功的第一个元素
6、querySelectorAll('.MinImg')。  用于查找符合指定 CSS 选择器的所有元素 的方法，返回一个包含所有匹配元素的 类数组对象（NodeList），例如用于 查找符合指定 CSS 选择器的所有元素 的方法，返回一个包含所有匹配元素的 类数组对象（NodeList）


三、document对象方法，创建元素
document.createElement(). 创建元素
document.createTextNode().  创建文本
document.createAttribute(). 创建属性，了解即可
这里要注意，属性本身也是和元素，文本平级的，dom中的一种节点类型，是一种特殊类型的节点，比如：
// 创建一个属性节点（独立存在）
const attr = document.createAttribute('data-id');
attr.value = '123';

// 这个属性节点可以被多个元素使用
const div1 = document.createElement('div');
const div2 = document.createElement('div');

div1.setAttributeNode(attr.cloneNode());  // 需要克隆
div2.setAttributeNode(attr.cloneNode());

这是历史遗留问题，现在基本已经不用了，都用元素去操作属性了

扩展：
// 不同类型的节点
const elementNode = document.createElement('div');     // 元素节点
const textNode = document.createTextNode('Hello');    // 文本节点
const attrNode = document.createAttribute('id');      // 属性节点
const commentNode = document.createComment('note');   // 注释节点

console.log(elementNode.nodeType);  // 1 (ELEMENT_NODE)
console.log(textNode.nodeType);     // 3 (TEXT_NODE)
console.log(attrNode.nodeType);     // 2 (ATTRIBUTE_NODE)
console.log(commentNode.nodeType);  // 8 (COMMENT_NODE)



四、Element对象的属性和方法总结
4.1、元素标识类的，id + setAttribute/getAttribute
1、Element.id
专门读写元素的 id 属性（最常用、最简洁），等价于 getAttribute('id')/setAttribute('id', 'xxx')

2、setAttribute/getAttribute：通用方法，可读写元素的任意原生属性（
如 id、src、href、type 等），是 “兜底方案”。
比如 <img src="test.jpg">：img.getAttribute('src') → 获取图片地址；
但优先用专属属性（如 id、src），更简洁，setAttribute 多用于操作无专属属性的原生属性（
如 data-* 之外的自定义属性）。


4.2、样式 / 类名操作：className vs classList vs style
这三个是 “操作样式的不同层级”，核心区别是「操作整类名」vs「操作单个类名」vs「操作内联样式」：
1、Element.className：读写元素的 class 属性（字符串形式），这个是传统操作类名的方式，现在一般都用
classList了
eg:
const div = document.querySelector('div');
div.className = 'box red'; // 覆盖所有类名，设为box+red
div.className += ' big'; // 追加big类（需手动加空格，易漏）

2、Element.classList：className 的升级版（ES6+），是「DOMTokenList」对象，
提供 add/remove/toggle/contains/replace等 方法，精准操作单个类名（不影响其他类），现在几乎完全替代 className。
div.classList.add('big'); // 追加big类（无需管空格），可以同时添加多个类名，用逗号分隔('big', 'small')
div.classList.remove('red'); // 移除red类
div.classList.toggle('active'); // 有则删，无则加（常用在切换状态）
div.classList.contains('box'); // 判断是否有box类（返回布尔值）
div.classList.replace('old-class', 'new-class');   //替换类名

3、Element.style：操作元素的内联样式（直接写在 style 属性里的样式），优先级高于 CSS，适合动态改单个样式。
div.style.color = 'red'; // 设内联样式 color: red;
div.style.fontSize = '16px'; // 注意：CSS属性名转驼峰（font-size → fontSize）


4.3、内容操作：innerHTML vs innerText vs textContent
三者都用于读写元素内容，但 “是否解析 HTML” “是否受样式影响” 是核心区别：
属性	      是否解析HTML	是否受CSS样式影响	          换行/空格处理	              常用场景
innerHTML	  ✅ 是	      ❌ 不受	                保留HTML结构的换行           插入 / 读取带标签的内容
innerText	  ❌ 否	      ✅ 受（隐藏内容不显示）	   按视觉效果换行	            读取 / 设置 “可见的文本”
textContent	❌ 否	      ❌ 不受（隐藏内容也能读取）	保留原始换行、空格	        读取 / 设置纯文本（推荐）

示例：
<div id="test" style="display: none;">
  <p>Hello <b>World</b></p>
</div>

const div = document.getElementById('test');
console.log(div.innerHTML); // "<p>Hello <b>World</b></p>"（保留标签）
console.log(div.innerText); // ""（元素隐藏，无可见文本）
console.log(div.textContent); // "Hello World"（纯文本，忽略标签和隐藏）

4.4、表单元素专属：value + disabled
仅对「表单元素」生效（input、select、textarea、button 等）：
1、Element.value：读写表单元素的 “值”，是表单操作的核心属性。
const input = document.querySelector('input[type="text"]');
console.log(input.value); // 获取输入框内容
input.value = '默认值'; // 设置输入框内容
const select = document.querySelector('select');
console.log(select.value); // 获取下拉框选中的值

2、Element.disabled：设置元素的 “禁用状态”（布尔值），true 禁用，false 启用
const btn = document.querySelector('button');
btn.disabled = true; // 禁用按钮（变灰，不可点击）
btn.disabled = false; // 启用按钮


4.5、自定义数据存储：dataset
专门操作元素的 data-* 自定义属性（如 data-id、data-name），无需用 getAttribute，更简洁：
<div id="user" data-id="123" data-name="张三"></div>
const user = document.getElementById('user');
console.log(user.dataset.id); // "123"（自动去掉data-，转驼峰：data-user-name → dataset.userName）
console.log(user.dataset.name); // "张三"
user.dataset.age = '20'; // 新增 data-age="20" 属性
delete user.dataset.name; // 删除 data-name 属性


4.6、元素查找：querySelector vs closest
都是 “精准查找元素”，但查找方向相反
1、Element.querySelector：在当前元素的「子元素」中，查找第一个匹配 CSS 选择器的元素
（和全局 document.querySelector 逻辑一致，只是范围缩小到当前元素）。

2、Element.closest：在当前元素的「祖先元素」（包括自身）中，
查找最近的匹配 CSS 选择器的元素（常用在事件委托、找父容器）。
const child = document.querySelector('.child');
const parent = child.closest('.parent'); // 找child的最近祖先.parent（包括自身）
const div = child.closest('div'); // 找最近的div祖先


4.7、事件处理：addEventListener
详情请见我另一篇博客：https://i.cnblogs.com/posts/edit-done;postId=19336424;isPublished=true