DOM系列---基础篇

发文不易，若转载传播，请亲注明出处，谢谢！

DOM （Document Object Model） 即文档对象模型， 针对 HTML 和 XML 文档的 API （应用程序接口） 。DOM 描绘了一个层次化的节点树，运行开发人员添加、移除和修改页面的某一部分。DOM 产生于 网景公司及微软公司创始的 DHTML（动态 HTML） ，但如今它已经成为表现和操做页面标记的真正跨平台、语言中立的方式。

DOM 中的三个字母：

D（文档）能够理解为整个 Web 加载的网页文档；

O（对象）能够理解为相似 window 对象之类的东西，能够调用属性和方法，这里咱们说的是 document对象；

M（模型）能够理解为网页文档的树型结构。

DOM 有三个等级，分别是 DOM一、DOM二、DOM3。

PS：IE 中的全部 DOM 对象都是以 COM 对象的形式实现的，这意味着 IE 中的 DOM

可能会和其余浏览器有必定的差别。

 

一．DOM介绍

1.节点

加载 HTML 页面时， Web 浏览器生成一个树型结构， 用来表示页面内部结构。 DOM 将这种树型结构理解为由节点组成。

 

图1

 

从上图的树型结构，咱们理解几个概念，html 标签没有父辈，没有兄弟，因此 html 标签为根标签。head 标签是 html 子标签，meta 和 title 标签之间是兄弟关系。若是把每一个标签看成一个节点的话，那么这些节点组合成了一棵节点树。

PS：后面咱们常常把标签称做为元素，是一个意思。

 

2.节点种类：元素节点，属性节点，文本节点

例如：<div title="标签属性">测试 Div</div>

 

图2

 

二．查找元素

W3C 提供了比较方便简单的定位节点的方法和属性， 以便咱们快速的对节点进行操做。

分别为：

 

图3

 

1.getElementById()方法

getElementById()方法，接受一个参数：获取元素的 ID。若是找到相应的元素则返回该元素的 HTMLDivElement 对象，若是不存在，则返回 null。

document.getElementById('box');          //获取 id 为 box 的元素节点

注意：某些低版本的浏览器会没法识别 getElementById()方法，好比 IE5.0-，这时须要作一些判断，能够结合上章的浏览器检测来操做。

if (document.getElementById) {     //判断是否支持 getElementById

alert('当前浏览器支持 getElementById');

}

PS：一个程序要想写的健壮，须要不少的判断语句，方方面面考虑周到！

当咱们经过 getElementById()获取到特定元素节点时， 这个节点对象就被咱们获取到了，而经过这个节点对象，咱们能够访问它的一系列属性。

 

图4

 

 

例如：<div id=”box” title="标签属性">测试 Div</div>

document.getElementById('box').tagName;           //输出：DIV

document.getElementById('box').innerHTML;      //输出：测试 Div

PS：innerHTML获取这个元素节点里的文本(包含HTML标签)，纯文本不能包含标签，innerHTML获取的是这个元素的文本内容，而不是文本节点。

还能够赋值：

var box = document.getElementById('box');

box.innerHTML = '玩转<strong>JS</strong>'; //赋值

注意：上述赋值语句中，HTML标签会被页面解析，因此在页面显示的时候“JS”会加粗显示。

 

图5

 

例如：<div id="box" title="标题" class="pox" style="color:red;" bbb="aaa">测试Div</div>

var box = document.getElementById('box');

alert(box.id);                               //获取这个元素节点id属性的值，注意不是属性节点alert(box.title);                      //获取title属性的值

alert(box.style);                          //获取style属性对象

alert(box.style.color);               //获取style属性对象中color属性的值

alert(box.class);                          //貌似是保留字

alert(box.className);              //获取class属性的值

以上都是HTML属性的直接调用，固然后面还有几种方式能够调用。

alert(box.bbb);                            //自定义属性，直接获取，非IE不支持

PS：若是有浏览器不支持，那么必须作兼容操做，或者尽量不去使用。

一样：

也能够经过上述属性赋值：

document.getElementById('box').style.color = 'red';    //设置 style 对象中 color 的值

document.getElementById('box').className = 'box';   //设置 class

 

2.getElementsByTagName()方法

getElementsByTagName()方法将返回一个对象数组 HTMLCollection(NodeList)，这个数组保存着全部相同元素名的节点列表。

document.getElementsByTagName('*');       //获取全部元素

PS：IE 浏览器在使用通配符的时候，会把文档最开始的 html 的规范声明看成第一个元素节点，因此在求length的时候，IE会比谷歌火狐多一个。代码示例：

window.onload = function () {

         var all = document.getElementsByTagName("*");

         alert(all.length);

         alert(all[0].tagName);  //谷歌火狐返回HTML，IE返回！

};

 

HTML部分代码：

