JavaScript之DOM基础

概述

DOM(Document Object Model)文档对象模型，针对Html和XML的文档的对象API，是一项 W3C (World Wide Web Consortium) 标准。文档对象模型（DOM）是中立于平台和语言的接口，它容许程序和脚本动态地访问、更新文档的内容、结构和样式。本文主要以一些简单的小例子，简述前端开发中，DOM的常见内容，仅供学习分享使用，若有不足之处，还请指正。

获取元素

DOM操做必须等待HTML文档加载完毕，才能够访问。html将标签节点，称为元素，若是存在元素，则返回html的javascript对象；若是不存在，则范围null。

经过ID获取元素

一个页面每一个标签元素只能有一个id,表示惟一性。经过getElementById获取标签对应的JavaScript对象，建议区分大小写，以避免浏览器之间不兼容。以下所示：

 1 var box = document.getElementById('A01');
 2 document.write(box);//返回：[object HTMLDivElement] 
 3 document.write(box.tagName);//获取标签名：DIV
 4 alert(box.innerHTML);//以文本形式获取标签的子内容
 5 document.write(box.id);//返回元素的惟一ID,如：A01
 6 document.write(box.title);//返回元素的标题属性
 7 document.write(box.style);//返回元素的样式对象。输出：[object MSStyleCSSProperties]
 8 document.write(box.style.color);//返回样式中设置的颜色属性，输出：blue 
 9 document.write(box.class);//class是保留字，不能使用，会报错，改用以下替代：
10 document.write(box.className);//返回样式名称，输出：box 
11 //自定义属性，非IE不支持
12 box.innerHTML='玩转JS DOM';//从新赋值，会覆盖掉以前的内容

经过tagName获取元素

一个文档中，相同标签的元素能够有多个，因此经过getElementsByTagName获取的是对应标签的数组列表对象，以下所示：

1 var box=document.getElementsByTagName('li');
2 document.write(box);//返回的是HTML列表数组集合对象，如：[object HTMLCollection] 
3 document.write(box.length);//数组集合的长度，元素个数。从0开始
4 document.write(box.item(0));//返回：[object HTMLLIElement] 
5 document.write(box[0].tagName);//返回对应标签 LI
6 document.write(box[0].innerHTML);//返回指定位置的纯文本内容

获取body

一个文档对象，也能够有多个body，因此经过tagName获取的也是数组列表对象，经过索引来访问具体内容。以下所示：

1 var box =document.getElementsByTagName('body')[0];
2 document.write(box);//返回body对象，输出：[object HTMLBodyElement] 

经过name获取元素

经过name获取元素，即经过元素的name属性来获取，且name不是惟一的，因此获取到的也是数组列表对象，以下所示：

1 var box=document.getElementsByName('A');
2 document.write(box);//返回一个数组集合：[object HTMLCollection] 
3 document.write(box[0]);//返回第一个元素：[object HTMLDivElement]
4 document.write(box[0].name);//对于IE，由于name在div中是不合法的属性，因此在IE:输出undefined ，其余则正常。
5 document.write(box[0].getAttribute('name'));//经过此方法在IE中能够获取name的值
6 document.write(box[0].getAttribute('style'));//IE中，返回的是：color: blue; 字符串
7 alert(box[0].getAttribute('style'));
8 document.write(box[0].getAttribute('class'));//IE浏览器不支持，其余能够
9 document.write(box[0].getAttribute('className'));//IE支持，其余不能够

设置属性

当获取元素后，如何给元素动态的设置属性呢，能够经过setAttribute方法来设置，以下所示：

1 box[0].setAttribute('title','玩转，hexkj');//设置属性，两个参数：属性，属性值，会覆盖掉以前的值
2 box[0].setAttribute('align','center');
3 //设置自定义属性
4 box[0].setAttribute('test','hexkj');//也能够设置成功
5 box[0].removeAttribute('style');//移除属性

节点类型

