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

DOM 中的三个字母:

D(文档)可以理解为整个 Web 加载的网页文档;

O(对象)可以理解为类似 window 对象之类的东西,可以调用属性和方法,这里我们说的是 document对象;

M(模型)可以理解为网页文档的树型结构。

DOM 有三个等级,分别是 DOM1、DOM2、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); //删除指定节点

DOM系列基础知识的更多相关文章

  1. DOM系列---基础篇

    DOM系列---基础篇   DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树, ...

  2. day29—JavaScript中DOM的基础知识应用

    转行学开发,代码100天——2018-04-14 JavaScript中DOM操作基础知识即对DOM元素进行增删改操作.主要表现与HTML元素的操作,以及对CSS样式的操作.其主要应用知识如下图: 通 ...

  3. DOM系列---基础篇[转]

    DOM (Document Object Model) 即文档对象模型, 针对 HTML 和 XML 文档的 API (应用程序接口) .DOM 描绘了一个层次化的节点树,运行开发人员添加.移除和修改 ...

  4. javascript DOM 操作基础知识小结

    经常用到javascript对dom,喜欢这方便的朋友也很多,要想更好的对dom进行操作,这些基础一定要知道的.   DOM添加元素,使用节点属性  <!DOCTYPE html PUBLIC ...

  5. javascript中DOM部分基础知识总结

    1.DOM介绍      1.1 DOM概念      文档对象模型(Document Object Model),它定义了访问和处理HTML文档的标准方法.现在我们主要接触到的是HTML DOM. ...

  6. html5系列.基础知识

    兼容性问题 创建一个html5页面 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" ...

  7. selenium+python自动化测试系列---基础知识篇(1、HTML基础知识1)

    1.什么是HTML HTML是一种描述网页的语言.HTML指超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言(markup language ...

  8. ldap系列-基础知识

    来源:关键字排名 ldap 是什么? LDAP(Lightweight Directory Access Protocol)即轻量级目录访问协议,提供信息服务.那啥是目录服务呢? 目录服务是一种特殊的 ...

  9. JVM菜鸟进阶高手之路十(基础知识开场白)

    转载请注明原创出处,谢谢! 最近没有什么实战,准备把JVM知识梳理一遍,先以开发人员的交流来谈谈jvm这块的知识以及重要性,依稀记得2.3年前用solr的时候老是经常oom,提到oom大家应该都不陌生 ...

随机推荐

  1. Java Script 基础总结

    1学习ajax需要一点CSS的基础和JavaScipt基础 今天重温一下Javascrpt基础 1.<script type="text/javascript">< ...

  2. CodeForces-1132C-Painting the Fence-(前缀和)

    You have a long fence which consists of nn sections. Unfortunately, it is not painted, so you decide ...

  3. 简单的实现微信获取openid

    微信公众平台获取openid在公众号的开发中有很多用途,前段时间为实现用户使用公众号在登录一次以后可以免密登陆而使用了openid.开发过程中遇到了一些问题,在这里向需要且还没有获取到openid的米 ...

  4. Java中的IO流(一)

    一,IO流的分类 A,按照操作的对象不同可分为字节流与字符流 B,按照流的方向不同可分为输入(指从外部存储设备拿文件到内存)流也叫读与输出(指从内存把文件写入到外部存储设备)流也叫写 注:字节流可以操 ...

  5. iptables做端口转发

    一.用iptables做本机端口转发 比如80端口转8080端口 代码如下:   iptables -t nat -A PREROUTING -p tcp --dport 80 -j REDIRECT ...

  6. CentOS上开启MySQL远程访问权限

    在CentOS上安装完MySQL后,默认不开始远程访问控制.可以进行如下设定开启. 登录MySQL: mysql -uroot -p 如需修改密码,第一次: mysqladmin -u root pa ...

  7. centos7防火墙以设置以及关闭selinux

    一.CentOS 7.X 关闭SELinux 1.查看 getenforce permissive 或者 enforcing模式 2.临时设置 setenforce 1 成为permissive模式 ...

  8. Collection集合总结,List和set集合的用法,HashSet和LinkedHashSetde用法

    首先:Collection是List集合和Set集合的父类,同时,它们三个都为接口,不能直接实例化,所以需要,List和set的子类来实例化. List的子类: ArrayList类和LinkedLi ...

  9. EF CodeFirst学习笔记004--足够聪明

    将BlogTypes注释掉,但因为Blogs中定义了BlogType 这样类型的属性,所以Ef会聪明的找到BlogType类. public class BlogEntities:DbContext ...

  10. 模拟银行业务的JS实现

    /*开户.存款.挂失.补卡.取款.转账.余额查询.密码修改.交易查询.锁定账号.解锁账号等*//*C#第7天 请参考by-Qy*/ using System;using System.Collecti ...