DOM
DOM:文档对象模型
D（文档）可以理解为整个Web加载的网页文档；
O（对象）可以理解为类似window对象之类的东西，可以调用属性和方法，这里我们说的是document对象；
M（模型）可以理解为网页文档的树型结构。
DOM有三个等级，分别是DOM1、DOM2、DOM3，并且DOM1在1998年10月成为W3C标准。DOM1所支持的浏览器包括IE6+、Firefox
、Safari、Chrome和Opera1.7+。
PS:IE中的所有DOM对象都是以COM对象的形式实现的，这意味着IE中的DOM可能会和其他浏览器有一定的差异。
节点分为三类：
1.元素节点：其实就是标签<div></div>
2.文本节点：其实就是标签内的纯文本，测试Div
3.属性节点：其实就是标签的属性，id="box"
为什么查找不到元素？
DOM操作必须等到HTML文档加载完毕，才可以获取
var box=document.getElementById('box');
alert(box); //[object HTMLDivElement]
//IE是以COM实现的DOM，所以只会返回一个object
解决方法：
window.onload=function(){
var box=document.getElementById('box');
alert(box);
}
------------------------
元素节点属性
属性 说明
tagName 获取元素节点的标签名
innerHTML 获取元素节点里的内容，非W3C DOM规范，但是兼容性很好
var box=document.getElementById('box');
alert(box.tagName); //DIV
alert(box.innerHTML); //如何使用? <i class="iconfont"></i>
<div id="box" title="标题" class="pox" style="color:red;">测试Div</div>
var box=document.getElementById('box');
alert(box.id); //获取这个元素节点id属性的值，注意不是属性节点
alert(box.title); //获取title属性的值
alert(box.style.color); //获取style属性对象中color属性的值
alert(box.className); //获取class属性的值
自定义属性：
<div bbb="aaa">测试Div</div>
var box=document.getElementById('box');
alert(box.bbb); //自定义属性直接获取，非IE不支持
如果有浏览器不支持，那么必须做兼容操作，或者尽可能不去使用
<div id="box" title="标题" class="pox" style="color:red;">测试Div</div>
var box=document.getElementById("box");
box.innerHTML="玩转<strong>JS</strong>" //赋值，可以解析HTML，不是单纯文本了包含了HTML
----------------------------------------------------------------
getElementsByTagName
var lis=document.getElementsByTagName("li");
alert(lis.length); //返回数组集合的数量
alert(lis[0]); //HTMLLIElement,li的节点对象
alert(lis[0].tagName);
alert(lis[0].innerHTML);
获取body
var body=document.getElementsByTagName('body')[0];
alert(body); //[object HTMLBodyElement]
获取全部
var all=document.getElementByTagName("*");
alert(all.length);
//火狐浏览器的firebug打开后，会自动创建一个div，所以会多算一个
alert(all[0].tagName);
//IE浏览器比火狐和谷歌多一个节点，是吧<!的文档声明也算进去了
//这个影响不大，因为我们只需要body里面的
-----------------------------------------------------------------------
getElementsByName()
<div name="test">测试</div>
var box=document.getElementsByName("test")[0];
alert(box);
//IE浏览器在获取不合法的HTML中的name时，会获取不到
//也就是说name属性本身不是div里的属性，所以IE就忽略掉了
//在表单上是合法的
<input type="checkbox" name="test" value="测试" checked="checked"/>
//input中有合法的name属性，所以IE也就支持了。
-----------------------------------------------------------------------
var box=document.getElementById('box');
alert(box.getAttribute('style')); //非IE返回的是style字符串，
alert(box.getAttribute('bbb')); //自定义属性可以获取到，全部兼容
alert(box.getAttribute('class')); //IE无法获取 非IE无法获取
//跨浏览器获取className 这样也可兼容，但是没有什么意义，直接用上面的box.className
if(box.getAttribute('className')==null){
alert(box.getAttribute('class'));
}else {
alert(box.getAttribute('className'))
}
PS:为了更好的兼容，开发人员只有尽可能避免使用getAttribute()访问HTML属性，或者碰到特殊的属性获取做特殊的兼容
处理。
alert(box.onclick); //均返回函数式
alert(box.getAttribute('onclick')); //IE7及以下会返回函数式，非IE返回字符串
不建议使用setAttribute
box.setAttribute('title','标题'); //创建一个属性和属性值
box.setAttribute('style','color:green'); //IE7及以下，style和onclick没有效果，避免使用
box.removeAttribute('style'); //IE6及更低版本不支持这个属性
---------------------------------------------------------------------------------------------------
<div id="box">哈哈</div>
var box=document.getElementById('box');
alert(box.nodeName); //获取元素节点的标签名，和tagName等价 DIV
alert(box.nodeType); //获取元素节点的类型值，1
alert(box.nodeValue); //元素节点本身没有内容，null
//node本身把节点指针放在元素<div></div>上，也就是说，本身是没有value的
//如果要输出<div>xxx</div>中里面包含的文本内容，那么前面讲过用innerHTML
alert(box.innerHTML); //获取元素节点里面的文本内容
//文本节点不等于文本内容
<div id="box">测试Div<em>倾斜</em>结尾</div>
var box=document.getElementById('box');
alert(box.childNodes); //NodeList集合，返回当前元素节点所有的子节点列表
alert(box.childNodes.length); //3个子节点
//3个子节点为：测试Div<em>倾斜</em>结尾
//第一个子节点为：测试Div，这个节点称为：文本节点
//第二个子节点为：<em>倾斜</em>，这个节点称为：元素节点
//第三个子节点为：结尾，这个节点称为：文本节点
alert(box.childNodes[0]); //[object Text]表示一个文本节点对象
alert(box.childNodes[0].nodeType); //3 表示文本节点
alert(box.childNodes[0].nodeValue); //获取文本节点的文本内容
alert(box.childNodes[0].nodeName); //#text,文本节点没有标签名
//通过判断节点类型，来获取不同的输出
window.onload=function(){
var box=document.getElementById('box');
for(var i=0;i<box.childNodes.length;i++){
if(box.childNodes[i].nodeType===1){
alert('元素节点：'+box.childNodes[i].nodeName);
}else if(box.childNodes[i].nodeType===3){
alert('文本节点：'+box.childNodes[i].nodeValue);
}
}
}
-------------------------------------------------------------
<div id="box">测试Div<em>倾斜</em>结尾</div>
var box=document.getElementById('box');
alert(box.childNodes[0].nodeValue); //获取第一个子节点
alert(box.childNodes[box.childNodes.length-1].nodeValue); //获取最后一个子节点
alert(box.firstChild.nodeValue); //获取第一个子节点
alert(box.lastChild.nodeValue); //获取最后一个子节点
ownerDocument属性返回该节点的文档对象根节点，返回的对象相当于document。
alert(box.ownerDocument===document); //true,根节点
alert(box.ownerDocument.nodeName); //#document
alert(box.ownerDocument.nodeType); //9
<div id="box">测试Div<em>倾斜</em>结尾</div>
alert(box.parentNode);
alert(box.firstChild.nextSibling);
alert(box.firstChild.nextSibling.nodeName); //下一个同级节点的标签名
alert(box.lastChild.previousSibling.nodeName); //上一个同级节点的标签名
<div id="box" title="aaa" class="bbb">测试Div<em>倾斜</em>结尾</div>
alert(box.attributes.length); //3个属性
alert(box.attributes[0]); //Attr,属性节点
alert(box.attributes[0].nodeType); //2 属性节点的类型值
alert(box.attributes[0].nodeValue); //bbb 第一个属性的属性值
alert(box.attributes[0].nodeName); //class 第一个属性的属性名
//遍历的时候是从后向前的
alert(box.attributes['title'].nodeName); //title
alert(box.attributes['title'].nodeValue); //aaa
------------------------------------------------------------------------------
空白节点
<div id="box" title="aaa" class="bbb">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
window.onload=function(){
var box=document.getElementById('box');
alert(box.childNodes.length); //7 或者3
alert(filterWhiteNode(box.childNodes).length);
}
//忽略空白字符
function filterWhiteNode(node){
var ret=[];
for(var i=0;i<node.length; i++){
if(node[i].nodeType===3&&/^\s+$/.test(node[i].nodeValue)){
continue;
}else {
ret.push(node[i])
}
}
return ret;
}
//移除空白字符 这个是重点
function removeWhiteNode(node){
for(var i=0;i<node.length; i++){
if(node[i].nodeType===3&&/^\s+$/.test(node[i].nodeValue)){
node[i].parentNode.removeChild(node[i]);
}
}
return node;
}
<div id="box">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
window.onload=function(){
var box=document.getElementById('box');
document.createElement('p'); //只是创建了一个元素节点p，还没有添加到文档中去
box.appendChild(p); //将新节点p添加到id=box的div里的子节点列表的末尾上
var text=document.createTextNode('测试Div4');
p.appendChild(text);
}
<div id="box">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
window.onload=function(){
var box=document.getElementById('box');
document.createElement('p'); //只是创建了一个元素节点p，还没有添加到文档中去
//box.parentNode就是body
box.parentNode.insertBefore(p,box); //在box的父节点添加一个p，就是在box前面添加一个元素节点
}
<span>开始</span>
<div id="box">
<p>测试Div1</p>
<p>测试Div2</p>
<p>测试Div3</p>
</div>
<span>结束</span>
window.onload=function(){
var box=document.getElementById('box');
document.createElement('p'); //只是创建了一个元素节点p，还没有添加到文档中去
insertAfter(p,box);
}
//如果在div的后面，span的前面添加，就没有方法可用了
function insertAfter(newElement,targetElement){
//得到父节点，就是body，但是不能直接使用body，如果层次较多，父节点不一定是body
var parent=targetElement.parentNode;
if(parent.lastChild===targetElement){
parent.appendChild(newElement);
}else {
//span 节点的前面添加，就可以用insertBefore,那么span节点怎么获取，nextSibling
parent.insertBefore(newElement,targetElement.nextSibling);
}
}
------------------------------------------------------------------
引入一个浏览器检测的文件
window.onload=function(){
var body=document.getElementByTagName('body')[0];
if(BrowserDetect.browser=='Internet Explorer' && BrowserDetect.version<=7){
var input=document.createElement("<input type=\"radio\" name=\"sex\">");
}else {
var input=document.createElement("input");
input.setAttribute('type','radio');
input.setAttribute('name','sex');
}
body.appendChild(input);
}
---------------------------------------------------------------------
window.onload=function(){
var span=document.getElementByTagName('span')[0];
var em=document.createElement('em');
span.parentNode.replaceChild(em,span);
}
---------------------------------------------------------------------
window.onload=function(){
var box=document.getElementById('box');
var clone=removeWhiteNode(box).firstChild.cloneNode(false); //克隆一个节点,如果是true就把标签内的文本也克
隆，如果是false，只克隆标签
box.appendChild(clone);
}
function removeWhiteNode(node){
for(var i=0;i<node.childNodes.length; i++){
if(node.childNodes[i].nodeType===3&&/^\s+$/.test(node..childNodes[i].nodeValue)){
node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
}
}
return node;
}
删掉第一个子节点
window.onload=function(){
var box=document.getElementById('box');
box.removeChild(removeWhiteNode(box).firstChild); //删除box第一个子节点
//删除整个box
box.parentNode.removeChild(box);
}
