原文:javascript系列之DOM(一)

DOM(document object moudle),文档对象模型。它是一个中立于语言的应用程序接口(API),允许程序访问并修改文档的结构，内容和样式。也就是一切语言（js,php 等）对web的操作是建立在DOM的基础之上的。行为的发生，首先必须获取文档中的一个对象作为其载体。

DOM发展史

在漫长的互联网发展史上DOM一共经历了四个阶段。当前，我们正处在DOM 3阶段。

DOM 0 ：不是W3C规范，只是Netscape Navigator 3.0 和 IE 3.0 中的等价功能性的定义。

DOM 1：专注于HTML和XML文档模型，提供了文档导航和处理功能。

DOM 2：在DOM 1的基础上提供了样式对象模型和事件模型。

DOM 3：在DOM 2的基础上规定了内容模型和文档验证，同时规定了文档加载和保存、文档查看、文档格式化和关键事件。

DOM关系图

DOM眼中，html文档就是一个树形结构。也就是我们数据结构中的树。很显然document就是这个树的根节点。<html>下面有两个子（children）节点<head>,<body>。<head>,<body>
互为兄弟(sibling)。<table>,<span>,<p>是<body>的子节点，
是<html>的孙节点或后代(descendant)节点。

DOM节点对象

HTML文档中各节点都是一个不同类型的节点(node)对象,每个节点都有自己的属性和方法。利用这些属性和方法我们就可以开始操作DOM了，包括遍历
整个文档树，获取含有某个属性的元素等等。当然DOM中有很多类型的节点，它是怎么样来区分它们的了？答案是nodeType。下面我们看看具体都有哪些
类型的节点

接口 nodeType值 备注
element 1 元素节点
text 3 文本节点
attr 2 节点属性
comment 8 注释节点
document 9 document
documentFragment 11 文档碎片

在这些节点类型中，我们用的最多的就是元素(element)节点和文本(text)节点。Javascript操作HTML文档的时候，document即指向整个文档，<body>、<table>等节点类型即为Element。至于这个nodeType，我们可以用它来检测节点类型。

前面我们已经提到不同的节点提供了不同的属性和方法，现在具体每一个节点类型来看一下。document节点提供了一些常用的工厂方法，主要用于创建可以插入文档中各种类型的节点，详见下表：

方法 描述
createElement 创建元素节点
createTextNode 创建文本节点
createAttribute 创建属性节点
getElementById 获取文档中指定id的元素节点
getElementsByTagName 获取文档中指定标签的元素节点
getElementByName 获取文档中指定名称的元素节点

元素节点提供了一个tagName属性用来获取元素的标签名称(全为大写)，提供的一些方法主要用来插入和删改，查询和设置元素。详见下表：

getAttribute 以字符串的形式返回指定属性的值
getAttributeNode 以Attr节点的形式返回指定属性
hasAttribute 判断节点是否有指定名字属性
removeAttribute 删除指定名字属性
setAttribute 设置指定名字的属性，若没有，添加一个
 setAttributeNode  设置指定名字的属性节点

Attr对象代表文档元素的属性，有name、value等属性，可以通过Node接口的attributes属性或者调用Element接口的
getAttributeNode()方法来获取。不过，在大多数情况下，使用Element元素属性的最简单方法是getAttribute()和
setAttribute()两个方法，而不是Attr对象。

这些节点类型都是一个节点对象，而节点对象又定义了一些共有的属性和方法，以方便的操作DOM文档。用parentNode和
childrenNodes[]在文档中上下移动，用nextSibling在文档中左右移动。firstChild和lastChild可以枚举指定节
点的子节点，通过遍历childNodes[](这里的childNodes[]是一个nodeList对象)数组循环操作这些子节点,然后通过递归，可
以没举出文档树中所有节点。而调用
appendChild(),insertBefore(),removeChild(),replaceChild()方法可以改变一个节点的子节点从
而改变文档树。下面是一些Node对象的常用属性和方法。

Node对象的常用属性：

