JavaScript DOM学习第一章 W3C DOM简介

在这一章我主要介绍已经被新一代的浏览器所支持的W3C 第一级的DOM。对他的运作做一个大概的了解并且让你知道你可以对他们做什么。
首先是对于DOM的一些建议和DOM设计的目的，然后我会告诉你什么是节点（nodes）并且怎样通过DOM树来遍历节点。接着是如何得到一个特定的节点，以及怎样改变他的值和属性。最后就是DOM的终极目标：怎么创建一个自己的新节点。
建议
Level 1DOM是W3C制定的用来提供给任何程序语言来访问XML文档的。不管你用什么语言程序来处理XML文档，只要是Level 1DOM里面的方法和属性就可以。不管是Perl、VBScript还是JavaScript你都可以读取任何你想读取的值并且修改他们。
你们可能会猜到，这段描述的是一种理想情况，差异还是存在的（比如浏览器）。然后这部分内容还是比较少，并且你在JavaScript里学习如何处理XML也对你在其它语言中的学习会有一定的帮助。
从某种程度上也可以讲HTML看做是一种XML文档。只要浏览器能够处理相应的脚本，那么Level 1 DOM也同样在HTML里面可以运行的很好。
你可以读取每一个HTML的标签的文本和属性，你可以删除每一个标签和他们的内容，你还可以实时的在现有的文档里面插入一个新的标签而不用在服务器上修改。
因为设计之初要考虑到修改XML的方方面面，所以对于一般的网页工程师来说有一些方法可能永远也用不上。比如，你可以用它来修改HTML的注释，但是我没有看出来问什么要这样做。同样的还有一些DOM处理DTD/Doctype的内容，你在你的网页设计中并不需要，所以忽略掉，集中注意力在你的日常所需上就好。
节点（Nodes）
文档对象模型是一种文档内的多个元素之间怎样相互联系的一种模型。在Level 1 DOM中，每一个对象都是一个节点。所以如果你写：


代码如下:

<p>This is a paragraph</p>

那么你就创建了两个节点：元素P和内容是"This is a paragraph”的文本节点。这个文本节点包含在P元素内，所以可以认为是p节点的子节点。反过来说，p元素就是文本节点的父节点。
如果你写成：


代码如下:

<p>This is a <B>Paragraph</B></p>

那么元素节点p就有两个子节点，其中一个还有他自己的子节点。
最后就是参数节点。（令人困惑的是，他们不算做元素节点的子节点。事实上，在我写这一章的过程中我做过一些测试，IE5根本就不把参数节点当做元素的子节点。）所以：


代码如下:

<P ALIGN="right">This is a <B>paragraph</B></P>

的结构可能是这样的：

       <P> ----------------


--------------     ALIGN


This is a     <B>     |
            |    right


paragraph

这就是元素节点，文本节点和参数节点。99%的HTML页面都是由他们组成，你的主要任务也就是如何放置他们。当然还有很多的其他节点，暂且略过。

就像你所了解的，p元素也有他自己的父节点，通常就是document，有时候也可能是一个DIV。所以整个文档都可以看做是一颗由很多的节点组成的树，而且这些节点大多都有自己的子节点。

      <BODY>


|-------------------------------------


<P> ----------------      lots more nodes


--------------     ALIGN


This is a     <B>     |
            |    right


paragraph

遍历DOM树
知道了DOM树的结构，你就可以遍历他来找到你想要的元素。举个例子，假设元素节点p已经存储在变量x中（等一会介绍这是怎么做到的）。这时候如果我们想访问BODY那么：


代码如下:

x.parentNode

我们就得到了x的父元素，然后就可以修改它了。这样可以到达B节点：


代码如下:

x.childNode[1]

childNode是一个包含所有x的子节点的数组。当然，数组是从0开始编号的，所以childNode[0]就是文本节点"This is a " childNode[1]就是B节点。
两个特别的：x.firstChild就表示x的第一个子节点；x.lastChild就表示x的最后一个子节点。
假设p是BODY的第一个子节点，BODY又是document的第一个子节点，所以为了到达B节点，你可以用下面的任意方法：


代码如下:

document.firstChild.firstChild.lastChild;
document.firstChild.childNodes[0].lastChild;
document.firstChild.childNodes[0].childNodes[1];

甚至是下面这个比较笨的：


代码如下:

document.firstChild.childNodes[0].parentNode.firstChild.childNodes[1];

得到一个元素
然而，这样遍历文档实在是太麻烦了。因为Level 1 DOM设计的目标就是允许你修改整个DOM树，所以你必须准确的知道DOM树的结构，这会很快导致一些问题。
所以还有一些方法能够很快的到达你想要的元素。只要你到达了这里，就可以遍历整个DOM树的每一个节点。
让我们继续前面的例子。你想要到达元素B。最简单的办法就是直接跳过去。通过document.getElementByTagName你就能很快的创建一个包含文档内的所有B标签的数组。假设我们的B是第一个，那么你就可以简单的写：


