dom描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;
一 dom介绍
d(文档):可以理解为整个web加载的网页文档;
o(对象):可以理解为类似window对象之类的东西,可以调用属性和方法,这里说的是document对象;
m(模型):可以理解为网页文档的树形结构;
1.节点
加载html页面时,web浏览器生成一个树形结构,用来表示页面内部结构;
dom将这种节点结构理解为由节点组成;
html元素为根节点;head元素是html的子节点;meta元素和title元素之间是兄弟关系;
2.节点种类:元素节点/文本节点/属性节点
测试div
元素节点 => div;
属性节点 => title=元素属性
文本节点 => 测试div二 查找元素
w3c提供了比较方便简单的定位节点的方法和属性,以便我们快速的对节点进行操作;
dom(document object model)即文档对象模型,针对html和xml文档的api(应用程序接口); dom描绘了一个层次化的节点树,运行开发人员可以添加/移除和修改页面的某一部分;
元素节点查找方法
方法 说明
getelementbyid() 获取特定id元素的节点;
getelementsbytagname() 获取相同元素的节点列表;
getelementsbyname() 获取相同名称的节点列表;
getattribute() 获取特定元素节点属性的值;
setattribute() 设置特定元素节点属性的值;
removeattribute() 移除特定元素节点属性;
1.getelementbyid()
// 方法接收一个参数:获取元素的id;
// 如果找到相应的元素则返回该元素的htmldivelement对象;如果不存在,则返回null;
document.getelementbyid('box'); // [object htmldivelement];
// 当我们通过getelementbyid()获取到特定元素节点时,这个节点对象就被我们获取到了;
// 而通过这个节点对象,我们可以访问它的一系列属性;
(1).访问元素节点的属性
属性 说明
tagname 获取元素节点的标签名;
innerhtml 获取元素节点里的内容,非w3c dom规范;
document.getelementbyid('box').tagname; // =>div;
document.getelementbyid('box').innerhtml; // =>测试div;
(2).访问html通用属性
属性 说明
id 元素节点的id名称;
title 元素节点的title属性值;
style css内联样式属性值;
classname css元素的类;
document.getelementbyid('box').id; // =>id;
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='pox'; // 设置class;
document.getelementbyid('box').bbb; // 获取自定义属性的值,非ie不支持;
2.getelementsbytagname()
// 方法返回一个对象数组htmlcollection(nodelist)数组,这个数组保存着所有相同元素名的节点列表;
document.getelementsbytagname('*'); // 利用通配符获取所有元素;
// ps:ie在使用通配符时,会把文档最开始的html的规范声明当作第一个元素节点;
document.getelementsbytagname('li'); // =>[object htmlcollection];获取所有li元素;
document.getelementsbytagname('li').[0]; // 获取第一个li元素;
3.getelementsbyname()
获取相同名称(name)设置的元素,返回一个对象数组htmlcollection(nodelist);
document.getelementsbyname('add'); // 获取具有name='add'的input元素集合;
// ps:对于并不是html合法的属性,那么在js获取的兼容性上也会存在差异;
// ie支持合法的name属性,但对于自定义的属性会出现不兼容问题;
4.getattribute()
方法将获取元素中某个属性值;
但它和直接使用.attr获取属性值的方法有一定区别;
document.getelementbyid('box').getattribute('mydiv'); // 获取自定义属性值;
document.getelementbyid('box').mydiv; // 获取自定义属性值,仅ie支持;
5.setattribute()
方法将设置元素中某个属性和值;接收两个参数:属性名和值;
如果属性本身已存在,那么就会覆盖;
document.getelementbyid('box').setattribute('align','center'); // 设置属性和值;
// ps:在ie7及以下,使用setattribute()方法设置class和style属性没有效果;
6.removeattribute()
方法可以移除html属性;
document.getelementbyid('box').removeattribute('style'); // 移除style样式属性;
三 dom节点
1.node节点属性
// 节点可以分为:元素节点/属性节点和文本节点;
// 这些节点都有三个属性:nodename/nodetype和nodevalue;
信息节点属性
节点类型 nodename nodetype nodevalue
元素 元素名称 1 null
属性 属性名称 2 属性值
文本 #text 3 文本内容
document.getelementbyid('box').nodetype; // =>1; 元素节点;
2.层次节点属性
// 层次节点可以划分为:父节点与子节点/兄弟节点;
// 当我们获取其中一个元素节点的时候,就可以使用层次节点属性来获取它相关层次的节点;
节点关系示意图
层次节点属性
属性 说明
childnodes 读取当前元素节点的所有子节点;
firstchild 读取当前元素节点的第一个子节点;
lastchild 获取当前元素节点的最后一个子节点;
ownerdocument 获取该节点的文档根节点,相当于document;
parentnode 获取当前节点的父节点;
previoussibling 获取当前节点的前一个同级节点;
nextsibling 获取当前节点的后一个同级节点;
attributes 获取当前元素节点的所有属性节点集合;
(1).childnodes属性
属性获取某一个元素节点的所有子节点,这些子节点包含元素节点和文本节点;
ps:使用childnodes[n]返回子节点对象的时候,有可能返回的是元素子节点,比如:htmlelement;
也可能返回的是文本子节点,比如:text;
元素子节点可以使用nodename或者tagname获取标签名称;而文本子节点可以使用nodevalue获取;
var box = document.getelementbyid('box');
for(var i=0; i 判断是元素节点,输出元素标签名;
if(box.childnodes[i].nodetype === 1){
console.log('元素节点:'+box.childnodes[i].nodename);
判断是文本节点,输出文本内容;
}else if(box.childnodes[i].nodetype ===3){
console.log('文本节点:'+box.childnodes[i].nodevalue);
}
}
ps1:在获取到文本节点(重点在于已经不是元素节点)的时候,是无法使用innerhtml这个属性输出文本内容的;
这个非标准的属性必须在获取元素节点的时候,才能输出里面包含的文本;
alert(box.innerhtml); innerhtml和nodevalue第一个区别;
ps2:innerhtml和nodevalue在赋值的时候,nodevalue会把包含在文本里的html转义成特殊的字符,从而达到形成纯文本的效果;
而innerhtml会解析文本里的特殊字符;
box.childnodes[0].nodevalue = 'abc'; =>abc;
box.innerhtml = 'abc'; =>abc(样式加粗);
(2).firstchild和lastchild属性
firstchild = childnodes[0];获取当前元素的第一个子节点;
lastchild = childnodes[box.childnodes.length-1];获取当前元素最后一个子节点;
(3).ownerdocument属性
返回该节点的文档对象根节点,返回的对象相当于document;
alert(box.ownerdocument === document); // =>true;根节点;
(4).parentnode/previoussibling/nextsibling属性
parentnode:返回该节点的父节点;
previoussibling:返回该节点的前一个同级节点;
nextsibling:返回该节点的后一个同级节点;
alert(box.parentnode.nodename); // 获取父节点的标签名;
alert(box.firstchild.nextsibling); // 获取第二个节点;
alert(box.lastchild.previoussibling); // 获取倒数第二个节点;
(5).attributes属性
属性返回该节点的属性节点集合;
alert(document.getelementbyid('box').attributes); // =>namednodemap;
(6).忽略空白文本节点
var body = document.getelementsbytagname('body')[0];// 获取body元素节点; alert(body.childnodes.length); // 非ie=7; ie=3; // ps:在非ie中,标准的dom具有识别空白文本节点的功能,而ie自动忽略了; function filterspacenode1(nodes){ // 新数组; var ret = []; for(var i=0; i
// dom不单单可以查找节点,也可以创建节点/复制节点/插入节点/删除节点和替换节点
节点操作方法
方法 说明
write() 这个方法可以把任意字符串插入到文档中;
createelement() 创建一个元素节点;
appendchild() 将新节点追加到子节点列表的末尾;
createtextnode() 创建一个文件节点;
insertbefore() 将新节点插入在前面;
replacechild() 将新节点替换旧节点;
clonenode() 复制节点;
removechild() 移除节点;
(1).write()方法
// write()方法可以把任意字符串插入到文档中去;
document.write('这是一个段落!
'); // 解析后文字;
(2).createelement()方法
createelement()方法可以创建一个元素节点;
document.createelement('p'); // [object htmlparagraphelement];
(3).appendchild()方法
appendchild()方法将一个新节点添加到某个节点的子节点列表的末尾上;
var box = document.getelementbyid('box');
var p = document.createelement('p'); // 创建一个新元素节点;
box.appendchild(p); // 把新元素节点添加子节点末尾;
(4).createtextnode()方法
该方法创建一个文本节点;
var text = document.createtextnode('段落');
p.appendchild(text); // 将文本节点添加到子节点末尾;
(5).insertbefore()方法
// 该方法可以把节点添加到指定节点的前面; box.parentnode.insertbefore(p,box); // 在之前添加一个; box.insertbefore(newnode,null); // 将newnode添加到box自列表的最后节点; //ps:insertbefore()方法可以给当前元素的前面创建一个节点,但没有提供给当前元素的后面创建一个节点; function insertafter(newelement,targetelement){ // 得到父节点; var parent = targetelement.parentnode; // 如果最后一个子节点是当前元素,那么直接添加即可; if(parent.lastchild === targetelement){ parent.appendchild(newelement); }else{ // 否则,在当前节点的下一个节点之前添加;达成在当前节点后面添加节点的需求; parentnode.insertbefore(newelement,targetelement.nextsibling); } }
(6).replacechild()方法
该方法可以把节点替换成指定的节点;
box.parentnode.replacechild(p,box); // 把
换成了;
(7).clonenode()方法
// 该方法可以把子节点复制出来;复制后返回的节点副本属于文档所有,但并没有为它指定父节点;
// 参数为true:执行深复制,就是复制节点及其整个子节点树;
// 参数为false:执行浅复制,只复制节点本身;
var box = document.getelementbyid('box');
var clone = box.firstchild.clonenode(true); // 获取第一个子节点,true表示复制内容;
box.appendchild(clone); // 添加到子节点列表末尾;
(8).removechild()方法
该方法删除指定节点;
box.parentnode.removechild(box);
小结:在下一章~