attributes 若该节点是一个element，返回该元素的属性
childNodes 返回当前元素的子节点，若没有，则为null
firstChild 返回当前节点的第一个子节点。若没有，则为null
lastChild 返回当前节点的最后一个子节点。若没有，则为null
nextSibling 返回当前节点的下一个兄弟节点
nodeName 返回当前节点的名字，element为标记名称
parentNode 当前节点的父节点
previousSibling 返回当前节点的上一个兄弟节点

Node对象常用方法：

appendChild() 把一个节点增加到当前节点的childNodes[],
cloneNode() 复制当前节点，若参数为true，复制当前节点及它的所有子孙节点
hasChildNodes() 判断当前节点是否拥有子节点
insertBefore() 在指定节点和当前节点之间插入一个新的节点
removeChild() 从文档中删除并返回指定子节点
replaceChild() 从文档中删除并返回指定子节点,用另一个节点替换它

上面列举出来的常用节点对象的属性和方法是我们操作DOM最有用的工具，接下来，就让我们使用上述的属性和方法来操作日常中所见的DOM行为。

DOM操作

A ： 创建一段DOM片段(碎片)，形如：

<div id=”example”>

<p class=”slogan”>淘！你喜欢</p>

</div>

 var fragment=document.createDocumentFragment();//创建文档碎片

 var oDiv=document.createElement("div");//创建div元素节点

 oDiv.setAttribute("id","example");//给div节点添加id 属性

 var oP=document.createElement("p");//创建p元素节点

 oP.setAttribute("class","slogan");//给p节点添加class属性

 var oText=document.createTextNode("淘！你喜欢")//创建文本节点

 oP.appendChild(oText);//给p元素节点添加文本节点

 oDiv.appendChild(op);

 fragment.appendChild(oDiv)

 document.body.appendChild(fragment);

这里首先创建好片段中的元素节点，然后创建对应元素节点的属性和文本节点。最后由内之外的为对应元素添加子节点，逐步递推构成一个完整的DOM片段，最后将这一个片段添加到body体中。这样你所需的DOM片段就构建好了。至于这里用到了createDocumentFragment()，在后文中会详述它在性能优化中的作用。通过这个例子我们可以学会createElement(),setAttribute(),createTextNode(),appendChild()方法。

B :遍历文档节点

这个例子使用了childNodes[]和递归方式来遍历整个文档，统计文档中出现的Element元素总数，并把Element标记名全部打印出来。需要特别注意的是，在使用DOM时，必须等文档被装载完毕再执行遍历等行为操作文档。

 var elementName="";//全局变量存储元素标签名称

 function countTotalElement(node){

     var total=0;

     if(node.nodeType==1){//检测是否是元素节点

             total++//计数器加1

             elementName=elementName+node.tagName+"\n";//保存标签名

             }

             var oChild=node.childNodes;//获取元素节点的子节点数组

             for(var i=0,l=oChild.length;i<l;i++){

                 countTotalElement(oChild[i]);//递归每个子节点

     }

     return total;

 }

先就写这么多吧！文章太长容易让人烦躁。第二部分还要补充一下原生DOM方法扩展，DOM性能优化等内容。慢慢来吧，文中若有纰漏和错误还望指出。

