DOM 节点的获取与操作
DOM是什么？
DOM: Document Object Model 文档对象模型
对象的 HTML DOM 树
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 获取
querySelectorquerySelectorAll
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等）和方法，还有一些特有的属性和方法。