DOM的节点类型，常见的有如下几种，以下所示：

 

 元素节点

元素节点，即html标签元素节点，节点类型为1

1 var box = document.getElementById('A01');
2 document.write(box.nodeName);//获取元素的标签名，和tagName同样，输出：DIV
3 document.write(box.nodeType);//获取元素的节点类型值，输出：1 
4 document.write(box.nodeValue);//当前节点的value,div为空，只能获取当前节点，不能获取子节点的内容
5 document.write(box.innerHTML);//输出纯文本内容，是一个总体
6 document.write(box.childNodes);//子节点集合。返回：[object NodeList] 
7 document.write(box.childNodes.length);//子节点的长度，输出：3

文本节点

文本节点，即只有文本内容的节点。

1 //[object HTMLUListElement]UL节点 元素节点
2 //[object Text]文本节点 属性节点
3 for (var i=0;i<box.childNodes.length;i++) {
4     document.writeln(box.childNodes[i].nodeName);
5     document.writeln(box.childNodes[i].nodeType);
6     document.writeln(box.childNodes[i].nodeValue);
7     document.writeln('<br />');
8 }

属性节点

属性节点，即标签元素的属性，经过attributes来访问，以下所示：

1 document.write(box.attributes.length);//属性节点的个数
2 document.write(box.attributes[0].nodeType);//属性类型 ，输出：2
3 document.write(box.attributes[0].nodeName);//属性名称，输出：title
4 document.write(box.attributes[0].nodeValue);//属性的值，输出：我是AO1 
5 document.write(box.attributes['title'].nodeValue);//获取指定属性的值，本例输出：我是AO1 

节点赋值

能够经过nodeValue和innerHTML进行赋值，可是在设置HTML时，会有差别，以下所示：

1 box.childNodes[0].nodeValue='hello js dom!!!';//能够设置节点内容
2 box.childNodes[0].nodeValue='hello <strong>js</strong> dom!!!';//可是不能设置html内容：hello <strong>js</strong> dom!!!
3 box.innerHTML='hello <strong>js</strong> dom!!!';//能够设置html属性

获取相关节点

能够与节点相关的其余节点，如第一个节点，最后一个节点，父节点，等相关内容，以下所示：

1 var box = document.getElementById('A01');
2 document.write(box.firstChild.nodeValue);//获取第一个节点
3 document.write(box.lastChild.nodeValue);//获取最后一个节点
4 document.write(box.ownerDocument);//返回当前的文档对象，输出：[object HTMLDocument] 
5 document.write(box.ownerDocument.nodeName);//输出：#document
6 document.write(box.parentNode);//返回当前节点的父节点，本例输出：[object HTMLDivElement] 
7 document.write(box.firstChild.nextSibling);//返回第一个节点的下一个同级节点，本例输出：[object HTMLUListElement] 
8 document.write(box.lastChild.previousSibling);//返回最后一个节点的上一个同级节点，本例输出：[object HTMLUListElement] 

忽略空白节点

空白节点对于HTML元素节点来讲，是没有太大意义的，要如何去除呢，有两种方法均可以过滤掉空白节点，以下所示：

 1 //忽略空白字符
 2 var box = document.getElementById('A02');
 3 document.write(box.childNodes.length);//IE浏览器，输出是7，其中包括文本节点
 4 document.write(box.childNodes[0]);//输出：[object Text]  表名第一个是文本节点，且内容为空
 5 //如下函数过滤掉空白节点
 6 function filterWhiteNodes(node){
 7     var ret=[];
 8     for (var i=0;i<node.length;i++) {
 9         if (node[i].nodeType==3 && /^\s+$/.test( node[i].nodeValue)) {
10         continue;
11         } else{
12         ret.push(node[i]);
13         }
14     }
15         return ret;
16 }
17 document.write(filterNodes(box.childNodes).length);//输出：3
18 //输出空白文本节点
19 function removeWhiteNodes(node){
20     for (var i=0;i<node.length;i++) {
21     if (node[i].nodeType==3 && /^\s+$/.test( node[i].nodeValue)) {
22         node[i].parentNode.removeChild(node[i]);
23     }
24     }
25     return node;
26 }
27 document.write(removeWhiteNodes(box.childNodes).length);//输出：3
28 document.write(removeWhiteNodes(box.childNodes)[0].nodeName);//输出P标签