javascript系列之DOM(一)的更多相关文章

  1. javascript系列之DOM(二)

    原文:javascript系列之DOM(二) 原生DOM扩展 我们接着第一部分来说,上文提到了两种常规的DOM操作:创建文档片段和遍历元素节点.我们知道那些雨后春笋般的库,有很大一部分工作就是提供了一 ...

  2. javascript系列之DOM(三)---事件

    原文:javascript系列之DOM(三)---事件 事件是javascript跳动的心脏,是DOM所有成分结合的万金油.当我们在WEB 上进行某些交互时,事件也就发生了.点击某些内容,鼠标经过特定 ...

  3. javaScript系列 [27]- DOM

    本文将详细介绍DOM相关的知识点,包括但不限于Document文档结构.Node节点.Node节点的类型.Node节点的关系以及DOM的基本操作( 节点的获取.节点的创建.节点的插入.节点的克隆和删除 ...

  4. javascript系列-class9.DOM(上)

    欢迎加入前端交流群交流知识获取视频资料:749539640 1.文档对象模型DOM(document Object Model)        所谓DOM就是以家族的形式描述HTML       节点 ...

  5. javascript系列-class10.DOM（下）

    1.node节点(更详细的获取(设置)页面中所有的内容)         根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:   元素是节点的别称,节点包含元素当然节点还有 ...

  6. 深入理解JavaScript系列（24）：JavaScript与DOM（下）

    介绍 上一章我们介绍了JavaScript的基本内容和DOM对象的各个方面,包括如何访问node节点.本章我们将讲解如何通过DOM操作元素并且讨论浏览器事件模型. 本文参考:http://net.tu ...

  7. 高性能javascript学习笔记系列(3) -DOM编程

    参考 高性能javascript 文档对象模型(DOM)是独立于语言的,用于操作XML和HTML文档的程序接口API,在浏览器中主要通过DOM提供的API与HTML进行交互,浏览器通常会把DOM和ja ...

  8. 汤姆大叔 javascript 系列 第20课 最后的5到javascript题目

    博客链接:http://www.cnblogs.com/TomXu/archive/2012/02/10/2342098.html 原题: 大叔注:这些题目也是来自出这5个题目的人,当然如果你能答对4 ...

  9. 深入理解JavaScript系列

    转自http://www.cnblogs.com/TomXu/archive/2011/12/15/2288411.html 深入理解JavaScript系列(1):编写高质量JavaScript代码 ...

随机推荐

  1. hdu1052 Tian Ji -- The Horse Racing 馋

    转载请注明出处:http://blog.csdn.net/u012860063 题目链接:pid=1052">http://acm.hdu.edu.cn/showproblem.php ...

  2. UVA How Big Is It?

    题目例如以下: How Big Is It?  Ian's going to California, and he has to pack his things, including hiscolle ...

  3. 【世外桃源】福音节目 swtychina.com

    [世外桃源]福音节目 今天小编满怀热情,带着激动地心情,颤抖的双手,以“大无畏的精神,高山仰止的情操”为大家郑重推荐很好的一个福音节目: <世外桃源>, 哎,不对,貌似从2013年初开始& ...

  4. Xcode_6.3_beta_4 官方 下载地址

    http://adcdownload.apple.com//Developer_Tools/Xcode_6.3_beta_4/Xcode_6.3_beta_4.dmg

  5. 在Linux终端下使用代理访问网络(转)

    最近,需要在linux环境下使用脚本进行一些网络访问(主要是HTTP请求与文件下载),于是查阅了一些关于代理的资料. 以下是尝试的几种代理设置方法,以供参考: 一.使用wget命令进行代理访问 wge ...

  6. C指针决心 ------ 指针的概念和元素

     本文是自己学习所做笔记,欢迎转载,但请注明出处:http://blog.csdn.net/jesson20121020 指针在C语言中的地位,不用多说. 指针的概念 指针是一个特殊的变量,它里面存储 ...

  7. android:强大的图像下载和缓存库Picasso

    1.Picasso一个简短的引论 Picasso它是Square该公司生产的一个强大的图像下载并缓存画廊.官方网站:http://square.github.io/picasso/ 仅仅须要一句代码就 ...

  8. PHP制作pdf文档方法

    原文:PHP制作pdf文档方法 本篇博客是在看完 php+mysql web书以后自己的测试代码,虽然是测试代码,但不是简单的粘贴复制,为了学习thinkPHP框架,自己就用这个来做的,而且这本书已经 ...

  9. Java程序猿JavaScript学习笔记（4——关闭/getter/setter）

    计划和完成这个例子中,音符的顺序如下: Java程序猿的JavaScript学习笔记(1--理念) Java程序猿的JavaScript学习笔记(2--属性复制和继承) Java程序猿的JavaScr ...

  10. [Android] App在三星某些机子上闪退:"不保留活动"

    今天遇到用户反映应用总是闪退. 现象:在MainActivity后,只要进入任何主进程相关的二级界面,都会导致应用闪退(注:不是崩溃引起的,只是闪退) 分析:1.看log日志,退出前有抛出异常,但查看 ...