Dom脚本化文档
一、选取文档元素
（1）用指定的id属性
var section1 = document.getElementsById(‘section1‘);
注意：在低于IE8的浏览器中，getElementById()对匹配元素的Id不分大小写，也返回匹配name的元素。
（2）用指定的name属性
定义：name属性只存在少数的HTML元素，包括表单、表单元素、<iFrame>和<img>元素
var radioButtons = document.getElementsByName("form_1");
注意：为某些HTML元素设置name属性值将自动转换为Window对象中创建的属性，对Document对象也来类似。
<form name = "form_1"> var form_1 = document.form_1;
（3）通过标签名获取元素
var lis = document.getElementsByTagName("li");
注意：
Elements类中也定义getElementsByTagName()方法，其原理和Documents版本一样，但是它只选取调用该方法的后代元素
<ul id="ul_1">
<li></li>
<li></li>
<li></li>
</ul>
var ul = document.getElementById("ul_1");
var lis = ul.getElementsByTagName("li");
（4）通过css类选择元素
注意：
Elements类中也定义getElementsByClassName ()方法，其原理和Documents版本一样，但是它只选取调用该方法的后代元素
// 查找以"log"命名并且有"error"和"fatal"类的元素的所有后代
var log = document.getElementById("log");
var fatal = log.getElementsByClassName("error fatal");
（5）通过CSS选择器选取元素 querySelectorAll()方法和querySelector()方法
querySelector()方法：接收一个CSS选择符，返回与该模式匹配的第一个元素，如果没有找到匹配的元素，返回null.
A在document类型调用
//取得body元素
var body = document.quetySelector("body");
B、在Element类型调用
会在该元素后代元素的范围内查找匹配的元素
querySelectorAll()方法：接收一个CSS选择符，但是返回的事所有匹配的元素而不仅仅是一个元素。这个方法返回的事一个NodeList的实例
调用类型：Document、DocumentFragment和Element
例子：
//取得所有<p>元素中的所有<strong>元素
var strongs = document. querySelectorAll("p strong");
matchesSelector()方法
定义：这个方法接收一个参数，如果调用元素与该选择符匹配，返回true;否则返回false.
if （document.body.matchesSelector("body.page1")）{
//true
}
二、文档结构和遍历
1、节点的类型
（1）节点访问属性
nodeType:表明节点类型
nodeName:节点名字
nodeValue:节点值
（2）节点的关系属性
子节点:
childNodes属性
firstchild属性
lastchild属性
父节点:
parentNode
同胞节点:
previousSibling属性
nextSibling属性
三、设置和获取属性的方法
1、获取元素对象的属性
（1）getAttribute()
（2）attributes属性，代表元素的所有属性。可以用数字索引访问，也可以用属性名索引
document.body.attributes[0]; document.body.attributes["onload"]; docuemnt.body.bgcolor
2、setAttribute()
3、hasAttribute()
4、remove Attribute()
注：数据集属性
在HTML5文档中，任意以“data-”为前缀的小写属性名字都是合法的，HTML5还在Element对象上定义dataset属性，该属性指代一个对象，它的属性对应该去掉前缀data-属性。如dataset.x 应该保存data-x的值。待连字符的属性应用于驼峰命名法的属性名：data-jquery-test属性应该变成dataset.jqueryTest属性
三、元素节点的内容
1、innerHTML
2、textContent
3、innetText
四、创建、插入、删除节点
1、创建
（1）createElement()方法可以创建一个元素节点。
document.createElement(‘p‘); //创建一个元素节点
（2）createTextNode()方法创建一个文本节点。
var text = document.createTextNode(‘段落‘); //创建一个文本节点 p.appendChild(text); //将文本节点添加到子节点末
（3）cloneNode()方法可以把子节点复制出来。
var box = document.getElementById(‘box‘); var clone = box.firstChild.cloneNode(true); //获取第一个子节点， true表示复制内容 box.appendChild(clone); //添加到子节点列表末尾
2、插入
（1）appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。
var box=document.getElementById(‘box‘); //获取某一个元素节点 var p=document.createElement(‘p‘); //创建一个新元素节点<p> box.appendChild(p); //把新元素节点<p>添加子节点末尾
（2）insertBefore()方法可以把节点创建到指定节点的前面。
box.parentNode.insertBefore(p, box)
3、替换和删除
（1）repalceChild()方法
replaceChild()方法可以把节点替换成指定的节点。
box.parentNode.replaceChild(p,box); //把<div>换成了<p>
（2）removeChild()方法
removeChild()方法可以把
box.parentNode.removeChild(box); //删除指定节点
五、操纵样式
1、操作元素
（1）行内样式，操作style属性， 可读可写，style属性仅仅只能获取行内的CSS样式，对于另外两种形式内联<style>和链接<link>方式则无法获取到
例子：
var box = document.getElementById(‘box‘); //获取box box.style.cssFloat.style.fontSize;
（2）、行内、 内联和链接getComputedStyle或 currentStyle可读不可写
window对象下提供了getComputedStyle()方法。 接受两个参数，需要计算的样式元素，第二个伪类(:hover)，如果没有没有伪类，就填null。PS： IE不支持这个DOM2级的方法，但有个类似的属性可以使用currentStyle属性。
varbox=document.getElementById(‘box‘); varstyle=window.getComputedStyle? window.getComputedStyle(box,null):null||box.currentStyle
（3）、内联和链接cssRules或 rules， 可读可写
var sheet = document.styleSheets[0] ; //CSSStyleSheet var rules = sheet.cssRules|| sheet.rules; //CSSRuleList，样式表的规则集合列表 varrule = rules[0]; //CSSStyleRule，样式表第一个规则
2、脚本化CSS类
因为class在JavaScript中是保留字，所以HTML属性class在JavaScript中应该使用className。className中能指定零个或一个类名，如果有多个类名 就无法工作了。
e.className = "attention";
e.className = "Null";
HTML5解决了这个问题，为每个元素定义了classList属性：一个只读的类数组对象。定义了add()和remove()方法（添加和删除一个类名）。toggle()表示如果不存在类名就添加一个，否则删除它。contains()方法检测class属性中是否包含一个指定的类名。
六、专有扩展
1、文档模式
从 IE6开始开始区分标准模式和混杂模式(怪异模式)，主要是看文档的声明。 IE为document对象添加了一个名为 compatMode属性，这个属性可以识别 IE浏览器的文档处于
什么模式如果是标准模式，则返回 CSS1Compat，如果是混杂模式则返回 BackCompat。
if (document.compatMode == ‘CSS1Compat‘) {
alert(document.documentElement.clientWidth);
} else {
alert(document.body.clientWidth);
}
2、children属性
由于子节点空白问题， IE和其他浏览器解释不一致。虽然可以过滤掉，但如果只是想得到有效子节点，可以使用 children属性
var box = document.getElementById(‘box‘); alert(box.children.length); //得到有效子节点数目
3、contains()方法
断一个节点是不是另一个节点的后代，我们可以使用 contains()方法。这个方法是 IE率先使用的，开发人员无须遍历即可获取此信息。
var box = document.getElementById(‘box‘); alert(box.contains(box.firstChild)); //true
4、滚动
document.getElementById(‘box‘).scrollIntoView(); //设置指定可见