建立元素节点

经过createElement来建立元素，经过insertBefore来插入指定元素以前，以下所示：

1 var p=document.createElement('P');//建立一个元素
2 var text=document.createTextNode('DDDDD');//建立一个文本节点
3 p.appendChild(text);//将文本节点附加一个子元素节点
4 box.appendChild(p);//将p元素节点，添加到box后面
5 box.insertBefore(p,box.childNodes[1]);//在第2个节点以前添加节点，其中可能会包括空白文本节点

如何插入到指定元素以后呢，以下所示：

 1 function insertAfter(newElement,targetElement){
 2     //获得父节点
 3     var parent=targetElement.parentNode;
 4     if(parent.lastChild==targetElement){
 5         //若是当前已是最后一个节点，则直接添加
 6         parent.appendChild(newElement);
 7     }else{
 8         parent.insertBefore(newElement,targetElement.nextSibling);
 9     }
10 }
11 //在A02,SPAN之间，添加标签
12 insertAfter(p,box);

替换节点

经过replaceChild替换节点，以下所示：

1 var span=document.getElementsByTagName('span')[0];
2 var em=document.createElement('em');
3 span.parentNode.replaceChild(em,span);

克隆节点

经过cloneNode方法克隆节点，有一个参数，true：深度克隆，包括内容 false:浅克隆，只克隆标签。

1 //cloneChild克隆节点
2 var clone = box.cloneNode(true);//true：深度克隆，包括内容 false:浅克隆，只克隆标签
3 box.parentNode.appendChild(clone);

删除节点

经过removeChild来删除节点

1 box.removeChild(box.firstChild);//删除第一个节点
2 box.parentNode.removeChild(box);//删除本身

DOM进阶

DOM自己的属性相关内容，以下所示：

 1 alert(document.nodeType);//输出9表明文档根
 2 alert(document.nodeName);//输出：#document
 3 alert(document.nodeValue);//null
 4 alert(document.firstChild.nodeName);//第一个节点，输出html
 5 alert(document.firstChild.nodeType);//输出：10
 6 alert(document.documentElement);//获取文档的根元素，输出：[object HTMLHtmlElement]
 7 alert(document.documentElement.nodeName);//输出:HTML
 8 alert(document.documentElement.nodeType);//输出：1
 9 alert(document.body);//获取body元素，输出：[object HTMLBodyElement]
10 alert(document.body.nodeType);//输出：1
11 alert(document.body.nodeName);//输出：BODY
12 alert(document.doctype);//获取文档类型 输出：[object DocumentType]
13 alert(document.doctype.nodeType);//输出：10   
16 alert(document.title);//返回文档的标题
17 alert(document.URL);//返回文档的URL，必须是从服务器访问才生效
18 alert(document.referrer);//返回上一个url路径，即跳转到当前页面的url
19 alert(document.domain);//返回当前的域名
20 alert( document.images.length);//返回文档中图片的数组

合并节点

经过normalize方法来合并相邻的文本节点，为一个节点，以下所示：

1 var box=document.getElementById("A01");
2 //合并相邻节点
3 var text1=document.createTextNode('Mr.');
4 var text2=document.createTextNode('Hex');
5 box.appendChild(text1);
6 box.appendChild(text2);
7 //alert(box.childNodes.length);//此时会发现A01的子节点数是2
8 box.normalize();//此方法用户合并相邻的文本节点为一个节点
9 alert(box.childNodes.length);//此时会发现A01的子节点数是1

分离节点

经过splitText方法，分离文本节点为两个相邻的节点，以下所示：

