从零开始学习DOM-BOM(二)
持续创作，加速成长！这是我参与「掘金日新计划 · 6 月更文挑战」的第6天，点击查看活动详情
接上篇：
[从零开始学习DOM-BOM(一)](https://juejin.cn/post/7102766496585089054）
第一篇主要分享了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)常见方法
- 创建元素
- 获取标签标签 ```js // 创建元素 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")
## Element节点
我们平时创建的div、p、span等元素在DOM中表示为Element元素
详细文档可参考[MDN](https://developer.mozilla.org/zh-CN/docs/Web/API/Element)
我们来看一下常见的属性和方法:
### 常见属性
* 子元素 children childNodes
* tagName
* id/class
* clientWidth/clientHeight
* clientLeft/clientTop
* offsetLeft/offsetTop
### 常见方法
获取样式 getAttribute
修改某个样式 setAttribute
```html
<!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>
<style>
#box {
width: 200px;
height: 200px;
background-color: red;
}
.content {
width: 100px;
height: 100px;
display: inline-block;
background-color: blue;
}
</style>
</head>
<body>
<div id="box" class="abc why" age="18">
<span name="why" class="content">span元素</span>
<!-- 哈哈哈 -->
<strong></strong>
<a href="#"></a>
</div>
<div></div>
<script>
const divEl = document.querySelector("#box")
// 1. 获取子元素
console.log(divEl.children)
console.log(divEl.childNodes)
// 2.tagName 如DIV
console.log(divEl.tagName)
// 3. id/class
console.log(divEl.id)
console.log(divEl.className)
console.log(divEl.classList)
// 4.在可视区域大小
console.log(divEl.clientWidth)
console.log(divEl.clientHeight)
console.log(divEl.offsetLeft)
console.log(divEl.offsetTop)
</script>
// 常见的方法
const value = divEl.getAttribute("age")
console.log(value)
divEl.setAttribute("height", 1.88)
</body>
</html>其他
text节点
文本节点由Text类型标识，顾名思义，dom中的文字
comment 节点
Comment代表注释节点，顾名思义，html 中写的注释
Attr 节点
元素的特性在DOM中以Attr类型表示。掌握name和value即可
<html>
<body>
<div id="myDiv" title="hello"></div>
</body>
<script>
var div = document.getElementById('myDiv');
console.log(div.getAttributeNode('title').name); // "title"
console.log(div.getAttributeNode('title').value); // "hello"
</script>
</html>总结
这篇文章我们通过很多简单的代码，介绍了DOM的构成，希望大家有个系统的认识，下篇文章我们会用图来重新解释dom,图解dom.
最后，这是我第一次参加更文活动，茫茫人海中，如果有幸遇到你，读到我这篇文章，那真是太好了。我深知还有很多不足，希望大家能多提建议，还是想舔着脸皮，向屏幕前的大帅比们，大漂亮们，恳请一个小小的点赞，这会是对我莫大鼓励。也祝愿点赞的大帅比们，大漂亮们升职加薪走向人生巅峰！