简介
DOM模型的全称是:DocumentObject Model, 即:文档对象模型,它定义了操作文档对象的接口。
WEB页面的HTML文档,document就是根节点,其它的子对象就是子结点。
DOM模型在AJAX开发中的作用。
在ajax中,DOM模型其实是最核心的结构,是所有ajax开发的基础架构。如果没有DOM模型,就没有办法在客户端改变页面的内容,所有的局部刷新,异步请求也就无从实现。熟练掌握DOM模型的相关技术,才算真正掌握了ajax开发精髓。
过程
关于浏览器装载和显示页面的大致过程叙述如下:
1.下载源代码
2.通过页面源代码加载相关内容到内存,也就是根据HTML源码在内存中构建相关DOM对象。
3.根据DOM对象的相关属性,来进行显示。
结点
概念:在DOM模型中,整个文档就是由层次不同的多个节点组成,可以说结点代表了全部内容。
类型:元素结点、文本结点和属性结点。
<fontid=“font1” color=“red”>hello DOM!</font>
文本节点和属性结点都看作元素结点的子结点
我们一般所说的结点指的就是元素结点。
引用:
1.直接引用结点
使用document.getElementById()引用指定id的结点
使用document.getElementsByTagName(“a”),将所有<a>元素结点放到一个数组中返回。
使用document.getElementsByName(“abc”),将所有name属性为”abc”的元素结点放到一个数组中返回。
2.间接引用节点
①引用子结点
每个结点都有一个childNodes集合属性,类型是数组对象,表示该结点的所有子结点的集合。这些子结点按照它在文档中出现的顺序排列,因此可以通过索引来依次访问各个子结点。
firstChild,lastChild
②引用父节点
DOM模型中,除了根结点,每个结点都仅有一个父节点,可以用parentNode属性来引用。
③引用兄弟结点
element.nextSibling; //引用下一个兄弟结点
element.previousSibling; //引用上一个兄弟结点
如果该结点没有相应的兄弟结点,则属性返回null.
浏览器差异问题
原则:如果ie和火狐发生差异冲突,尽量解决。如果太复杂不想去做,一切以IE为准。
属性:
* nodeName:元素结点返回结点类型(即,标记名称);属性结点返回undefined;文本节点返回"#text".
* nodeType:元素节点返回1,属性节点返回2,文本节点返回3
* nodeValue:元素节点返回null, 属性节点返回undefined,文本结点返回文本值。
通过nodeType解决火狐和ie关于空白文本是否作为子节点的差异,比如:
要得到div2的下一个元素节点:
<divid=div1 >
<divid=div2 name="div22" >aaaaa</div>
<divid=div3 >bbbb</div>
<divid=div4 >cccc</div>
</div>
//通过while循环判断nodetype类型,解决浏览器差异问题!
while(div2.nextSibling.nodeType!=1){
div2= div2.nextSibling;
}
div3= div2.nextSibling;
处理
属性节点
元素结点.属性名称(可以读写属性值)
使用setAttritbute(),getAttribute()添加和设置属性
function testAttr() {
varf = document.getElementById("font1");
alert(f.color);
f.color="blue";//直接操作
alert(f.getAttribute("color"));
f.setAttribute("color","green");//可动态传入操作
}
文本结点
要获取一个结点内的文本,一般使用innerHTML属性
innerHTML属性不局限于操作一个结点,而是可以使用HTML片段直接填充页面或直接获取HTML片段,大大提高了开发的灵活性。
function testInnerHTML(){
alert(document.getElementById("div3").innerHTML);
}
<div id="div3">将得到的文本</div>
因为innerHTML属性可写,所以可以HTML片段来直接填充页面
function testInnerHTML(){
var dd =document.getElementById("div3");
dd.innerHTML = "<b>奥运会马上要开了!<b><h1>什么时候啊?</h1><h2>是8.8号</h2>";
}
改变文档的层次结构
使用document.createElement方法创建元素结点
vardivElement = document.createElement(“div")
使用appendChild方法添加结点
parentNode.appendChild(childElement);
使用insertBefore方法插入子结点
parentNode.insertBefore(newNode,beforeNode)
使用replaceChild方法取代子结点
parentNode.replaceChild(newNode,oldNode)
oldNode必须是已经存在的,不然会发生异常。
使用removeChild方法删除子结点
parentNode.removeChild(childNode);
下拉列表和表格不能用这样的DOM方法,而要用DHTML接口中的方法。
业务思想
DOM模型的本质是操作文档对象的接口,通过demo深入理解,掌握其基本属性和方法,也是很简单的。