接上篇：

[从零开始学习DOM-BOM(一)](https://blog.51cto.com/u_16051001/6251691）

第一篇主要分享了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 rel="nofollow" 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")

Element节点

我们平时创建的div、p、span等元素在DOM中表示为Element元素

详细文档可参考MDN

我们来看一下常见的属性和方法:

常见属性

子元素 children childNodes
tagName
id/class
clientWidth/clientHeight
clientLeft/clientTop
offsetLeft/offsetTop

常见方法

获取样式 getAttribute 修改某个样式 setAttribute

<!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 rel="nofollow" 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>