一、HTML DOM简介 HTML DOM（文档对象模型）是一种基于文档的编程接口，它是 HTML 和 XML 文档的编程接口。它可以让开发人员通过 JavaScript 或其他脚本语言来访问和操作 HTML 和 XML 文档的内容、结构和样式。
二、HTML DOM结构 HTML DOM 将整个 HTML 或 XML 文档表示为一个树状结构，其中每个元素（如标签、文本、属性）都是一个节点。通过 HTML DOM，开发人员可以通过节点名称、节点类型、节点属性等方式来访问和操作 HTML 或 XML 文档中的节点。
三、HTML DOM核心概念
- 节点（Node） 根据 DOM，HTML 文档中的每个成分都是一个节点。DOM 是这样规定的：
- 整个文档是一个文档节点
- 每个 HTML 标签是一个元素节点
- 包含在 HTML 元素中的文本是文本节点
- 每一个 HTML 属性是一个属性节点
- 注释属于注释节点
- Node 层次 节点彼此都有等级关系。HTML 文档中的所有节点组成了一个文档树（或节点树）。
四、HTML DOM操作
- 获取节点 HTML DOM 提供了许多方法来获取节点，常用的有：
- 通过 id 找到 HTML 元素
// 通过元素设置的id名，找到该元素
var x = document.getElementById("myidname");
<p class="myidname">我是一个P标签</p>
// 获取id为main下的所有P元素
document.getElementById("main").getElementsByTagName("p");
- 通过类名 class 找到 HTML 元素
var x = document.getElementsByClassName("myclassname");
<p class="myclassname">我是一个P标签</p>
- 通过标签名查找 HTML 元素
// 获取p标签
var y = document.getElementsByTagName("p");
// 获取id为myidname的div中的p标签
var x = document.getElementById("myidname");
var y = x.getElementsByTagName("p");
- 修改节点 HTML DOM 允许我们通过 JavaScript 修改节点，例如：
- 修改节点文本
// 获取要修改的节点
var p = document.getElementById("myidname");
// 修改节点文本
p.textContent = "我是修改后的文本";
- 修改节点属性
// 获取要修改的节点
var a = document.getElementById("myidname");
// 修改节点属性
a.href = "https://www.example.com";
- 添加和删除节点 HTML DOM 允许我们通过 JavaScript 添加和删除节点，例如：
- 添加节点
// 创建一个新的p标签
var p = document.createElement("p");
// 设置节点文本
p.textContent = "我是新添加的P标签";
// 添加节点到页面中
document.body.appendChild(p);
- 删除节点
// 获取要删除的节点
var p = document.getElementById("myidname");
// 删除节点
document.body.removeChild(p);
五、浏览器BOM简介
BOM（浏览器对象模型）提供了独立于内容而与浏览器窗口进行交互的对象。描述了与浏览器进行交互的方法和接口，可以对浏览器窗口进行访问和操作。
六、BOM核心概念
-
Window对象
Window对象是整个BOM的核心，所有对象和集合都以某种方式回接到window对象。Window对象表示整个浏览器窗口。
-
Document对象
Document对象实际上是window对象的属性。这个对象的独特之处是唯一一个既属于BOM又属于DOM的对象。从BOM角度看，document对象由一系列集合构成，这些集合可以访问文档的各个部分。
-
Location对象
Location对象是window对象和document对象的属性。Location对象表示载入窗口的URL，此外它还可以解析URI。
-
Navigator对象
Navigator包含大量Web浏览器相关的信息。各种浏览器支持该对象的属性和方法不尽相同。
-
Screen对象
Screen对象可以通过其获取用户屏幕相关的信息。
