一、DOM 基础概念
（1）DOM 定义：文档对象模型（Document Object Model）
作为一系列极具实用价值的编程接口，赋予了开发者改变网页内容、调整页面结构以及修饰样式的能力。在 DOM 的体系架构里，网页文档由document精准指代，页面元素对应着element，而像标签、属性、文本、注释等构成网页的基础单元统统被抽象为node，它们均以对象的形式存在，彼此关联协作，共同勾勒出网页的数字化蓝图。
DOM就是提供接口，文档对象模型（Document Object Model），方便开发者改变网页内容。
文档：一个页面就是一个文档，用document表示
元素：标签就是元素，用element表示
节点：网页所有内容都是节点，用node表示
（2）DOM 树结构：
DOM 树结构：以<html>作为根基性的起始元素，其下延展包含<head>以及<body>等关键性子元素,网页中的每一处细节、每一个片段，无论其多么微小或是繁杂，在 DOM 树这一精巧结构中都能找到与之精准对应的节点，这些节点依据层级与逻辑关系有序排列，恰似一棵枝繁叶茂的大树，撑起了整个网页的运行架构。
二、事件处理
（1）事件
用户与浏览器的交互行为，如点击按钮、鼠标移动、关闭窗口
（2）事件处理方式：
1.在标签里设置js代码
在标签里设置js代码，事件触发后会被执行，但缺点很明显，结构与行为耦合，不方便后期维护，不推荐使用
<button οnclick="alert('哈喽');">
2.绑定处理函数
为事件绑定处理函数的形式来响应事件，事件发生后，对应的函数将被调用
第一步：获取对象，事件源
第二步：为事件绑定事件处理函数(响应函数)
例如：
首先，需要精准地获取目标按钮对象，就像通过var btn = document.getElementById("btn");这样的代码语句，利用元素的独特 id 标识将其从 DOM 树中精准 “抓取” 出来。
然后，为该按钮对象的特定事件绑定精心编写的处理函数，例如btn.onclick = function() {... }，如此一来，当对应的事件（这里指的是按钮的单击事件）被触发时，预先设定的函数便会有条不紊地启动运行，执行一系列预设的操作，确保网页交互流畅且逻辑清晰。
三、文档加载
浏览器加载页面是自上而下，读一行运行一行，js代码如果写在页面上面，页面中DOM对象尚未完整加载，导致代码找不到目标元素，导致错误。
第一种：
js代码写在页面下面，这样就可以在页面加载后再执行js代码
第二种：
js代码写在上面的话，要通过onload事件，为window绑定onload事件会让js代码在页面加载完成后才执行，确保所有DOM对象已经加载完毕。
通过window.onload = function() {... }这样的代码编写形式，将需要在页面加载完成后执行的代码封装在响应函数内部。如此一来，只有当整个页面，包括所有 DOM 对象都已成功加载，进入稳定可用状态时，该响应函数才会被触发启动，进而执行其中的代码逻辑，为网页交互与功能实现提供坚实保障。
四、获取元素方法
1、getElementById()
通过id，精准定位元素，id区分大小写
返回值：一个元素节点对象
2、getElementsByTagName()
通过标签名，一次捕获一组有相同标签名的元素节点
返回值：以伪数组形式呈现，即使查询只有一个元素，也封装到数组中
可巧妙运用element.getElementsByTagName('标签名')这般语法，只需确保父元素指向明确无误，就能精准网罗所需子元素。需要注意的是，此方法获取的结果并不包含父元素自身，各个子元素依序排列在返回的伪数组之中，等待开发者进一步调用操控。
3、getElementsByName()
通过name属性，获取一组元素节点对象
返回值：伪数组对象
4、getElementsByClassName()
通过元素class属性，获取一组元素节点对象
返回值：伪数组对象
不支持IE8及以下；浏览器
5、childNodes、childen
childNodes属性会获取包括文本节点在内的所有节点,DOM标准，标签间的空白也会被当成文本节点
返回值：返回父元素下的所有子节点，获取包括文本节点在内的所有节点，DOM标准，标签间的空白也会被当成文本节点
children属性可以获取当前元素的所有子元素，不包括空白文档了
返回值：children属性可以获取当前元素的所有子元素，不包括空白文档了
6、firstChild、firstElementChild返回父元素下的第一个子节点
（1）、firstChild 第一个子节点(包括空白的文本节点)
（2）、firstElementChild 获取当前元素的第一个子元素
7、parentNode()
语法：某元素.parentNode
返回某元素的父节点
8、previousSibling 、previousElementSibling，返回某元素的前一个兄弟节点
（1）、 previousSibling [ˈpriːviəs] ['sibliŋ] 返回前一个兄弟节点 也有可能获取到空白的文本
（2）、 previousElementSibling 返回前一个兄弟元素，不包括空白文本，注意：不支持ie8及以下的浏览器
9、获取特定标签：body 、html 、页面所有元素
（1）、获取body标签，
方法一：
document.getElementsByTagName('body')[0]
方法二：
document.body
既可以通过document.getElementsByTagName("body")[0]这种传统的、基于标签名检索的方式，也可以直接使用更为简洁的document.body；
（2）、获取html根标签，
document.documentElement
（3）、获取页面中的所有的元素
方法一：
document.all
方法二：
document.getElementsByTagName('*')
可选择document.all或document.getElementsByTagName("*")这两种方式，前者在一些老旧浏览器中有较好的兼容性表现，后者则更为通用，开发者可根据项目实际需求与浏览器适配情况灵活选用。
10、querySelector () 和 querySelectorAll ()
（1）、document.querySelector()
通过给定的字符串作参数后，转成相应CSS选择器，之后找到符号条件的第一个元素
返回值：返回唯一的元素，无论满足条件的元素有几个，只返第一个元素
（2）、document.querySelectorAll()
通过给定的字符串作参数后，转成相应CSS选择器，之后找到符号条件的元素并封装成数组
返回值：符合条件的所有元素封装到一个伪数组中返回，即使符合条件的元素只有一个，它也会返回数组。
它返回的是一个伪数组，具有以下特点：
有长度（length属性）和索引编号，就像普通数组一样可以通过索引访问元素，例如result[0]可以获取第一个匹配的元素。
但是它没有像普通数组那样的pop()（用于删除数组最后一个元素）和push()（用于在数组末尾添加元素）等数组方法。
注意事项：
哪怕只有一个元素,通过querySelectAll()获取过来的也是一个伪数,里面只有一个元素而已
11、设置 / 修改 DOM 元素内容的两种方式是：元素.innerText 属性、元素.innerHTML 属性。
（1）、innerText
可读写，用于获取或设置元素的纯文本内容，自动将html标签，空格，换行去除，只显示文本。
例如，有一个<div><p>这是<span>一段</span>文本</p></div>，如果获取div的innerText，得到的将是 “这是一段文本”，其中的<p>和<span>标签不会被显示。
（2）、innerHTML
可读写，用于获取或设置元素的HTML内容，识别标签，保留空格和换行，比较常用
当用于获取元素内部的html内容时，对于自结束标签，这个属性没有意义
例如，<div><p>这是<span>一段</span>文本</p></div>为例，如果获取div的innerHTML，得到的将是完整的 HTML 字符串 “<p>这是一段文本</p>”。使用innerHTML设置内容时，可以插入新的 HTML 标签，这些标签会被浏览器解析和渲染。
（3）、补充
（1）、 二者的区别是：元素.innerText 属性只识别文本，不能解析标签；元素.innerHTML 属性能识别文本，能够解析标签；如果还在纠结到底用谁，可以选择 innerHTML。
（2）、console.dir打印我们返回的元素对象，更好的查看里面的属性和方法
（3）、如果需要读取元素节点属性
语法： 元素.属性名，
例如：元素.id ；元素.name ；元素.src ;元素.href等
表单属性：type、value、checked、selected、disabled等
注意：class属性不能采用这种方式，读取class属性时需要使用 元素.className
value值：就是输入文本框中的内容，要修改value值 element.value = "～～";
标签：JavaScript,DOM,标签,元素,获取,讲解,document,节点 From： https://blog.csdn.net/2301_76428778/article/details/145059578