Ajax实战:寻找DOM节点

用JavaScript操作DOM的第一件事就是找到要修改的元素。前面已经提到,我 们开始只能得到根节点的一个引用,它保存在全局变量document中。DOM中的每 一个节点都是document的子节点(或孙节点、曾孙节点等等),但是要在大型的复 杂文档中,一步一步地缓慢搜寻是件体力活。幸运的是,我们可以走一些捷径。 最常用的方法就是给元素附加唯一的ID。在代码清单2-5的onload()函数中,我 们想要寻找两个元素:段落元素,我们为它设置样式;空的标签,我们为它添加 内容。如你所见,已经在HTML中为它们附加了唯一的ID属性,即:任何一个DOM 节点都可以分配一个ID,用来在程序中通过一个函数调用获得这个节点的引用, 无论它在文档中的什么位置:

var hello=document.getElementById('hello');

注意,这是Document对象的一个方法。在一个如上所述的简单情况中(以及在 很多复杂的情况中),可以通过document访问当前的Document对象。如果你使用 了IFrame(我们将会在后面讨论),那么可能需要跟踪多个Document对象,并确定 正在查询的是哪个Document对象。

在一些情况下,我们确实需要一步一步地搜索DOM树。因为DOM节点是以树形 结构来组织的,每一个DOM节点都只有不多于一个的父节点,但是可以有任意多 个子节点。可以通过parentNode和childNodes来访问它们。parentNode返回另外 一个DOM节点,而childNodes返回一个JavaScript节点数组,可以对其遍历,即 :

var children=empty.childNodes;
for (var i=0;i< SPAN>
...
}

即便在文档中的某个节点上没有附加唯一ID,我们仍有第三种方法可以方便 地定位节点。那就是,使用getElementsByTagName()方法,基于HTML标签的类型 搜索DOM节点。例如,document.getElementsByTagName("UL")会返回 一个包含文档中所有标签的数组。

这些方法对于操作那些我们几乎无法控制的文档[2]来说是很有用的。作为通 常的规则,使用getElementById()要比使用getElementsByTagName()更加安全, 因为前者对于文档结构和顺序的假设更少一些,这样文档结构可以独立于代码而 变化。

时间: 2024-11-03 12:44:42

Ajax实战:寻找DOM节点的相关文章

Ajax实战:使用JavaScript操作DOM

在任何应用中,我们都需要在用户的使用过程中改变用户界面,为用户执行 的操作和完成的进度提供反馈.这些反馈包括修改单个元素的标签或颜色.弹出 临时的对话框.使用一组全新的UI组件替换大部分的屏幕内容等等.到目前为止 ,最常见的方式就是,通过提供给浏览器一段声明式的HTML来构造DOM树(换句话 说,也就是编写HTML页面). 我们在代码清单2-2和图2-3中显示的文档有点太大和太复杂了,还是从小的 步骤开始做DOM操作吧.假设我们要向用户显示友好的问候.当页面第一次加载 的时候,我们并不知道他的名

初见Ajax——javascript访问DOM的三种访问方式

最近好啰嗦 最近在一间小公司实习,写一些小东西.小公司嘛,人们都说在小公司要什么都写的.果真是. 前端,后台,无论是HTML,CSS,JavaScript还是XML,Java,都要自己全包了.还好前台的要求不高.写一些芝麻豆腐的东西还是不在话下的.但是整个项目下来估计还不止这些要写.而且我的经验当中,都没怎么关心过前端的东西,一直认为这是和我无关的东西,这次估计要悲剧了.所以找了一本书来看--<Ajax实战>.临时抱佛脚,临阵磨枪,也不能说是完全没有用处的.相比没怎么写过Java的人,我还是觉

用于节点操作的API,颠覆原生操作HTML DOM节点的API_javascript技巧

第一次看到敏捷开发的定义,我就被敏捷开发迷住了.通俗来说,敏捷开发可以让我们用过的代码可以再次重用,因为是再次重用,所以相对安全,再次调试也没有第一次那么费心,省时省力.不断重用代码的过程中把存在的bug不断的修复,也因为不断的去重用, 这个模板变得起越来越独立,适用的情况越来越广范,最后在安全方面达到铜墙铁壁,在开发方面达到随心所欲,在维护方面达到从容面对. 敏捷开发的确是利害,但如何练就这种深奥的武功呢?就我自身的情况靠人传授武功是不可能了,因为公司就我一个做开发的,苦思幂想之后,决定从开源

请问dom节点的属性可以存储一个对象吗

问题描述 请问dom节点的属性可以存储一个对象吗 例如一个div节点,现在给它加一个属性用来存储一个对象, <div info={x:11,y:34}></div> 这样写好像不对,应该怎么写呢,求解,3Q 解决方案 可以啊,用CDATA,如果放在属性中,可以先把对象序列化成xml,再做html编码 解决方案二: 既然想存对象,说明你需要使用js 对其操作 为何不用dom对象直接扩展属性进行保存 var domObj = document.getElementById('...')

【JavaScript】DOM节点常用方法介绍01

DOM节点常用方法介绍01 1.查找元素节点 1.1getElementById()       寻找一个有着给定 id 属性值的元素,返回值是一个有着给定id属性值的元素节点.如果不存在这样的元素,它返回null. var oElement = document.getElementById ( sID )      该方法只能用于document对象 例子: <pre name="code" class="html"><!DOCTYPE htm

修改和创建DOM节点两种方式的4种优化方案

原文:<Speeding up JavaScript: Working with the DOM>作者:KeeKim Heng, Google Web Developer翻译:http://www.blogjava.net/emu/archive/2010/03/01/314185.html 在我们开发互联网富应用(RIA)时,我们经常写一些javascript脚本来修改或者增加页面元素,这些工作最终是DOM--或者说文档对象模 型--来完成的,而我们的实现方式会影响到应用的响应速度. DOM

Ajax实战:用JavaScript实现观察者

建议的解决方案是定义一个通用的事件路由器对象,它为目标元素附加一个 标准函数,作为一个事件回调,并且维护一个监听器函数的列表.这允许我们以 下面的方式重写mousemat的初始化代码: window.onload=function(){ var mat=document.getElementById('mousemat'); ... var mouseRouter=new jsEvent.EventRouter(mat,"onmousemove"); mouseRouter.addLi

Ajax实战:为文档增加样式

到目前为止,我们已经考察了使用DOM来操作文档的结构(一个元素如何被另 外一个元素所包含,诸如此类).这使得我们可以有效地改造在静态HTML中声明 的结构.DOM还提供了另外一类方法,允许以编程方式修改元素的样式和改造定 义在样式表中的结构. 通过DOM操作,Web页面上的每一个元素都可以拥有多种视觉样式,例如位置 .高度和宽度.颜色.边框和空白.尽管分别修改每一个属性可以更加精细地控 制元素的外观,但是这样做是很单调乏味的.幸运的是,Web浏览器为我们所提 供的JavaScript绑定除了提供

Ajax实战:绑定事件处理函数代码

JavaScript文件(代码清单4-3)采用编程方式将事件绑定到键上. 代码清单4-3 musical.js window.onload调用了assignKeys()函数(可以在这个文件中直接定义window. onload,但是这限制了它的可移植性).通过唯一的ID来发现keyboard元素,然 后使用getElementsByTagName()遍历访问其内部所有的DIV元素.这需要知道一 些关于页面结构的知识,但是它允许页面设计师自由地在页面中将键盘DIV以希 望的方式任意移动. 表示键的