1 //分离节点，原始：<div id="A01">Mr.Hex</div>
2 alert(box.firstChild.nodeValue);//输出Mr.Hex
3 box.firstChild.splitText(3);//分离前三个字符为一个节点
4 alert(box.firstChild.nodeValue);//输出Mr.

操做节点内容

1 box.firstChild.deleteData(0,3);//删除节点中的字符，起始位置，删除个数
2 box.firstChild.insertData(0,'Hello,');//添加字符，起始位置，添加的字符串
3 box.firstChild.replaceData(0,2,'Miss');//替换字符串 起始位置，替换字符数，要替换的字符
4 alert(box.firstChild.substringData(0,2));//返回截取字符串，起始位置，截取字符个数

注释节点

注释节点即文档中的注释，以<!-- -->包裹，以下所示：

1 var c = document.getElementsByTagName("!");
2 alert( c.length);//经测试IE11获取不到，长度为0

滚动到可见位置

当元素默认看不到时，须要手动滚动条才能够显示，能够经过scrollIntoView默认打开时，滚动到指定位置。以下所示：

1 //浏览器文档呈现模式
2 alert(document.compatMode) ;//是否为经过标准模式，或混合模式 CSS1Compat
3 //<div id="A03" style="height: 800px;"></div>
4 box.scrollIntoView(true);//将节点设置为滚动可见节点,即会将滚动调试，滚动到显示节点的位置上

判断是否包含元素节点

判断一个元素是否包含指定元素，经过contains方法来判断。 以下所示：

 1 var box=document.getElementById("A02");
 2 alert(box.childNodes.length);//会包含空白节点
 3 alert(box.children.length);//不会包含空白节点和注释,和文本元素，不过children是非标准的
 4 var box=document.getElementById("A01");
 5 var p=box.children[0];
 6 alert(box.contains(p));//返回true，是否包含节点
 7 var box=document.getElementById("A02");
 8 //var t=box.children[0];
 9 alert(box.childNodes.length);//输出3
10 //alert(box.children.length);//输出0
11 var t=box.childNodes[1];
12 alert(t.nodeValue);//注释节点
13 alert(box.contains(t));//检测不出文本节点

兼容浏览器，由于有的浏览器不支持contains方法，以下所示：

 1 var box=document.getElementById("A01");
 2 var p=box.children[0];
 3 function contains(refNode,otherNode){
 4     if(typeof refNode.contains !='undefined'){
 5         return refNode.contains(otherNode);
 6     }else if(typeof refNode.compareDocumentPosition !='undefined'){
 7         return refNode.compareDocumentPosition(otherNode)>16;
 8     }else{
 9         //或者判断otherNode的递归判断父节点是否是refNode
10         var node=otherNode.parentNode;
11         do{
12             if(node==refNode){
13                 return true;
14             }else{
15                 node=otherNode.parentNode;
16             }
17         }while (node!=null)
18     }
19 }
20 alert(contains(box,p));//返回true

innerText和outerText的差别

innerText不会覆盖掉元素自己，outerText会在赋值时覆盖掉元素自己，以下所示：

 1 var box=document.getElementById("A01");
 2 alert(box.innerText);//获取元素包含的文本，不包含html内容，且火狐不兼容
 3 alert(box.textContent);//支持火狐的3.0
 4 box.innerText='<strong>Hex Js</strong>';//赋值的时，会进行转义输出
 5 
 6 alert(box.outerText);//获取内容和innerText同样
 7 box.outerText='Mr. Hex';//可是赋值时会将元素删掉
 8 alert(document.getElementById("A01"));//输出null
 9 
10 alert(box.outerHTML);//获取内容和innerHTML同样
11 box.outerHTML='<strong>Hex Js</strong>';//可是赋值时会将元素删掉
12 alert(document.getElementById("A01"));//输出null

备注

己亥杂诗（清-龚自珍）

浩荡离愁白日斜，吟鞭东指即天涯。

落红不是无情物，化做春泥更护花。