接上篇：
[从零开始学习DOM-BOM(一)
第一篇主要分享了BOM对象的内容，今天起床之后继续更新DOM对象内容。
前言
我们都知道，Javascript是由ECMAScript，DOM，BOM组成的。但是很多开发小伙伴对DOM，BOM缺乏一个系统的认识，今天这篇文章主要讲述DOM和BOM的体系化知识。
ECMAScript，描述了该语言的语法和基本对象，如类型、运算、流程控制、面向对象、异常等。 文档对象模型（DOM），描述处理网页内容的方法和接口。 浏览器对象模型（BOM），描述与浏览器进行交互的方法和接口。
DOM
概述
浏览器是用来展示网页的，而网页中最重要的就是里面各种的标签元素，JavaScript很多时候是需要操作这些元素的。
- JavaScript如何操作元素呢?通过Document Object Model(DOM，文档对象模型)。
- DOM给我们提供了一系列的模型和对象，让我们可以方便的来操作Web页面。
DOM的基本思想是把结构化文档（比如HTML和XML）解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）
严格地说，DOM不属于JavaScript，但是操作DOM是JavaScript最常见的任务，而JavaScript也是最常用于DOM操作的语言。
所以，DOM往往放在JavaScript里面介绍。
DOM 主要节点类型
Document, ELement, Attr, Text ,Comment
EventTarget节点
EventTarget是一个 DOM 接口，由可以接收事件、并且可以创建侦听器的对象实现。
Element，document 和window 是最常见的 event targets
EventTarget有三个原型方法，在window和DOM元素上都可以使用
- addEventListener 给元素绑定事件
- removeEventListener 移除元素绑定的事件
- dispatchEvent 派发事件
给window对象绑定 "click" 点击事件
document.addEventListener("click", () => { console.log("document被点击") }) const divEl = document.querySelector("#box") const spanEl = document.querySelector(".content") divEl.addEventListener("click", () => { console.log("div元素被点击") }) spanEl.addEventListener("click", () => { console.log("span元素被点击") })
Node节点
所有的DOM节点类型都继承自Node接口。
概述
DOM的最小组成单位叫做节点（node），一个文档的树形结构（DOM树），就是由各种不同类型的节点组成。
Node是一个接口，各种类型的 DOM API 对象会从这个接口继承。
对于HTML文档，节点主要有以下六种类型：Document节点、DocumentType节点、Element节点、Attribute节点、Text节点和DocumentFragment节点。
分类
| 节点 | 名称 | 含义 |
| Document | 文档节点 | 整个文档（window.document） |
| DocumentType | 文档类型节点 | 文档的类型（比如 'DOCTYPE html'） |
| Element | 元素节点 | HTML元素（比如body、a等 |
| Attribute | 属性节点 | HTML元素的属性（比如class="right"） |
| Text | 文本节点 | HTML文档中出现的文本 |
| DocumentFragment | 文档碎片节点 | 文档的片段 |
常用属性
Node 有几个非常用且重要的属性
- nodeName:node节点的名称;
- nodeType:可以区分节点的类型;
- nodeValue:node节点的值;
- childNodes:所有的子节点;
NodeType具体的枚举值可以参考MDN链接
我觉得我们日常开发不用掌握这些，也不用刻意去背记
理解Vue，react模版编译的时候会用到，碰到一些节点枚举值的时候，查文档就好
现在只是建立一个系统的认识。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="box"> <span>span元素</span> <strong></strong> <a href="#"></a> </div> <div></div> <h2 name="title">标题</h2> <button>切换标题</button> <script> const divEl = document.querySelector("#box") const spanEl = document.querySelector(".content") // 常见的属性 console.log(divEl.nodeName, spanEl.nodeName) // DIV SPAN console.log(divEl.nodeType, spanEl.nodeType) // 1 1 console.log(divEl.nodeValue, spanEl.nodeValue) // null null // childNodes const spanChildNodes = spanEl.childNodes const textNode = spanChildNodes[0] console.log(textNode.nodeValue) // span元素 // 常见的方法 const strongEl = document.createElement("strong") strongEl.textContent = "我是strong元素" divEl.appendChild(strongEl) </script> </body> </html>
Document节点
Document节点表示的整个载入的网页，我们来看一下常见的属性和方法:
详细文档可参考MDN
我们只选择重点内容和大家分享
常见属性
- document.body 返回文档的body元素
- document.title 返回当前文档的标题
- document.head 返回当前文档的head内容
- document.children[0] 返回当前文档html内容
console.log(document.body) console.log(document.title) document.title = "Hello World" console.log(document.head) console.log(document.children[0]) console.log(window.location) console.log(document.location) console.log(window.location === document.location)
常见方法
- 创建元素
- 获取标签标签
// 创建元素 const imageEl = document.createElement("img") const imageEl2 = new HTMLImageElement() // 获取元素 const divEl1 = document.getElementById("box") const divEl2 = document.getElementsByTagName("div") const divEl3 = document.getElementsByName("title") const divEl4 = document.querySelector(".content") const divEl5 = document.querySelectorAll(".content")