<ul>

         <li>1</li>

<li>2</li>

         <li>3</li>

</ul>

JS部分代码：

document.getElementsByTagName('li'); //获取全部 li 元素，返回数组

document.getElementsByTagName('li')[0]; //获取第一个 li 元素，HTMLLIElement

document.getElementsByTagName('li').item(0) //获取第一个 li 元素，HTMLLIElement

document.getElementsByTagName('li').length; //获取全部 li 元素的数目

 

获取body节点对象：

var body = document.getElementsByTagName('body')[0];

alert(body);    //返回 HTMLBodyElement对象，body节点

 

3.getElementsByName()方法

getElementsByName()方法能够获取相同名称(name)的元素，返回一个对象数组HTMLCollection(NodeList)。

document.getElementsByName('add')                                       //获取 input 元素

document.getElementsByName('add')[0].value             //获取 input 元素的 value 值

document.getElementsByName('add')[0].checked        //获取 input 元素的 checked 值

 

PS：对于并非 HTML 合法的属性，那么在 JS 获取的兼容性上也会存在差别，IE 浏览器支持自己合法的 name 属性，而不合法的就会出现不兼容的问题，例如，name 属性自己不是div里的属性，因此IE就忽略掉。

 

4.getAttribute()方法

getAttribute()方法将获取元素中某个属性的值。 它和直接使用.属性获取属性值的方法有必定区别。

document.getElementById('box').getAttribute('id');      //获取元素的 id 值

document.getElementById('box').id;                                 //获取元素的 id 值

document.getElementById('box').getAttribute('mydiv');        //获取元素的自定义属性值

上述获取自定义属性值的方法各浏览器都支持，区别于.属性的方法，代码以下：

document.getElementById('box').mydiv                  //获取元素的自定义属性值， 非IE不支持

document.getElementById('box').getAttribute('class');                   //获取元素的 class 值，IE 不支持

document.getElementById('box').getAttribute('className');        //非 IE 不支持

//跨浏览器获取className（注：不过貌似高版本的都修复了这个问题了！！！）

1 if (box.getAttribute('className') == null) {
2 
3          alert(box.getAttribute('class'));
4 
5 } else {
6 
7          alert(box.getAttribute('className'));
8 
9 }

 

PS： HTML 通用属性 style 和 onclick， IE7 更低的版本 style 返回一个对象， onclick 返回一个函数式。虽然 IE8 已经修复这个 bug，但为了更好的兼容，开发人员只有尽量避免使用 getAttribute()访问 HTML 属性了，或者碰到特殊的属性获取作特殊的兼容处理。

 

5.setAttribute()方法

setAttribute()方法将设置元素中某个属性和值。它须要接受两个参数：属性名和值。若是属性自己已存在，那么就会被覆盖。

document.getElementById('box').setAttribute('align','center');    //设置属性和值

document.getElementById('box').setAttribute('bbb','ccc');            //设置自定义的属性和值

PS：在 IE7 及更低的版本中，使用 setAttribute()方法设置 class 和 style 属性是没有效果的，虽然 IE8 解决了这个 bug，但仍是不建议使用。

 

6.removeAttribute()方法

removeAttribute()能够移除 HTML 属性。

document.getElementById('box').removeAttribute('style');           //移除属性

PS：IE6 及更低版本不支持 removeAttribute()方法。

 

三．DOM 节点

1.node节点属性

节点能够分为元素节点、属性节点和文本节点，而这些节点又有三个很是有用的属性，分别为：nodeName、nodeType 和 nodeValue。

 

图6

 

示例：<div id="box">测试Div<em>倾斜</em>结尾</div>

var box = document.getElementById('box');

//alert(box);

//alert(box.nodeName);           //获取元素节点的标签名，和tagName等价

//alert(box.nodeType);              //获取元素节点的类型值，1

alert(box.nodeValue);               //元素节点自己没有内容，null

注意：node自己把节点指针放在元素<div></div>上，也就是说，自己是没有value；若是要输出<div>xxx</div>中里面包含的文本内容，那么用前面的innerHTML（innerHTML只能用于元素节点）；

alert(box.innerHTML);              //获取元素节点里面的文本内容

PS：“测试Div<em>倾斜</em>结尾”，若是看成元素节点的文本内容（文本节点不等于文本内容），他就是一个总体。node只能获取当前节点的东西。

 

2.层次节点属性

节点的层次结构能够划分为： 父节点与子节点、 兄弟节点这两种。 当咱们获取其中一个

元素节点的时候，就可使用层次节点属性来获取它相关层次的节点。

 

图7

 

1).childNodes 属性

childeNodes 属性能够获取某一个元素节点的全部子节点，这些子节点包含元素子节点和文本子节点。

示例：<div id="box">测试Div<em>倾斜</em>结尾</div>

