DOM（文档对象模型），是一个API（应用程序编程接口），它将HTML或XML文档描绘成一个层次化的节点树，允许开发人员添加、移除、修改文档中的某一部分。
10.1 节点层次
10.1.1 Node类型
js中有一个Node类型（类似于Date类型、Object类型），js中的所有节点都继承自Node类型。
nodeType属性
表明节点的类型，总共有12个，用数字可兼容
node.nodeType == 1 // 元素节点
node.nodeType == 2 // 属性节点
node.nodeType == 3 // 文本节点
node.nodeType == 8 // 注释节点
node.nodeType == 9 // Document节点
// 其他就不一一列举了
nodeName和nodeValue属性
对于元素节点，nodeName为元素的标签名，nodeValue为null
对于属性节点，nodeName为元素的属性名，nodeValue为属性值
对于文本节点，nodeName为#text，nodeValue为文本内容
节点关系
子节点
childNodes
是一个伪数组，可用数字下标访问其中的节点，其是有生命的对象，子节点增加时它的元素也会自动增加
PS:转化为数组的方法有Array.from(arr);[...arr];Array.prototype.slice.call(arr,0)
父节点
parentNode
兄弟节点,无则为null
previousSibling,nextSibling
父节点与首尾子节点
firstChild,lastChild
所有节点共有的，指向整个文档的文档节点
ownerDocument
操作节点
添加子节点
appendChild(新节点)
在末尾加入，若传入的参数为已存在的节点，则原节点被移动到新位置
添加子节点
insertBefore(新节点，参照节点)
添加到参照节点的前一个位置，若第二个参数为null，效果同appendChild
替换子节点
replaceChild(新节点，被替换节点)
返回被替换的节点
移除子节点
removeChild(被移除的节点)
返回被移除的节点
PS：移除和替换的节点仍为文档所有，不过在文档中已经没有了自己的位置
其他方法
克隆节点
cloneNode(布尔值)
布尔值为true，则为深复制，复制节点及整个子节点数
布尔值为false，则为浅复制，只复制节点本身
不会复制节点中的js属性，如事件处理程序
初始化文本
normalize()
对调用该方法的节点的后代节点，删除空文本节点，合并相邻文本节点
10.1.2 Document类型
document对象是HTMLDocument的一个实例，而HTMLDocument继承自Document类型
document对象也是window对象的一个属性
文档的子节点
1.Element，如<html>元素
引用：document.documentElement
补充：引用<body>可用document.body
2.DocumentType，如<!DOCTYPE html>
引用：document.doctype
3.Comment，备注
文档信息
标题栏
document.title = 'xxx'
完整的URL，不可设置
document.URL
域名(www.xxx.com)，可设置
document.domain
常用于页面中包含其他子域的框架或内嵌框架中，将内外两个页面的document.domain设置为一样的（紧绷->松散，如p2p.xxx.com->xxx.com），则可以通信（跨域安全限制的问题）
跳转到当前页面的那个页面的URL，不可设置
document.referrer
查找元素
通过元素的id查找
document.getElementById("xxx")
若多个元素id值相同，取第一个，无则返回null
通过标签名查找
document.getElementsByTagName("xxx")
返回一个动态集合，*则为查找所有元素
通过name查找
document.getElementsByName("xxx")
特殊集合
document.anchors // 文档所有带name的<a>元素
document.forms // 文档所有<form>元素
document.images // 文档所有<img>元素
document.links // 文档所有带href的<a>元素
DOM一致性检测
document.implementation.hasFeature("要检测的DOM功能","版本号")
返回布尔值，若浏览器支持则返回true
建议用该方法检测外，同时用能力检测
文档写入
将输出流写入到网页中
document.write("HTML的字符串"+js代码+"HTML的字符串")
document.writeln("HTML的字符串") // 在字符串的末尾添加一个换行符\n
1.由script标签包着，放在HTML代码中，解析到时将字符串解析为HTML输出
2.可动态地包含外部资源，"<script src=\"xxx\">"+"</scr"+"ipt>"
注意末尾要将字符串分开写，防止让浏览器认为其与外部的头<script>对应
3.页面完全加载完后再执行，会重写页面
window.onload = function(){document.write("xxx")}
打开和关闭网页的输出流
document.open()
document.close()
10.1.3 Element类型
标签名
nodeName或者tagName
返回标签名，建议比较时用.toLowerCase()
标准特性
id
title:附加说明，鼠标移上即显示
lang
dir
className
可获取，也可修改
取得特性
getAttribute("属性名") // id/class/title...
传入属性名，返回属性值
对于style和onclick这样的事件处理程序，返回的是字符串，非css对象和js函数
设置特性
setAttribute("属性名","值")
有则替换，无则创建
对于标准特性，也可用 元素.属性名=属性值 的形式
对于自定义特性则不可以
移除特性
removeAttribute("属性名")
attributes属性
该属性继承自NameNodeMap对象，该对象有以下方法
getNamedItem("属性名")
removeNamedItem("属性名")
setNamedItem(节点)
item(数字)
[数字]
注意：返回的为节点，非属性值，需要进一步.nodeValue
因此为操作元素特性时一般不用attributes属性，遍历时也用
创建元素
document.createElement("标签名")
通过 .属性 的方式继续添加属性
通过appendChild(),insertBefore(),replaceChild()插入文档树
元素的子节点
子节点
元素.childNodes
<ul>
<li>111</li>
<li>222</li>
<li>333</li>
</ul>
IE中，<ul>有三个子节点，即三个<li>元素
其他浏览器中，有七个子节点，还包括四个文本节点
因此遍历节点时，最好对其nodeType进行判断
后代节点
元素.getElementsByTagName("")
只会返回当前元素的后代元素
10.1.4 Text类型
to be continue...
