[JavaScript] 9.JS DOM模型

原创 2016年05月30日 20:02:20

简介

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深入理解,掌握其基本属性和方法,也是很简单的。

 

版权声明:本文为博主原创文章,未经博主允许不得转载。

JAvaScript和DOM(文档对象模型)和BOM(浏览器对象模型)

DOM是针对XML但经过扩展用于HTML的应用程序编程接口DOM把整个页面映射成一个多层节点结构,HTML页面中的每一个组成部分都是某种类型的节点,这些节点也包含这不同类型的数据...
  • wang2963973852
  • wang2963973852
  • 2016年10月27日 13:58
  • 1312

JavaScript基础——文档对象模型(DOM)

DOM是语言中立的API,用于访问和操作HTML和XML文档。DOM1级将HTML和XML文档形象地看做一个层次化的节点数, 可以使用JavaScript来操作这个节点树,进而改变底层文档的外观和结...
  • bboyjoe
  • bboyjoe
  • 2015年11月20日 11:57
  • 708

轻松学习JavaScript二十七:DOM编程学习之事件模型

在介绍事件模型之前,我们先来看什么是事件和什么是event对象。        一事件介绍        JavaScript事件是由访问Web页面的用户引起的一系列操作,使我们有能力创建动态页面...
  • erlian1992
  • erlian1992
  • 2015年12月28日 20:50
  • 1745

【学习拾遗】JavaScript——Dom0模型和Dom2模型

对最近做的项目做个总结,结果发现自己的JS好弱!调侃一下,基本除了alert()其它什么也不会了,当然封装的框架(EasyUI等还是会使的)除外。知耻而后勇,抽了三天的时间重新学习了一下JavaScr...
  • zllaptx4869
  • zllaptx4869
  • 2015年05月28日 23:50
  • 686

JS——文档对像模型DOM

什么是dom? dom不是javascript,dom是文档。 dom是一组用来描述脚本怎么与结构化文档进行交互和访问的web标准。 dom定义了一系列对象、方法和属性,用于访问、操作和创建文档...
  • culous
  • culous
  • 2016年09月17日 23:08
  • 225

JavaScript 事件模型 事件处理机制

这篇文章对于了解Javascript的事件处理机制非常好,将它全文转载于此,以备不时之需。 什么是事件? 事件(Event)是JavaScript应用跳动的心脏 ,也是把所有东西粘在一起的...
  • chenmoquan
  • chenmoquan
  • 2013年08月21日 21:10
  • 12931

仅用原生JavaScript手写DOM事件模型

前言 前段时间博客园里有篇很火的帖子2016十家公司前端面试小记,主要讲作者的前端面试经历,其中提到了面试官会考察手写一个简单的DOM事件模型。 “如果上述都ok的话,那么极有可能要求让你【实现事件...
  • GAMEloft9
  • GAMEloft9
  • 2016年04月29日 11:35
  • 6941

什么是DOM?DOM和JavaScript的关系[web开发]

什么是DOM? 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式。我们...
  • hqf2009
  • hqf2009
  • 2015年12月18日 16:11
  • 1468

javascript DOM编程艺术 读后感与笔记

书评: 一开始接触前端的时候就在各个社区都听说过这本书,不愧为js最广为推荐的入门书,整本书读起来通畅易懂,对一个新手来说几乎不存在什么门槛,让人易于接受,该书通过一个个实例循序渐进,学到新的知识后...
  • m0_37506557
  • m0_37506557
  • 2017年02月25日 16:30
  • 307

总结一下这几天学的《JavaScript DOM编程艺术 第2版》(1)

整本书都是关于如何 DOM
  • u013236064
  • u013236064
  • 2014年08月11日 22:38
  • 1238
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:[JavaScript] 9.JS DOM模型
举报原因:
原因补充:

(最多只允许输入30个字)