JavaScript DOM基础

dom（document object model）即文档对象模型，针对html和xml文档的api（应用程序接口）。

一．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.节点

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

节点树

                                                                            html       根节点

                                               head                                                body                   子节点1

                            meta                          title                   h1                 p                  ul               子节点2

                                                                                                                        li       li         li             子节点3

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

ps：后面我们经常把标签称作为元素，是一个意思。

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

                                                                                         元素节点(div)

                                           文本节点  (测试)                                                         属性节点(title="标签属性")

<div title="属性节点">测试div</div>

二．查找元素

w3c提供了比较方便简单的定位节点的方法和属性，分别为：getelementbyid()、getelementsbytagname()、getelementsbyname()、getattribute()、setattribute()和removeattribute()。

元素节点方法

方法

说明

getelementbyid()

获取特定id元素的节点

getelementsbytagname()

获取相同元素的节点列表

getelementsbyname()

获取相同名称的节点列表

getattribute()

获取特定元素节点属性的值

setattribute()

设置特定元素节点属性的值

removeattribute()

移除特定元素节点属性 

1.getelementbyid()方法

getelementbyid()方法，接受一个参数：获取元素的id。如果找到相应的元素则返回该元素的htmldivelement对象，如果不存在，则返回null。

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

ps：上面的例子，默认情况返回null，这无关是否存在id="box"的标签，而是执行顺序问题。解决方法，1.把script调用标签移到html末尾即可；2.使用onload事件来处理js，等待html加载完毕再加载onload事件里的js。

window.onload = function () {//预加载html后执行

document.getelementbyid('box');

};

ps：id表示一个元素节点的唯一性，不能同时给两个或以上的元素节点创建同一个命名的id。某些低版本的浏览器会无法识别getelementbyid()方法，比如ie5.0-，这时需要做一些判断，可以结合上章的浏览器检测来操作。

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

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

}

当我们通过getelementbyid()获取到特定元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问它的一系列属性。

元素节点属性

属性

tagname

获取元素节点的标签名

innerhtml

获取元素节点里的内容，非w3c dom规范

document.getelementbyid('box').tagname;//div

document.getelementbyid('box').innerhtml;//测试div

html属性的属性

id

元素节点的id名称

title

元素节点的title属性值

style

css内联样式属性值

classname

css元素的类

document.getelementbyid('box').id;//获取id

document.getelementbyid('box').id = 'person';//设置id

document.getelementbyid('box').title;//获取title

document.getelementbyid('box').title = '标题'//设置title

document.getelementbyid('box').style;//获取cssstyledeclaration对象

document.getelementbyid('box').style.color;//获取style对象中color的值

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

document.getelementbyid('box').classname;//获取class

document.getelementbyid('box').classname = 'box';//设置class

alert(document.getelementbyid('box').bbb);//获取自定义属性的值，非ie不支持

2.getelementsbytagname()方法

getelementsbytagname()方法将返回一个对象数组htmlcollection(nodelist)，这个数组保存着所有相同元素名的节点列表。

document.getelementsbytagname('*');//获取所有元素

ps：ie浏览器在使用通配符的时候，会把文档最开始的html的规范声明当作第一个元素节点。

document.getelementsbytagname('li');//获取所有li元素，返回数组

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

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

document.getelementsbytagname('li').length;//获取所有li元素的数目

ps：不管是getelementbyid还是getelementsbytagname，在传递参数的时候，并不是所有浏览器都必须区分大小写，为了防止不必要的错误和麻烦，我们必须坚持养成区分大小写的习惯。

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属性，而不合法的就会出现不兼容的问题。

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不支持

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（只能操作当前节点）。

信息节点属性

节点类型

nodename(标签名)

nodetype

nodevalue(节点值)

元素

元素名称

1

null

属性名称

2

属性值

文本

#text

3

文本内容(不包含html)

document.getelementbyid('box').nodetype;//1，元素节点

