DOM是什么？

DOM: Document Object Model 文档对象模型

对象的 HTML DOM 树

文档：html文档。对象：DOM元素对象 html元素对象模型：树模型 html标签就形成一课树

DOM中有一套操作页面元素的属性和方法。

学习css时，可以把标签看成一个个的盒子，在学习DOM时，需要把标签看成一个个的对象。
例：

<div class="box">我是一个div</div> 
        元素节点：<div class="box">我是一个div</div> 
        属性节点：class="box"
        文本节点：我是一个div

DOM操作：操作（增删改查）
1）可以操作document
2）可以操作文档中各种标签

A）操作元素节点
B）操作属性节点
C）操作文本节点
3）操作样式
A）操作行内样式
B）操作class类

一、通过元素选择器获取

这种方法主要在于通过元素的 id、class 和标签名获取元素，常用以下三个方法：

getElementById()
getElementsByClassName()
getElementsByTagName()

1、getElementById

let title = document.getElementById('title');

按照规范在 HTML 中，id 是唯一的，所以通过这样的方式可以获得唯一的元素，事实上若浏览器中出现多个id名的情况，CSS样式对所有该id名的元素都生效，但这个方法仅对第一个出现该id名的元素生效

innerHTML 属性

获取元素内容最简单的方法是使用 innerHTML 属性。

innerHTML 属性可用于获取或替换 HTML 元素的内容。

innerHTML 属性可用于获取或改变任何 HTML 元素，包括 <html> 和 <body>。

2、getElementsByClassName

let textHeadings = document.getElementsByClassName('text-heading');
console.log(textHeadings[1]);

我们可以很容易通过这个方法名看出来，elements就可以体现出，这个方法获得的不是单个节点，而是一个类数组对象 HTMLCollection，我们可以通过下标访问其中的每一个节点

3、getElementsByTagName

在上面给出的兼容方法中已经使用到了这个方法，getElementsByTagName 方法接收一个参数，即要取得元素的标签名，返回的也是类数组对象 HTMLCollection

let spans = document.getElementsByTagName('span');

二、通过 selector 获取

querySelector
querySelectorAll

1、querySelector

querySelector 方法接收一个 CSS 选择器，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null

该方法既可用于文档document类型，也可用于元素element类型

let body = document.querySelector("body");

2、querySelectorAll

querySelectorAll同样接收一个CSS选择符，和上一个方法的区别在于返回一个类数组对象NodeList

let spans = document.querySelectorAll(".text-heading");

三、通过节点关系获取

有的时候我们不仅需要对节点进行操作，还需要连带操作它的父子/兄弟节点，我们也可以调用以下方法；

父子关系：

parentNode/parentElement
firstChild/lastChild
childNodes/childern

兄弟关系：

previousSibling/nextSibling
previousElementSibling/nextElementSibling

由于随着目前前端的交互性越来越强，页面上元素变化较大，这些方法有比较大的局限性，可维护性比较差

从另一个角度来说，有时我们不知道要获取的元素的 id、class 甚至不知道 tag，通过节点关系获取元素也是一种不错的方案

Node 节点和 Element 节点

NodeList 实例对象是一个类数组对象，它的成员是节点对象，包括childNodes和querySelectorAll()方法返回值

HTMLCollection集合包括getElementsByTagName()、getElementsByClassName()、getElementsByName()等方法的返回值，以及children

除了element之外node还包括很多类型，列举如下；

元素节点：ELEMENT
属性节点：ATTRIBUTE
文本节点：TEXT
CDATA节点：CDATA_SECTION
实体引用名称节点：ENTRY_REFERENCE
实体名称节点：ENTITY
处理指令节点：PROCESSING_INSTRUCTION
注释节点：COMMENT
文档节点：DOCUMENT
文档类型节点：DOCUMENT_TYPE
文档片段节点：DOCUMENT_FRAGMENT
DTD声明节点：NOTATION

这些不同的node类型具有共同的属性（nodeType、nodeName、nodeValue等）和方法，还有一些特有的属性和方法。

增删改查

JavaScript HTML DOM 文档 (w3school.com.cn)

DOM 节点的获取与操作