代码如下:

var x = document.getElementsByTagName('B')[0]

x就包含了元素节点B。首先你命令浏览器得到整个文档的所有元素B(document.getElementByTagName(‘B')) ,然后你选择了第一个文档的第一个元素B([0])，就得到了你想要的。
你也可以写：


代码如下:

var x = document.getElementsByTagName('P')[0].lastChild;

现在你先到了文档的第一个段落P（假设我们的P是第一个元素），然后到达p的最后一个子元素。
最好的能准确到达元素并且不需要DOM结构的办法就是给B一个ID：
<P ALIGN="right">This is a <B ID="hereweare">paragraph</B></P>现在你就可以简单的写：


代码如下:

var x = document.getElementById('hereweare');

元素B就存储在了x里。
修改一个节点
现在我们已经到达了节点，就可以做一些修改了。假设我们想把加粗的文字部分修改为'bold bit of text'。我们需要访问正确的元素然后修改它的nodeValue。现在正确的元素不是元素B而是他的子元素text node：我们想改变的是文字，不是元素。所以可以写：


代码如下:

document.getElementById('hereweare').firstChild.nodeValue='bold bit of text';

元素就改变了。
你可以通过nodeValue来修改任何文本节点或者参数。比如你可以修改段落的ALIGN参数。这也是非常的简单，先找到需要的元素（在这个例子中是B元素的父元素），然后使用setAttribute()方法来设置你想要的值：


代码如下:

function test2(val) {
if (document.getElementById && document.createElement)
{
node = document.getElementById('hereweare').parentNode;
node.setAttribute('align',val);
}
else alert('Your browser doesn\'t support the Level 1 DOM');
}

创建和删除元素
修改元素固然有用，但是还是不如创建你需要的元素然后插入到现有的文档中。我可以很简单的在这个段落后面添加一个HR元素然后很简单的删除它。
创建元素使用下面的方法:
var x=document.createElemnt(‘HR')
这样HR就创建并且存储在x中。第二步就是把x插入到文档之中。我写了一个ID是inserthere的SPAN，我们就把它插入到这。所以我们使用appendChild()方法：


代码如下:

document.getElementById('inserthrhere').appendChild(x);

删除它稍稍有点麻烦。我先创建一个临时变量node来存储SPAN，然后我告诉他移除他的第一个子元素：


代码如下:

var node=document.getElementById(‘inserthere');
node.removeChild(node.childNode[0]);

同样的方法我们也可以创建一个新的元素然后添加在ID是hereweare的B元素上。


代码如下:

var x = document.createTextNode(' A new text node has been appended!');
document.getElementById('hereweare').appendChild(x);

你可以试一试，你会注意到用老的办法可能不会移除新加的文本，那是因为他们已经成为分离的两部分了： 

 <B>


------------


paragraph A new text node
 has been appended!

(可以通过normalize()来把他们合并，但是IE5不支持）

我不打算告诉你怎么移除它，自己练习会比较有收获

翻译地址：http://www.quirksmode.org/dom/intro.html

转载请保留以下信息
作者：北玉(tw:@rehawk)

赞 (0)

相关推荐

  • javascript提取内容到作为文章简介的代码

    我们 www.jb51.net //字符长度 function limitL(){ var content=document.getElementById("content").value; if(content.length > 100){ content = content.substring(0,100); } document.getElementById("jianjie").value = content; } 有时真想做一个稻草人,站在一望无际的

  • 编程语言JavaScript简介

    JavaScript 是什么? JavaScript 是一种广泛应用于客户端网页(浏览器)开发的脚本语言,如用来给 HTML 网页添加动态功能,比如响应用户的各种操作等.JavaScript 是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言,大部分情况下是由网页浏览器来执行的. JavaScript 是美国 Sun 公司的注册商标,目前 Javascript 的最新版本为 1.9 版,遵循 Ecma 国际(前身为欧洲计算机制造商协会)的 ECMA-26

  • javascript中数组的多种定义方法和常用函数简介

    数组的定义:方法1. 复制代码 代码如下: var mycars=new Array()mycars[0]="sharejs.com"mycars[1]="Volvo"mycars[2]="BMW" 方法2.定义和初始化一起: 复制代码 代码如下: var mycars=new Array("Saab","Volvo","BMW"); 或者: 复制代码 代码如下: var mycars=

  • JavaScript简介

    本文不是参考手册式文章,仅适用于对JS产生一个大致的认知,如需JS的详细语法与应用请移步w3school JavaScript是什么? JavaScript的诞生 在1995年前后,当时世界上的主流带宽为28.8Kbps,现在世界平均下载带宽为21.9Mbps(数据来源于http://www.netindex.com).当时的网民,每提交一次表单,都需要等待很久才能收到服务器的回应,甚至很可能等了几分钟收到的却是说缺少了某一项.为了改善用户体验,嵌入浏览器客户端的能实现简单表单判断的脚本诞生了,

  • JavaScript DOM 学习第五章 表单简介

    因为每一个表单的检测项都不同,所以我也不能给你一个万能的代码.你需要用我在这一章介绍的这些元素构建自己的检测函数.我在后面一张还有一个例子,你也可以参考. 在这一章我会首先讨论一下用JavaScript来检测表单的局限性,然后会解释一下提交时间处理程序,然后是表单本身的一些方法和属性.最后就是如何访问表单元素. 这里还有一篇Jeff Howden的介绍表单的使用错误和解决办法.Forms & JavaScript Living Together in Harmony局限性 首先,你需要了解当用户

  • JavaScript静态类型检查工具FLOW简介

    Flow是Facebook出品的,针对JavaScript的静态类型检查工具.其代码托管在github之上,并遵守BSD开源协议. 关于Flow 它可以帮助我们捕获JavaScript开发中的常见错误,而不需要额外地修改你原有的代码,比如静态类型转换,空值引用等问题. 同时,Flow为JavaScript添加了静态类型的语法标识,这样开发者便可以明确代码中的类型,让其自动地被Flow所维护. 目前,Flow具有以下两特性: 1. Flow的类型检查具有可选性 除非你明确告诉Flow需要对某些文件

  • JavaScript 事件冒泡简介及应用

    一.什么是事件冒泡 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或者事件返回true,那么这个事件会向这个对象的父级对象传播,从里到外,直至它被处理(父级对象所有同类事件都将被激活),或者它到达了对象层次的最顶层,即document对象(有些浏览器是window). 打个比方说:你在地方法院要上诉一件案子,如果地方没有处理此类案件的法院,地方相关部门会帮你继续往上级法院上诉,比如从市级到省级,

  • javascript 基础简介 适合新手学习

    1. 关于JavaScript简单介绍 Ø 在网络或书籍所说的JavaScript大部分指客户端JavaScript. Ø JavaScript是一种轻量型.解释型.面向对象的编程语言. Ø JavaScript特性 1) 控制文档的外观和内容 2) 控制浏览器 3) 和HTML表单的交互 4) 和用户的交互 5) 用Cookie读写用户状态 6) 其它 2. 词法结构 2.1. 字符集 JavaScript程序是用Unicode字符集编写的. 2.2. 区分大小写 JavaScript是一种区

  • MongoDB中javascript脚本编程简介和入门实例

    注:作者使用的mongodb版本为2.4.7. 入门例子 复制代码 代码如下: conn = new Mongo();db = conn.getDB("db-name");  //选择数据库db.auth("user-name","password");  //用户验证 var map = function() {    split_result = this.sentence.split(" ");    for (var

  • JavaScript 调试器简介

    但是仅从调试的角度来说,这些调试器的功能是完全够用的.其实我更需要的不是一个 JavaScript IDE,而是一个 JavaScript 重构工具,这样可以使我快速地对 JavaScript 组件进行重构,比使用 UltraEdit 进行查找/替换的原始方法效率会提高很多,而且更加安全.其实任何一种没有重构工具的语言的开发效率都是没有办法和 Java 这样的语言(有 Eclipse.IDEA 等等强大的重构工具)相提并论的.共产主义尚未实现,这确实是现实,但是并不意味着我们就一定要等待,就没有

  • 函数式 JavaScript（一）简介

    让我们假装现在要完成一个任务:尽可能按照函数式语言的原则来写JavaScript代码. 接下来一系列文章就是为了让你们和我一起开始这样一段旅程.首先,我们需要纠正一些你们脑子中可能有的对函数式语言错误的概念. JS语言中的函数式被严重误解. 很显然,有相当多的开发者要每天用JavaScript的函数式范式 .我想说有更大一部分JavaScript 开发者没有真正理解这些东西. 我认为造成这个的原因是绝大多数用于Web服务器端的开发语言都是来源于C,而大家都知道这些语言不是函数式语言. 一般有两个

  • javascript中的window.location.search方法简介

    window.location.search方法是截取当前url中"?"后面的字符串, 例如:index.php?act=doctor,截取后的字符串就是act=doctor

  • Javascript前端UI框架Kit使用指南之Kitjs简介

    Javascript前端UI框架Kit使用指南之Kitjs简介

    Kitjs,(http://xueduany.github.com/KitJs),是我2011年底,离开淘宝UED之后,自己搞起的一套HTML5的前端widget库,原本的用途主攻手机端HTML页面交互组件使用,正如其字面意思Kit一样,愿景是做一个娇小,实用,既可以直接拿来用,也可以很方便做2次开发的一套组件.后来由于项目的越做越大,组件数的膨胀,也加入PC端浏览器(IE6+,FF,chrome核心系列等等)的支持,不再仅限于原来手机开发领域,开始正式迈向全平台.所以近期也对原来的所有模块按照

随机推荐