01 初识JavaScript
1.1 Javascript组成
JavaScript的实现包括以下3个部分：
| 组成 | 描述 |
|---|---|
| ECMAScript(核心) | 描述了JS的语法和基本对象。 |
| 文档对象模型 （DOM） | 处理网页内容的方法和接口 |
| 浏览器对象模型（BOM） | 与浏览器交互的方法和接口 |
补充:
- ECMAScript是一个标准，JS只是它的一个实现
- DOM 是 W3C 的标准； [所有浏览器公共遵守的标准]
- BOM 是 各个浏览器厂商根据 DOM在各自浏览器上的实现;[表现为不同浏览器定义有差别,实现方式不同]
- window 是 BOM 对象，而非 js 对象；javacsript是通过访问BOM（Browser Object Model）对象来访问、控制、修改客户端(浏览器)
1.2 BOM、DOM概念：
API（Application Programming Interface，应用程序编程接口）是一组预先定义的函数，用于提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力，而无需访问源代码，或理解内部工作机制的细节。
DOM和BOM都属于API。
-
BOM（Browser Object Model，浏览器对象模型）是指浏览器提供的一组对象，允许JavaScript访问和操作浏览器的功能和信息。例如，window对象是BOM的一部分，它表示浏览器窗口，并提供了诸如alert()和setTimeout()之类的方法。 -
DOM（Document Object Model，文档对象模型）是一个跨平台和语言无关的接口，是针对XML的基于树的API，它允许程序和脚本动态访问和更新文档的内容、结构和样式。在Web浏览器中，DOM通常表示为HTML或XML文档的结构化表示。
把 HTML 看做一个对象树（DOM树），它本身和里面的所有东西比如
<div></div>这些标签都看做一个对象，每个对象都叫做一个节点（node），节点可以理解为 DOM 中所有 Object 的父类。
- JavaScript是一种脚本语言，它可以使用BOM和DOM来操作浏览器和文档。例如，使用JavaScript可以通过DOM API来更改页面上的元素内容，或者使用BOM API来控制浏览器窗口的大小。
1、文档树（DOM树）
当浏览器下载到一个网页，通常是 HTML，这个 HTML 就叫 document（当然，这也是 DOM 树中的一个 node），document 通常是整个 DOM 树的根节点。这个 document 包含了标题（document.title）、URL（document.URL）等属性，可以直接在 JS 中访问到。
注意：在一个浏览器窗口中可能有多个 document，例如，通过
iframe加载的页面，每一个都是一个 document。
不了解iframe的可以通过我写的html5的文章进行学习，了解html整体概念。
2、BOM 是为了控制浏览器的行为而出现的接口。
比如跳转到另一个页面、前进、后退等等，程序还可能需要获取屏幕的大小之类的参数。
由于BOM的window包含了document，因此可以直接使用window对象的document属性，通过document属性就可以访问、检索、修改XHTML文档内容与结构。因为document对象又是DOM（Document Object Model）模型的根节点。可以说，BOM包含了DOM(对象)，浏览器提供出来给予访问的是BOM对象，从BOM对象再访问到DOM对象，从而js可以操作浏览器以及浏览器读取到的文档。
BOM的核心是Window，而Window对象又具有双重角色，它既是通过js访问浏览器窗口的一个接口，又是一个Global（全局）对象。这意味着在网页中定义的任何对象，变量和函数，都以window作为其global对象。
-
Window对象包含属性：document、location、navigator、screen、history、frames -
Document根节点包含子节点：forms、location、anchors、images、links
补充：
1、 如果文档包含框架（frame 或 iframe 标签），浏览器会为 HTML 文档创建一个 window 对象，并为每个框架创建一个额外的 window 对象。
2、 window.frames 返回窗口中所有命名的框架
3、两种定时器：setTimeout(code,latency) 和setInterval(code,period)
注：setTimeout只执行一次code，如果要多次调用，可以让code自身再次调用setTimeout()；setInteval()会不停地调用code，直到clearInterval()被调用。
02 BOM
2.1 BOM对象
BOM（浏览器对象模型）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。BOM 由多个对象构成，其中代表浏览器窗口的 window 对象是 JavaScript 顶层对象，其他 BOM 对象均为 window 对象的子对象。
BOM 提供了许多对象，用于访问浏览器的功能。例如：
window对象：表示浏览器窗口，可以用来获取窗口的尺寸、打开新窗口、设置定时器等。location对象：表示当前文档的 URL，可以用来获取或设置 URL 的各个部分。navigator对象：表示浏览器本身，可以用来获取浏览器的信息，如名称、版本号等。history对象：表示浏览器的历史记录，可以用来后退或前进到指定页面。screen对象：表示用户的屏幕，可以用来获取屏幕的尺寸、颜色深度等。
2.2 对象与操作（转载思维导图）
03 DOM
3.1HTML DOM 节点
（1）在DOM中，HTML文档的层次结构被表示为一个树形结构。并用document对象表示该文档，树的每个子节点表示HTML文档中的不同内容。每个载入浏览器的 HTML 文档都会成为 Document 对象。
（2）Document是探索DOM的入口,利用全局变量document可以访问Document对象。
（3）在 HTML DOM （文档对象模型）中，每个部分都是节点：
- 文档本身是文档节点
- 所有 HTML 元素是元素节点
- 所有 HTML 属性是属性节点
- HTML 元素内的文本是文本节点
- 注释是注释节点
DOM 节点有不同的类型，每种类型都有自己的属性和方法。下面是一个表格，列出了一些常见的 DOM 节点类型和它们的属性：
| 节点名称 | 属性 |
|---|---|
| 元素节点 | nodeName、nodeValue、attributes、childNodes 等 |
| 属性节点 | nodeName、nodeValue 等 |
| 文本节点 | nodeName、nodeValue、data 等 |
| 注释节点 | nodeName、nodeValue、data 等 |
| 文档节点 | nodeName、doctype、documentElement 等 |
3.2 Element 对象
- 在 HTML DOM 中，
Element对象表示 HTML 元素。 - Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。
NodeList对象表示节点列表，比如 HTML 元素的子节点集合。- 元素也可以拥有属性。属性是属性节点。
3.2.1 获取元素节点
获取元素节点：通过document对象的三个方法获取：
- document.getElementById(“ID”)
- document.getElementByName(“name”)
- document.getElementsByTagName(“p”);
3.2.2 元素事件监听
在 JavaScript 中，可以使用 addEventListener() 方法来监听事件。这个方法接受三个参数：事件类型、监听器和一个可选的配置对象。
| 参数 | 说明 |
|---|---|
| type | 事件类型的大小写敏感的字符串。 |
| listener | 当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。 |
| options | 可选的配置对象，包括 capture、once、passive 和 signal 等属性。 |
例如，可以这样使用 addEventListener() 方法：
element.addEventListener('click', function(event) {
// 处理点击事件
}, {
capture: false, once: true});
解释：上面的代码为 element 元素添加了一个点击事件监听器，当点击事件触发时，会执行回调函数。配置对象中指定了 capture 为 false，表示在冒泡阶段触发监听器；once 为 true，表示监听器最多只会触发一次。
3.3 属性节点
获取属性节点：属性节点附属于元素节点。
- 可通过元素节点的
getAttributeNode(attrName)方法获取属性节点 - 可通过
getAttribute(attrName)直接获取属性值。 - 其他增删改查参考官方文档。
3.4 文本节点
获取文本节点：文本节点为元素节点的子节点。
- 通过元素节点（Element接口）提供的
childnodes()[index]方法获得。
3.5 易混淆和补充
混淆点:
<p id="example" title="texts">
这是一段文本
<span></span>
</p>
var p = document.getElementById('example');
p.nodeValue //null,p是元素节点，所以nodeValue为null
p.getAttributeNode('id').nodeValue //example，这里获取到p的id属性的属性节点，nodeValue就是它的属性值
p.childNodes[0].nodeValue
/*这是一段文本,p是含有两个子节点的，插入的文本虽然没有标签，但它依然是一个节点。
其类型是是文本节点，其nodeValue是就是写入在其中的字符串，包含换行和缩进*/
p.innerHTML//这是一段文本 <span></span>"
//这里innerHTML返回了p所包含的全部的节点的所包含的各种值了，以字符串的形式。
3.6 DOM事件流
DOM 事件流包括三个阶段：捕获阶段、目标阶段和冒泡阶段。
- 在捕获阶段，事件从文档的根节点开始向下传播，直到到达目标元素；
- 在目标阶段，事件到达目标元素；
- 在冒泡阶段，事件从目标元素开始向上传播，直到到达文档的根节点。
冒泡型事件和捕获型事件的区别在于它们在 DOM 事件流中的触发顺序不同。冒泡型事件监听器会在冒泡阶段被触发，而捕获型事件监听器会在捕获阶段被触发。
例如，假设有如下 HTML 代码：
<div id="myDiv">
<button id="myBtn">Click me!</button>
</div>
如果我们为 div 元素和 button 元素都添加了点击事件监听器，那么当我们点击 button 元素时，这两个监听器都会被触发。但是它们的触发顺序取决于它们是冒泡型事件监听器还是捕获型事件监听器。
- 如果它们都是冒泡型事件监听器，那么 button 元素的监听器会先被触发，然后是 div 元素的监听器。
- 如果它们都是捕获型事件监听器，那么 div 元素的监听器会先被触发，然后是 button 元素的监听器。
04 附录：转载操作思维导图
4.1 DOM基本操作思维导图
4.2 window对象思维导图
4.3 转载地址
转载自：点击这里