var box = document.getElementById('box');           //获取一个元素节点

alert(box.childNodes.length);                                     //3，获取这个元素节点的全部子节点

alert(box.childNodes[0]);                                             //获取第一个子节点对象

alert(box.childNodes[0].nodeValue);                          ////获取第一个子节点对象内容

PS：使用 childNodes[n]返回子节点对象的时候，有可能返回的是元素子节点，好比HTMLElement；也有可能返回的是文本子节点，好比 Text。元素子节点可使用 nodeName或者 tagName 获取标签名称，而文本子节点可使用 nodeValue 获取。

//示例：经过判断节点类型，来获取不一样的输出

        

 1  for (var i = 0; i < box.childNodes.length; i ++) {
 2 
 3                    if (box.childNodes[i].nodeType === 1) {
 4 
 5                             alert('元素节点：' + box.childNodes[i].nodeName);
 6 
 7                    } else if (box.childNodes[i].nodeType === 3) {
 8 
 9                             alert('文本节点：' + box.childNodes[i].nodeValue);
10 
11                    }
12 
13          }

 

innerHTML& nodeValue区别：

PS：在获取到文本节点的时候，是没法使用 innerHTML 这个属性输出文本内容的。这个非标准的属性必须在获取元素节点的时候，才能输出里面包含的文本（上面提到过了）。

PS： innerHTML 和 nodeValue 第一个区别， 就是取值的。 那么第二个区别就是赋值的时候， nodeValue 会把包含在文本里的 HTML 转义成特殊字符， 从而达到造成单纯文本的效果。

box.childNodes[0].nodeValue = '<strong>abc</strong>';      

//结果为：<strong>abc</strong>（纯文本，不会有加粗效果），且做用在文本节点上。

box.innerHTML = '<strong>abc</strong>';                              

//结果为：abc（页面中加粗显示），且做用在元素节点上。

 

2).firstChild 和 lastChild 属性

firstChild 用于获取当前元素节点的第一个子节点， 至关于 childNodes[0]； lastChild 用于获取当前元素节点的最后一个子节点，至关于 childNodes[box.childNodes.length - 1]。

alert(box.firstChild.nodeValue);              //获取第一个子节点的文本内容

alert(box.lastChild.nodeValue);           //获取最后一个子节点的文本内容

 

3).ownerDocument 属性

ownerDocument 属性返回该节点的文档对象根节点，返回的对象至关于 document。alert(box.ownerDocument === document); //true，根节点

 

4).parentNode、previousSibling、nextSibling 属性

parentNode 属性返回该节点的父节点；previousSibling 属性返回该节点的前一个同级节点；nextSibling 属性返回该节点的后一个同级节点。

alert(box.parentNode.nodeName);        //获取父节点的标签名

alert(box.lastChild.previousSibling);       //获取前一个同级节点

alert(box.firstChild.nextSibling);               //获取后一个同级节点

 

5).attributes 属性

attributes 属性返回该节点的属性节点集合。

document.getElementById('box').attributes                    //NamedNodeMap

document.getElementById('box').attributes.length;      //返回属性节点个数

document.getElementById('box').attributes[0];              //Attr，返回最后一个属性节点

document.getElementById('box').attributes[0].nodeType;             //2，节点类型

document.getElementById('box').attributes[0].nodeValue;            //属性值

document.getElementById('box').attributes['id'];                        //Attr，返回属性为 id 的节点

document.getElementById('box').attributes.getNamedItem('id');              //Attr

 

6).忽略空白文本节点（重点）

var body = document.getElementsByTagName('body')[0];              //获取 body 元素节点

alert(body.childNodes.length);                                   //获得子节点个数，IE3&&&非 IE

PS：在非 IE 中，标准的 DOM 具备识别空白文本节点的功能；而 IE 自动忽略了，若是要保持一致的子元素节点，须要手工忽略掉它。

法1：忽略空白文本节点

 1 function filterWhiteNode(node) {
 2 
 3                    var ret = [];
 4 
 5                    for (var i = 0; i < node.length; i ++) {
 6 
 7                             if (node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)) {
 8 
 9                                      continue;
10 
11                             } else {
12 
13                                      ret.push(node[i]);
14 
15                             }
16 
17                    }
18 
19                    return ret;
20 
21          }

 

//法2：移除空白文本节点（这个方法比较酷）

        

 1  function removeWhiteNode(node) {
 2 
 3                    for (var i = 0; i < node.length; i ++) {
 4 
 5                             if (node[i].nodeType === 3 && /^\s+$/.test(node[i].nodeValue)) {
 6 
 7 　　　　　　　　　　　　　　　　　　　　　　//下面第四部分会介绍移除节点方法removeChild()
 8 
 9                                      node[i].parentNode.removeChild(node[i]);
10 
11                             }
12 
13                    }
14 
15                    return node;
16 
17          }

 

