目录
DOM概述
DOM 是 JavaScript 操作网页的接口，全称为“文档对象模型” （Document Object Model）。它的作用是将网页转为一个 JavaScript 对象，从而可以用脚本进行各种操作（比如对元素增删内容）
浏览器会根据 DOM 模型，将结构化文档HTML解析成一系列的节点，再由这些节点组成一个树状结构（DOM Tree）。所有的节点 和最终的树状结构，都有规范的对外接口
DOM 只是一个接口规范，可以用各种语言实现。所以严格地说， DOM 不是 JavaScript 语法的一部分，但是 DOM 操作是 JavaScript 最常见的任务，离开了 DOM，JavaScript 就无法控制网页。另一方 面，JavaScript 也是最常用于 DOM 操作的语言
节点
DOM 的最小组成单位叫做节点（node）。文档的树形结构（DOM 树），就是由各种不同类型的节点组成。每个节点可以看作是文档树的一片叶子
节点的类型有七种
Document：整个文档树的顶层节点
DocumentType：doctype标签
Element：网页的各种HTML标签
Attribute：网页元素的属性（比如class="right"）
Text：标签之间或标签包含的文本
Comment：注释
DocumentFragment：文档的片段
节点树
一个文档的所有节点，按照所在的层级，可以抽象成一种树状结构。这种树状结构就是 DOM 树。它有一个顶层节点，下一层都是顶层节点的子节点，然后子节点又有自己的子节点，就这样层层衍 生出一个金字塔结构，倒过来就像一棵树
浏览器原生提供document节点，代表整个文档
document
// 整个文档树除了根节点，其他节点都有三种层级关系
父节点关系（parentNode）：直接的那个上级节点
子节点关系（childNodes）：直接的下级节点
同级节点关系（sibling）：拥有同一个父节点的节点
Node.nodeType属性
不同节点的nodeType属性值和对应的常量如下
文档节点（document）：9，对应常量
Node.DOCUMENT_NODE
元素节点（element）：1，对应常量Node.ELEMENT_NODE
属性节点（attr）：2，对应常量Node.ATTRIBUTE_NODE
文本节点（text）：3，对应常量Node.TEXT_NODE
文档片断节点（DocumentFragment）：11，对应常量 Node.DOCUMENT_FRAGMENT_NODE
document.nodeType // 9
document.nodeType === Node.DOCUMENT_NODE //
truedocument对象_属性
document对象是文档的根节点，每张网页都有自己的document对象只要浏览器开始载入 HTML 文档，该对象就存在了，可以直接使用
document.doctype
document.doctype，指向 <DOCTYPE>节点，即文档类型 （Document Type Declaration，简写DTD）节点。HTML 的文档 类型节点，一般写成 。如果网页没有声明 DTD，该属 性返回null
var doctype = document.doctype;
doctype // "<!DOCTYPE html>"document.documentElement
document.documentElement属性返回当前文档的根节点 （root），一般是<html>节点
document.documentElement
document.body，document.head
document.body属性指向<body>节点，document.head属性指向<head>节点
document.body;
document.head;document.forms
document.forms 属性返回所有<form>表单节点
var selectForms = document.forms;
document.images
document.images 属性返回页面所有 <img>图片节点
var imglist = document.images;
for(var i = 0; i < imglist.length; i++) {
if (imglist[i].src === 'banner.png') {
// ...
}
}
document.scripts
document.scripts 属性返回所有<script> 节点
var scripts = document.scripts;
if (scripts.length !== 0 ) {
console.log('当前网页有脚本');
}
document.domain
document.domain 属性返回当前文档的域名
document.domain; // www.xioatong.com
document对象_方法/获取元素
document.getElementsByTagName()
document.getElementsByTagName 方法搜索 HTML 标签名，返回符合条件的元素。它的返回值是一个类似数组对象（ HTMLCollection 实例），可以实时反映 HTML 文档的变化。如果没有任何匹配的元素，就返回一个空集
var paras = document.getElementsByTagName('p');如果传入 * ，就可以返回文档中所有 HTML 元素
var allElements = document.getElementsByTagName('*');document.getElementsByClassName()
document.getElementsByClassName 方法返回一个类似数组的对象 （ HTMLCollection 实例），包括了所有 class 名字符合指定条件的元素， 元素的变化实时反映在返回结果中
var elements = document.getElementsByClassName(names);由于 class 是保留字，所以 JavaScript 一律使用 className 表示 CSS 的 class
参数可以是多个 class ，它们之间使用空格分隔
var elements = document.getElementsByClassName('foo bar');document.getElementsByName()
document.getElementsByName 方法用于选择拥有 name 属性的 HTML 元素（比如 <form>
、<radio> 、<img> 等），返回一个类似数组的的对象 （ NodeList 实例），因为 name 属性相同的元素可能不止一个
// 表单为 <form name="itxiaotong"></form>
var forms = document.getElementsByName('itxiaotong');
document.getElementById()
document.getElementById 方法返回匹配指定 id 属性的元素节点。如果没有 发现匹配的节点，则返回 null
var elem = document.getElementById('para1');注意，该方法的参数是大小写敏感的。比如，如果某个节点的 id 属 性是 main ，那么 document.getElementById('Main') 将返回 null
document.querySelector()
document.querySelector 方法接受一个 CSS 选择器作为参数，返回匹配该选择器的元素节点。如果有多个节点满足匹配条件，则返回第一个匹配的节点。如果没有发现匹配的节点，则返回 null
var el1 = document.querySelector('.myclass');
document.querySelectorAll()
document.querySelectorAll 方法与 querySelector 用法类似，区别是返回一个 NodeList 对象，包含所有匹配给定选择器的节点
var elementList = document.querySelectorAll('.myclass');document对象_方法/创建元素
document.createElement()
document.createElement 方法用来生成元素节点，并返回该节点
var newDiv = document.createElement('div');document.createTextNode()
document.createTextNode 方法用来生成文本节点（ Text 实例），并返回该节点。它的参数是文本节点的内容
var newDiv = document.createElement('div');
var newContent = document.createTextNode('Hello');
newDiv.appendChild(newContent);document.createAttribute()
document.createAttribute 方法生成一个新的属性节点（ Attr 实例），并返回它
var attribute = document.createAttribute(name);var root = document.getElementById('root');
var it = document.createAttribute('itxiaotong');
it.value = 'it';
root.setAttributeNode(it);Element对象_属性
Element对象对应网页的 HTML 元素。每一个 HTML 元素，在 DOM 树上都会转化成一个Element节点对象（以下简称元素节点）
Element.id
Element.id 属性返回指定元素的 id 属性，该属性可读写
// HTML 代码为 <p id="foo">
var p = document.querySelector('p');
p.id // "foo"Element.className
className 属性用来读写当前元素节点的 class 属性。它的值是一个字符串，每个 class 之间用空格分割
// HTML 代码 <div class="one two three" id="myDiv"></div>
var div = document.getElementById('myDiv');
div.classNameElement.classList
classList 对象有下列方法
add() ：增加一个 class。
remove() ：移除一个 class。
contains() ：检查当前元素是否包含某个 class。
toggle() ：将某个 class 移入或移出当前元素。
var div = document.getElementById('myDiv');
div.classList.add('myCssClass');
div.classList.add('foo', 'bar');
div.classList.remove('myCssClass');
div.classList.toggle('myCssClass'); // 如果myCssClass 不存在就加入，否则移除
div.classList.contains('myCssClass'); // 返回true 或者 falseElement.innerHTML
Element.innerHTML 属性返回一个字符串，等同于该元素包含的所有 HTML 代码。该属性可读写，常用来设置某个节点的内容。它能改写所有元素节点的内容，包括<HTML>和<body>元素
el.innerHTML = '';
Element.innerText
innerText 和 innerHTML 类似，不同的是 innerText 无法识别元素，会直接渲染成字符串