程序员人生 网站导航

[JavaScript] 9.JS DOM模型

栏目:htmlcss时间:2016-06-24 17:08:11

简介

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般所说的结点指的就是元素结点。

援用:

1.直接援用结点

         使用document.getElementById()援用指定id的结点

         使用document.getElementsByTagName(“a”),将所有<a>元素结点放到1个数组中返回。

         使用document.getElementsByName(“abc”),将所有name属性为”abc”的元素结点放到1个数组中返回。

2.间接援用节点

         ①援用子结点

         每一个结点都有1个childNodes集合属性,类型是数组对象,表示该结点的所有子结点的集合。这些子结点依照它在文档中出现的顺序排列,因此可以通过索引来顺次访问各个子结点。

         firstChild,lastChild

         ②援用父节点

         DOM模型中,除根结点,每一个结点都唯一1个父节点,可以用parentNode属性来援用。

         ③援用兄弟结点

         element.nextSibling;  //援用下1个兄弟结点

         element.previousSibling;  //援用上1个兄弟结点

         如果该结点没有相应的兄弟结点,则属性返回null.

阅读器差异问题

原则:如果ie和火狐产生差异冲突,尽可能解决。如果太复杂不想去做,1切以IE为准。

属性:

* nodeName:元素结点返回结点类型(即,标记名称);属性结点返回undefined;文本节点返回"#text".

* nodeType:元素节点返回1,属性节点返回2,文本节点返回3

* nodeValue:元素节点返回null, 属性节点返回undefined,文本结点返回文本值。

通过nodeType解决火狐和ie关于空白文本是不是作为子节点的差异,比如:

要得到div2的下1个元素节点:

                   <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");//可动态传入操作

}

 

文本结点

         要获得1个结点内的文本,1般使用innerHTML属性

         innerHTML属性不局限于操作1个结点,而是可使用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深入理解,掌握其基本属性和方法,也是很简单的。

 

------分隔线----------------------------
------分隔线----------------------------

最新技术推荐