问题：那么若是 firstChild、lastChild、previousSibling 和 nextSibling 在获取节点的过程当中遇到空白节点，咱们该怎么处理掉呢？

HTML代码部分：

<div id="box" >

 

         <p>测试Div1</p>

         <p>测试Div2</p>

         <p>测试Div3</p>

 

</div>

JS代码部分：

 1 window.onload = function () {
 2 
 3          var box = document.getElementById('box');
 4 
 5          alert(removeWhiteNode(box).firstChild.nodeName);
 6 
 7 };
 8 
 9 //移除空白节点
10 
11 function removeWhiteNode(node) {
12 
13          for (var i = 0; i < node.childNodes.length; i ++) {
14 
15                    if (node.childNodes[i].nodeType === 3 && /^\s+$/.test(node.childNodes[i].nodeValue)) {
16 
17                             node.childNodes[i].parentNode.removeChild(node.childNodes[i]);
18 
19                    }
20 
21          }
22 
23          return node;
24 
25 }

 

 

四．节点操做

DOM 不仅仅能够查找节点，也能够建立节点、复制节点、插入节点、删除节点和替换节点。

 

图8

 

1).write()方法

write()方法能够把任意字符串插入到文档中去。

document.write('<p>这是一个段落！</p>')';               //输出任意字符串

 

2).createElement()方法

createElement()方法能够建立一个元素节点。

document.createElement('p');       //建立一个元素节点(仅是建立并未插入)

 

3).appendChild()方法

appendChild()方法讲一个新节点添加到某个节点的子节点列表的末尾上。

var box = document.getElementById('box');                    //获取某一个元素节点

var p = document.createElement('p');                               //建立一个新元素节点<p>

box.appendChild(p);                                                                //把新元素节点<p>添加子节点末尾

 

4).createTextNode()方法

createTextNode()方法建立一个文本节点。

var text = document.createTextNode('段落');                  //建立一个文本节点

p.appendChild(text);                                                                //将文本节点添加到子节点末尾

 

5).insertBefore()方法

insertBefore()方法能够把节点建立到指定节点的前面。

box.parentNode.insertBefore(p, box); //把<div>以前建立一个节点（注意要先获取到父节点）

PS：insertBefore()方法能够给当前元素的前面建立一个节点，但却没有提供给当前元素的后面建立一个节点。那么，咱们能够用已有的知识建立一个 insertAfter()函数。

代码实现部分：

 1 function insertAfter(newElement, targetElement) {
 2 
 3 //获得父节点，就是body，可是不能直接使用body，若是层次较多，父节点不必定是body
 4 
 5          var parent = targetElement.parentNode;
 6 
 7 //若是最后一个子节点是当前元素，那么直接添加便可
 8 
 9          if (parent.lastChild === targetElement) {
10 
11                    alert('');
12 
13                    parent.appendChild(newElement, targetElement)
14 
15          } else {
16 
17 //不然，在当前节点的下一个节点以前添加
18 
19 //目标节点的前面添加，就能够用insertBefore；使用nextSibling获取目标节点
20 
21                    parent.insertBefore(newElement,targetElement.nextSibling);
22 
23          }
24 
25 }

 

PS：createElement 在建立通常元素节点的时候，浏览器的兼容性都还比较好。但在几个特殊标签上，好比 iframe、input 中的 radio 和 checkbox、button 元素中，可能会在 IE6,7

如下的浏览器存在一些不兼容。解决方法以下（注意：如下代码用到了浏览器检测文件browserdetect.js但不须要深究此文件）：

 1 var body = document.getElementsByTagName('body')[0];
 2 
 3          if (BrowserDetect.browser == 'Internet Explorer' && BrowserDetect.version <= 7) {
 4 
 5                    var input = document.createElement("<input type=\"radio\" name=\"sex\">");
 6 
 7          } else {
 8 
 9 //标准浏览器，使用标准方式
10 
11                    var input = document.createElement('input');
12 
13                    input.setAttribute('type', 'radio');
14 
15                    input.setAttribute('name', 'sex');
16 
17          }
18 
19         
20 
21          body.appendChild(input);
22 
23  

 

6).repalceChild()方法

replaceChild()方法能够把节点替换成指定的节点。

box.parentNode.replaceChild(p,box); //把<div>换成了<p>

 

7).cloneNode()方法

cloneNode()方法能够把子节点复制出来。

var box = document.getElementById('box');

var clone = box.firstChild.cloneNode(true); //获取第一个子节点，true 表示复制内容

box.appendChild(clone); //添加到子节点列表末尾

 

8).removeChild()方法

removeChild()方法删除指定节点

box.parentNode.removeChild(box); //删除指定节点

由衷感谢李老师~