DOM
DOM 文档对象模型（Document Object Model），是 W3C（万维网联盟）的标准，为我们在JS中操作html元素的能力，提供的编程接口。
DOM把HTML文档抽象表示为一棵树(DOM树)。如下图所示：
Document 对象
每个载入浏览器的 HTML 文档都会成为 Document 对象。
Document 对象使我们可以从脚本中对 HTML 页面中的所有元素进行访问。
DOM基本功能：
① 查询某个元素
② 查询某个元素的祖先、兄弟以及后代元素
③ 获取、修改元素的属性
④ 获取、修改元素的内容
⑤ 创建、插入和删除元素
一些DOM方法
元素的获取
获取html根元素
document.documentElement // <html />
获取body元素
document.body // <body />
获取head元素
document.head
获取当前文档title
document.title
根据选择器获取元素
根据ID名获取
根据ID名获取指定的一个元素，如果多个元素id名重复 返回的是第一个元素对象，任何HTML元素可以有一个id属性，在文档中id必须是唯一，如果没有找到返回null。
document.getElementById('id')
根据类名获取
返回包含带有指定类名的所有元素的元素集合(HTMLCollection)，如果没有找到返回空元素集合。
var list = document.getElementsByClassName('class')
list.item(0) // 获取集合中索引为0的那个元素
// 可修改获取上下文
var list = outer.getElementsByClassName('class')
querySelector
根据css选择器(id、类名、标签名) 获取父元素上下文匹配的第一个元素，如果没有找到返回null。
var ele = parentNode.querySelector('.class')
var ele = parentNode.querySelector('#id')
var ele = parentNode.querySelector('div')
querySelectorAll
根据css选择器(id、类名、标签名) 获取父元素上下文所有匹配元素，返回静态NodeList，如果没有找到返回null。
var ele = parentNode.querySelectorAll('.class')
var ele = parentNode.querySelectorAll('#id')
var ele = parentNode.querySelectorAll('div')
HTMLCollection(HTML元素集合)
表示一个包含了元素（元素顺序为文档流中的顺序）的通用集合 HTML DOM 中的
HTMLCollection是即时更新的（live）；当其所包含的文档结构发生改变时，它会自动更新。 属性： HTMLCollection.length 只读 返回集合当中子元素的数目。 方法： HTMLCollection.item() 根据给定的索引（从0开始），返回具体的节点。如果索引超出了范围，则返回null。
根据标签名获取
返回一个包括所有给定标签名称的元素的HTML集合HTMLCollection。
var tags = document.getElementsByTagName('div')
// 可修改获取上下文
var tags = outer.getElementsByTagName('div')
根据name获取 (通常用于表单元素)
根据给定的name 返回一个在 (X)HTML document的节点列表集合(NodeList)。
HTML
<input type="text" name="input">
JavaScript
var input = document.getElementsByName('input')
console.log(input) // NodeList [input]
NodeList
NodeList 对象是一个节点的集合，是由 Node.childNodes 和document.querySelectorAll 返回的。
大多数情况下，NodeList对象都是个实时集合。意思是说，如果文档中的节点树发生变化，则已经存在的 NodeList 对象也可能会变化。例如，Node.childNodes 是实时的：
var parent = document.getElementById('parent');
var child_nodes = parent.childNodes;
console.log(child_nodes.length); // 如果假设结果是“2”
parent.appendChild(document.createElement('div'));
console.log(child_nodes.length); // 此时的输出是“3”
在另一些情况下，NodeList 是一个静态集合，也就意味着随后对文档对象模型的任何改动都不会影响集合的内容。document.querySelectorAll 返回一个静态的 NodeList。
HTMLCollection与NodeList区别
HTMLCollection对象与NodeList对象类似，也是节点的集合，返回一个类数组对象。但二者有不同之处
NodeList集合主要是Node节点的集合，而HTMLCollection集合主要是Element元素节点的集合。Node节点共有12种，Element元素节点只是其中一种。
元素创建
document.createElement(标签名)
document.createElement('div') // 创建一个div元素
----------------------------------------------------------------------------------------------------------------
参考文章&&强烈推荐：布罗利
