DOM(文档对象模型)是W3C指定的一套技术规范，用来描述JavaScript脚本怎样与HTML或XML文档进行交互的Web 标准。DOM规定了一系列标准接口，允许开发人员通过标准方式访问文档结构，操作网页内容，控制样式和行为等。
文章要点：
- 了解DOM
- 使用JavaScript操作结点
- 使用JavaScript操作元素节点
- 使用JavaScript操作文本和属性结点
- 使用JavaScript操作文档结点
1，DOM基础
DOM级：
第一级别： core
第二级： HTML XML Range Events Traversal Views StyleSheets
第三级： Events(MutationEvents，HTMLEvents，UIEvents)，Views(UIEvents，css)
2，使用结点
2.1 节点类型
DOM规定：整个文档是一个文档结点，每个标签是一个元素节点，元素包含的文本是文本节点，元素的属性是一个属性节点，注释属于注释节点，如此等等。每个节点都有一个nodeType属性。
例子：使用nodeType检索当前文档中包含元素的个数。
<!doctype html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<h1>DOM</h1>
<script>
function count(n){
var num = 0;
if(n.nodeType == 1)
num++;
var son = n.childNodes;
for(var i = 0;i<son.length;i++){
num+=count(son[i]);
}
return num;
}
console.log(count(document));
</script>
</body>
</html>
2.2 节点名称和值
使用结点的nodeName和nodeValue
var node = document.getElementsByTagName("h1")[0];
if(node.nodeType == 1)
var value = node.nodeName;
console.log(value);
2.3 节点关系
DOM把文档视为一种树结构。节点之间的关系包括：上下级别的父子关系，相邻级别的兄弟关系。
2.4 访问节点
ownerDocument parentNode childNodes firstChild lastChild nextSibling previousSibling
2.5 操作结点
appendChild() cloneNode() hasChildNodes() insertBefore() normalize() removeChild() replaceChild()
3，使用文档结点
在DOM中，Document类型表示文档结点，HTMLDocument是Document的子类，document对象是HTMLDocument的实例，它表示HTML文档。同时，document对象又是window对象的属性，因此可以在全局作用域中直接访问document对象。document节点具有如下特征：
- nodeType值为9
- nodeName值为"#document"
- nodeValue值为null
- parentNode值为null
- ownerDocument值为null
- 其子节点可能是:DocumentType, Element ProcessingInstruction 或Comment
3.1 访问文档子结点
documentElement childNodes
var html = document.documtneElement; var html = document.childNodes[0];
3.2 访问文档信息
HTMLDocument的实例对象document包含很多属性，用来访问文档信息，简单说明如下。
- title：设置或返回title标签中的文本信息
- lastModified：返回文档最后被修改的日期和时间
- URL：返回当前文档的完整URL，即地址栏中显示的地址信息
- domain：返回当前文档的域名
- referrer：返回链接到当前页面的那个页面的URL。
3.3 访问文档元素
document对象包含多个访问文档内元素的方法，简单说明如下：
- getElementById()：返回指定id属性值的元素
- getElementsByTagName()：返回指定标签名称的元素节点
- getElementsByName()：返回所有指定名称(name属性值)的元素节点。该方法多用于表单结构中，用于获取单选按钮组或复选框组
3.4 访问文档集合
除了属性和方法，document对象还定义了一些特殊的集合，这些集合都是HTMLCollection对象，为访问文档常用对象提供了快捷方式如下：
- document.anchors：返回文档中所有Anchor对象，即所有带有name特性的<a>标签
- document.forms：返回文档中所有Form对象，与document.getElementByTagName("form")得到的结果相同
- document.images
- document.links：返回文档中所有Area和Link对象，即所有带href特性的<a>标签
3.5 使用HTML5 Doucment
1，readyState
- loading：正在加载文档
- complete：已经加载完文档
功能类似onload事件处理程序，表示文档已经加载完毕
if(document.readyState == "complete"){
//执行操作
}
2，compatMode
document.compatMode返回文档的渲染模式，标准模式("CSS1Compat") 怪异模式("BackCompat")
3，head
引用文档的head元素
var head = document.head||document.getElementsByTagName("head")[0];
4,charset
4，使用元素节点
Element类型是最常用的节点类型，它具有以下特征：
- nodeType值为1
- nodeName为元素的标签名称，也可以使用tagName属性。在HTML中，返回标签名始终为大写，在脚本中比较需要全部小写化:if(element.tagName.toLowerCase() == "div"){}
- nodeValue值为null
所有HTML元素都是HTMLElement类型或者其子类型的实例，HTMLElement又是Element的子类，在继承Element类型时添加了一些属性，添加的这些属性分别对应每个HTML元素下列标准特性。
id title lang dir className
4.1 访问元素
getElementById() getElementsByTagName()
4.2 遍历元素
parentNode nextSibling previousSibling firstChild 和lastChild
4.3 创建元素
createElement()
var p = document.createElement("p");
document.body.appendChild(p);
4.4 复制节点
cloneNode()方法可以创建一个节点的副本，
4.5 插入节点
appendChild() insertBefore()
4.6 删除节点
removeChild()
<div id="red">
<h1>xiaobaicai</h1>
<h1>xiaohuihui</h1>
</div>
<script>
var red = document.getElementById("red");
var h1 = document.getElementsByTagName("h1")[0];
red.removeChild(h1);
</script>
4.7 替换节点
replaceChild()
nodeObject.replaceChild(new_node,old_node);
4.8 获取焦点元素
HTML5新增DOM焦点管理功能，使用document.activeElement属性可以引用DOM中当前获得了脚垫的元素，元素获取焦点的方式包括：页面加载，用户输入，（如按tab键）和在脚本中调用focus()方法。
<input type="text">
<input type="text">
<input type="text">
<script>
var inputs = document.getElementsByTagName("input");
for(var i=0;i<inputs.length;i++){
inputs[i].onfocus = function(e){
document.activeElement.style.backgroundColor = "yellow";
}
inputs[i].onblur = function(e){
this.style.backgroundColor = "#fff";
}
}
</script>
4.9 检测包含节点
contains()
5，使用文本节点
文本节点由Text类型表示，包含纯文本内容，或转义后的HTML字符，但不能包含HTML代码。Text节点具有以下特征:
- nodeType值为3
- nodeName值为"#text"
- nodeValue值为节点所包含的文本
5.1 访问文本节点
利用innerText获取文本内容
<p>hello</p>
<script>
var text = document.getElementsByTagName("p")[0];
alert(text.innerText);
</script>
5.2 创建文本节点
document.createTextNode(data)
<script>
var element = document.createElement("div");
element.className = "red";
var textNode = document.createTextNode("Hello world!");
element.appendChild(textNode);
document.body.appendChild(element);
</script>
5.3 操作文本节点
appendData(string) deleteData(start,length) insertData(start,length) replaceData(start,length,string) splitText(offset) substringData(start,length)
5.4 读取HTML字符串
使用innerHTML
<p id="hi">hello</p>
<script>
var hi = document.getElementById("hi");
alert(hi.innerHTML);
</script>
<div id="hi">
<p>hello</p>
</div>
<script>
var hi = document.getElementById("hi");
alert(hi.innerHTML);
</script>
5.5 插入HTML字符串
innerHTML属性
innerHTML属性可以修改元素中的内容
<div id="hi">
<p>hello</p>
</div>
<script>
var hi = document.getElementById("hi");
hi.innerHTML = "helloworld";
</script>
5.6 替换HTML字符串
outerHTML
6，使用文档片段节点
7，使用属性节点
7.1 访问属性节点
setAttribute()
<img id="img1" src="" />
<script>
var img=docyment.getElementById("img1");
img.setAttribute("src","http://xiaobaicai.com");
</script>
7.2 读取属性值
getAttribute()
<img id="img1" src="" />
<script>
var img=document.getElementById("img1");
alert(img.getAttribute("id"));
</script>
7.3 设置属性值
setAttribute()
7.4 删除属性
removeAttribute()
7.5 使用类选择器
document.getElementsByClassName()
7.6 自定义属性
自定义属性需要使用data- 作为前缀， 可以通过dataset属性访问自定义属性
<div id="box" data-myname="xiaobaicai">helloworld</div>
<script>
var div = document.getElementById("box");
alert(div.dataset.myname);
</script>
