写在前面
从上次博客与实际应学习的内容进行对比,发现对于某个大块知识点的学习缺少框架性,缺少综合考量以及查找信息的能力,所以在自己学习基础上综合预习博客,对自己的学习方法多加修善,也及时对上次的疏漏进行补充,已经悄悄赶上!!!加入了一些粗体以在阅读过程中帮助理解记忆的重点,及时翻开以前学习内容关联学习(有在努力摸索学习方法的菜菜一枚).
一.DOM
1.基本概念
DOM是一种编程接口，它将文档（如HTML和XML）解析为对象，使得程序和脚本能够动态地访问和更新文档的内容、结构和样式。
即当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）
2.DOM树结构
DOM（Document Object Model，文档对象模型）树结构是一种将HTML或XML文档映射到由节点和对象组成的内存中的树形表示。这个结构(标准)允许程序能够更容易地更新文档的内容、结构和样式，(改变,删除,添加,反应,创建)并响应用户的操作。
(1)节点(Node)类型
节点:是构成网页的最基本的组成部分，网页中的每一个部分都可以称为是一个节点。
文档节点（Document Node）：代表整个文档，是DOM树的根节点。对于HTML文档，这个节点通常对应document对象(如下方图标)。
document对象作为window对象的属性存在的，我们不用获取可以直接使用。
通过该对象我们可以在整个文档访问内查找节点对象，并可以通过该对象创建各种节点对象。
元素节点（Element Node）：对应于文档中的HTML标签。每个元素节点都包含其子节点（可能是其他元素节点、文本节点或属性节点）注:整个
例：document.getElementById(想获取元素的ID)，根据id属性值获取一个元素节点对象。
标:这个方法属于Document对象，并且是在DOM（文档对象模型）API(应用程序编程接口:实现交互)中定义的。该方法会返回与该ID匹配的第一个元素（如果有的话）。如果没有找到匹配的元素，则返回null(对应上述查找并获取)
浏览器会将页面中所有的标签都转换为一个元素节点， 我们可以通过document的方法来获取元素节点。
文本节点（Text Node）：包含元素或属性中的文本内容。文本节点通常位于元素节点的子节点列表中，代表元素内部的文本内容。任意非HTML的文本都是文本节点，它包括可以字面解释的纯文本内容
属性节点（Attribute Node）：包含元素的属性信息。这些节点不是元素节点的直接子节点，但它们可以通过元素节点的属性列表来访问。
注:一般不使用属性节点
标: nodeType是HTML DOM属性，用于返回选定节点的节点类型，从而让我们能够知道和区分文档中的各个节点。
JavaScript中的所有节点类型都继承自Node类型，因此所有节点类型都共享相同的基本属性和方法。例如，如果节点是元素节点，则nodeType属性将返回1。
注释节点（Comment Node）：对应于HTML中的注释，如<!-- 这是一个注释 -->。
处理指令节点（Processing Instruction Node）：用于XML文档中，但在HTML中不常用。
下例用来展示HTML文档和对应的DOM树结构
<!DOCTYPE html>
<html>
<head>
<title>示例页面</title>
</head>
<body>
<h1>欢迎来到我的网站</h1>
<p>这是一个段落。</p >
</body>
</html>
Document
├── html
│ ├── head
│ │ └── title
│ │ └── 文本节点: "示例页面"
│ └── body
│ ├── h1
│ │ └── 文本节点: "欢迎来到我的网站"
│ └── p
│ └── 文本节点: "这是一个段落。"
在DOM树中，每个节点都有一些属性和方法，可以用来查询、修改或删除节点，以及添加事件监听器等。通过JavaScript等脚本语言，可以遍历DOM树，访问和修改节点的内容，从而动态地改变网页的显示内容。
3.DOM操作
DOM（Document Object Model，文档对象模型）操作是指通过编程的方式对HTML或XML文档的结构、内容和样式进行动态修改和访问的过程。DOM将文档转换为一系列的对象，使得程序能够像操作对象一样来操作文档.
~插一嘴,本篇帮助理解的例子很多,因为是多方查找,这里就不进行copy了,但是都有看和练习,虽然还是懵懵的
(1)选中DOM元素
getElementById(id)：通过元素的ID选中元素
getElementsByClassName(className)：通过元素的class属性选中一组元素
getElementsByTagName(tagName)：通过元素的标签名选中一组元素
querySelector(selector)：通过CSS选择器选中第一个匹配的元素
querySelectorAll(selector)：通过CSS选择器选中所有匹配的元素
(2)修改DOM元素的属性
setAttribute(name, value)：设置元素的属性值
getAttribute(name)：获取元素的属性值
removeAttribute(name)：移除元素的属性
(3)修改DOM元素的样式
直接通过元素的style属性修改样式，例如element.style.color = "red";
(4)添加和删除DOM元素
createElement(tagName)：创建新的元素节点
appendChild(node)：将新节点添加到父节点的子节点列表的末尾
insertBefore(newNode, referenceNode)：在参考节点之前插入新节点
removeChild(node)：从父节点的子节点列表中删除节点
(5)修改DOM元素的内容
innerHTML：设置或获取元素内部的HTML内容
innerText：设置或获取元素内部的文本内容
(6)绑定事件处理程序
为DOM元素添加事件监听器，例如element.addEventListener("click", function() { /* 事件处理代码 */ });
注:DOM操作可能会对页面的性能产生影响，特别是在处理大量元素或频繁进行DOM操作时。因此，在开发过程中需要注意优化DOM操作，避免不必要的性能损耗
二.BOM
1.基本概念
BOM提供了与浏览器窗口进行交互的对象和方法，如导航、定位、弹出窗口、设置cookie等。
2.对象
(1)Window对象
代表的是整个浏览器的窗口，同时window也是网页中的全局对象
三种类型的弹出框：警告框、确认框和提示框
警告框
语法:window.alert("sometext");
注：window.alert() 方法可以不带 window 前缀来写
确认框
当确认框弹出时，用户将不得不单击“确定”或“取消”来继续进行。
如果用户单击“确定”，该框返回 true。如果用户单击“取消”，该框返回 false。
语法:window.confirm("sometext");
注：window.confirm() 方法可以不带 window 前缀来编写
提示框
如果希望用户在进入页面前输入值，通常会使用提示框。
当提示框弹出时，用户将不得不输入值后单击“确定”或点击“取消”来继续进行。
如果用户单击“确定”，该框返回输入值。如果用户单击“取消”，该框返回 NULL。
语法:window.prompt("sometext","defaultText");
(2)Navigator对象
代表的当前浏览器的信息，通过该对象可以来识别不同的浏览器
(3)Location对象
代表当前浏览器的地址栏信息，通过Location可以获取地址栏信息，或者操作浏览器跳转页面
属性:
console.log(location); //输出location对象
console.log(location.href); //输出当前地址的全路径地址
console.log(location.origin); //输出当前地址的来源
console.log(location.protocol); //输出当前地址的协议
console.log(location.hostname); //输出当前地址的主机名
console.log(location.host); //输出当前地址的主机
console.log(location.port); //输出当前地址的端口号
console.log(location.pathname); //输出当前地址的路径部分
console.log(location.search); //输出当前地址的?后边的参数部分
方法:
assign()：用来跳转到其它的页面，作用和直接修改location一样
location.assign("https://www.baidu.com");
reload()：用于重新加载当前页面，作用和刷新按钮一样，如果在方法中传递一个true，作为参数，则会强制清空缓存刷新页面
location.reload(true);
replace()：可以使用一个新的页面替换当前页面，调用完毕也会跳转页面，它不会生成历史记录，不能使用回退按钮回退
location.replace("https://www.baidu.com");
(4)History对象
代表浏览器的历史记录，可以通过该对象来操作浏览器的历史记录，由于隐私原因，该对象不能获取到具体的历史记录，只能操作浏览器向前或向后翻页，而且该操作只在当次访问时有效
属性:
console.log(history); //输出history对象
console.log(history.length); //可以获取到当成访问的链接数量
方法:
back()：可以回退到上一个页面，作用和浏览器的回退按钮一样
history.back();
forward()：可以跳转到下一个页面，作用和浏览器的前进按钮一样
history.forward();
go()：可以用来跳转到指定的页面，它需要一个整数作为参数
1：表示向前跳转一个页面，相当于forward()
2：表示向前跳转两个页面
-1：表示向后跳转一个页面，相当于back()
-2：表示向后跳转两个页面
history.go(-2);
(5)Screen对象
代表用户的屏幕的信息，通过该对象可以获取到用户的显示器的相关的信息
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