2.层次节点属性

节点的层次结构可以划分为：父节点与子节点、兄弟节点这两种。当我们获取其中一个元素节点的时候，就可以使用层次节点属性来获取它相关层次的节点。

层次节点属性

childnodes

获取当前元素节点的所有子节点

firstchild

获取当前元素节点的第一个子节点

lastchild

获取当前元素节点的最后一个子节点

ownerdocument

获取该节点的文档根节点，相当与document

parentnode

获取当前节点的父节点

previoussibling

获取当前节点的前一个同级节点

nextsibling

获取当前节点的后一个同级节点

attributes

获取当前元素节点的所有属性节点集合

1.childnodes属性

childenodes属性可以获取某一个元素节点的所有子节点，这些子节点包含元素子节点和文本子节点。

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

alert(box.childnodes.length);//获取这个元素节点的所有子节点

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

ps：使用childnodes[n]返回子节点对象的时候，有可能返回的是元素子节点，比如 htmlelement；也有可能返回的是文本子节点，比如text。元素子节点可以使用nodename或者tagname获取标签名称，而文本子节点可以使用nodevalue获取。

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);

ps：在获取到文本节点的时候，是无法使用innerhtml这个属性输出文本内容的。这个非标准的属性必须在获取元素节点的时候，才能输出里面包含的文本。

alert(box.innerhtml);//innerhtml和nodevalue第一个区别

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个，非ie7个

ps：在非ie中，标准的dom具有识别空白文本节点的功能，所以在火狐浏览器是7个，而ie自动忽略了，如果要保持一致的子元素节点，需要手工忽略掉它。

function filterspacenode(nodes) {

var ret = [];//新数组

for (var i = 0; i < nodes.length; i ++) {

//如果识别到空白文本节点，就不添加数组

if (nodes[i].nodetype == 3 && /^\s+$/.test(nodes[i].nodevalue)) continue;

//把每次的元素节点，添加到数组里

ret.push(nodes[i]);

return ret;

ps：上面的方法，采用的忽略空白文件节点的方法，把得到元素节点累加到数组里返回。那么还有一种做法是，直接删除空白节点即可。

if (nodes[i].nodetype == 3 && /^\s+$/.test(nodes[i].nodevalue)) {

//得到空白节点之后，移到父节点上，删除子节点

nodes[i].parentnode.removechild(nodes[i]);

return nodes;

ps：如果firstchild、lastchild、previoussibling和nextsibling在获取节点的过程中遇到空白节点，我们该怎么处理掉呢？

function removewhitenode(nodes) {

for (var i = 0; i < nodes.childnodes.length; i ++) {

if (nodes.childnodes[i].nodetype === 3 && 

/^\s+$/.test(nodes.childnodes[i].nodevalue)) {

nodes.childnodes[i].parentnode.removechild(nodes.childnodes[i]);

四．节点操作

dom不单单可以查找节点，也可以创建节点、复制节点、插入节点、删除节点和替换节点。

节点操作方法

write()

这个方法可以把任意字符串插入到文档中

createelement()

创建一个元素节点

appendchild()

将新节点追加到子节点列表的末尾

createtextnode()

创建一个文件节点

insertbefore()

将新节点插入在前面

repalcechild()

将新节点替换旧节点

clonenode()

复制节点

removechild()

移除节点

1.write()方法//一般用于测试 因为会覆盖前面的html

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()函数。

function insertafter(newelement, targetelement) {

//得到父节点

var parent = targetelement.parentnode;

//如果最后一个子节点是当前元素，那么直接添加即可

if (parent.lastchild === targetelement) {

parent.appendchild(newelement);

} else {

//否则，在当前节点的下一个节点之前添加

parent.insertbefore(newelement, targetelement.nextsibling);

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表示复制内容 false 只克隆标签

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

8.removechild()方法

removechild()方法可以把

box.parentnode.removechild(box);//删除指定节点