- 浏览: 763878 次
- 性别:
- 来自: 上海
文章分类
- 全部博客 (573)
- Java基础 (76)
- C++基础 (5)
- hibernate (5)
- struts (4)
- spring (1)
- webservice (7)
- AjaX基础 (0)
- JS脚本 (53)
- 正则表达式 (5)
- html脚本 (30)
- 数据库基础 (54)
- 工作相关 (49)
- 其他 (30)
- Linux (9)
- web服务器 (17)
- JSP (13)
- eclipse (6)
- 面试题相关 (20)
- XML (3)
- Apache common (2)
- 生活 (35)
- VMware (1)
- log4j (9)
- BeanUtils (2)
- 设计模式 (3)
- UML (1)
- UNIX (1)
- ibats (5)
- GT-Grid (17)
- ABAP学习 (17)
- ABAP (35)
- ABAP--ALV (11)
- ABAP--WEBDIMPRO (0)
- abap-sample (1)
- BEMS (2)
- flex (33)
- GIS技术 (3)
最新评论
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、内容等。如何获取要更新的元素,是首先要解决的问题。令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):6uUBeautyCss.org - 前端教程网
1. 通过顶层document节点获取:6uUBeautyCss.org - 前端教程网
(1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。6uUBeautyCss.org - 前端教程网
如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的API文档。6uUBeautyCss.org - 前端教程网
(2)document.getElementsByName(elementName):该方法是通过节点的 name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。6uUBeautyCss.org - 前端教程网
例如:在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取改组元素,然后循环判断是节点的checked属性值是否为true即可。6uUBeautyCss.org - 前端教程网
6uUBeautyCss.org - 前端教程网
(3)document.getElementsByTagName(tagName):该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是知道节点的类型的,所以使用该方法比较简单。但是缺点也是显而易见,那就是返回的数组可能十分庞大,这样就会浪费很多时间。那么,这个方法是不是就没有用处了呢?当然不是,这个方法和上面的两个不同,它不是document节点的专有方法,还可以应用其他的节点,下面将会提到。6uUBeautyCss.org - 前端教程网
2、通过父节点获取:6uUBeautyCss.org - 前端教程网
(1)parentObj.firstChild:如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持 parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点。6uUBeautyCss.org - 前端教程网
(2)parentObj.lastChild:很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。6uUBeautyCss.org - 前端教程网
在使用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild...6uUBeautyCss.org - 前端教程网
(3)parentObj.childNodes:获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。6uUBeautyCss.org - 前端教程网
注意:经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。6uUBeautyCss.org - 前端教程网
(4)parentObj.children:获取已知节点的直接子节点数组。注意:经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。6uUBeautyCss.org - 前端教程网
(5)parentObj.getElementsByTagName(tagName):使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。6uUBeautyCss.org - 前端教程网
3、通过临近节点获取:6uUBeautyCss.org - 前端教程网
(1)neighbourNode.previousSibling:获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。6uUBeautyCss.org - 前端教程网
(2)neighbourNode.nextSibling:获取已知节点(neighbourNode)的下一个节点,同样支持递归。6uUBeautyCss.org - 前端教程网
4、通过子节点获取:6uUBeautyCss.org - 前端教程网
(1)childNode.parentNode:获取已知节点的父节点。6uUBeautyCss.org - 前端教程网
上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序。
发表评论
-
JavaScript事件
2010-05-13 14:37 1238事件(上) JavaScript事件列表 事件 解说 一般 ... -
flex学习
2010-05-06 20:17 780flex学习例子, -
JSON法创建JavaScript对象
2010-01-14 21:33 884<!DOCTYPE html PUBLIC " ... -
JavaScript Math 对象与函数
2010-01-14 21:16 1156Math函数 Math.abs() -- 返回 ... -
JavaScript Date 对象与函数
2010-01-14 21:14 910JavaScript_Date对象说明 Date对象构造函数 ... -
日历控件
2010-01-13 16:03 752日历控件 编辑控件 -
访问iframe里面的javascript函数、对象,兼容IE、Firefox
2009-12-29 23:16 1526假如你当前主页面中嵌入了一个iframe,ID为:iframe ... -
document.createElement等DOM函数与属性
2009-12-18 17:05 11821、创建节点 createElemen ... -
document.createElement("A")的相关属性
2009-12-18 17:03 1921<html> <BODY> ... -
removeChild 使用注意事项
2009-12-18 16:55 856Java代码 var giftBody = document ... -
js 按钮交互 元素属性获取
2009-12-18 16:44 1016<html xmlns="http://www ... -
HTML DOM selectedIndex 属性
2009-12-18 16:34 1289定义和用法 selectedIndex 属性可设置或返回下拉 ... -
hyperlink 控制
2009-12-18 16:09 919<html> <head> ... -
onchange()和onblur()
2009-12-18 15:54 1403<html> <head> ... -
js动态显示时间
2009-12-18 15:48 2762<html> <head> ... -
JS时间对象
2009-12-17 18:09 1398时间对象用来操作日期和时间。 Examples 举例 Ret ... -
Javascript 操作select控件大全(新增、修改、删除、选中、清空、判断存在等)
2009-12-16 17:40 7591判断select选项中 是否存在Value="pa ... -
javascript 暂定执行一段时间
2009-12-16 17:31 2113有人说window.setTimeout("func ... -
JS常用对象介绍
2009-12-16 17:22 857click() 对象.click() ------------ ... -
JS事件对象
2009-12-16 17:20 1158事件源对象 event.srcElement.tagName ...
相关推荐
JavaScript获取HTMLDOM节点元素的方法的总结
在Web应用程序特别是Web2.0程序开发中,经常要获取页面中某个元素,然后更新该元素的样式、...令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):
通过顶层document节点获取: (1) document.getElementById(elementId) :该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。 如今,...
通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。 如今,...
HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。 根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点: 整个文档是一个文档...
本文实例讲述了JQuery创建DOM节点的方法。分享给大家供大家参考。具体分析如下: 用JQuery选择器能够快捷而轻松地查找到文档中的某个特定的元素节点,然后可以用attr()方法来获取元素的各种属性的值。但真正的DOM...
通过顶层document节点获取: (1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。 如今,...
本文实例讲述了DOM节点深度克隆函数cloneNode()用法。分享给大家供大家参考。 具体实现方法如下: 代码如下:<html> <head> [removed] function t(){ var nodeul = document.getElementsByTagName(...
JavaScript HTML DOM 节点列表 NodeList 对象是一个从文档中获取的节点列表 (集合) 。 NodeList 对象类似 NodeList 对象 length 属性 NodeList 对象 length 属性定义了节点列表中元素的数量。 实例 var ...
DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式。 DOM对象就是宿主对象,用来操作HTML和xml功能对象的集合。 xml——>xhtml——>html4.0...
因为 DOM 的存在,这使我们可以通过 JavaScript 来获取、创建、修改、或删除节点。 NOTE:下面提供的例子中的 element 均为元素节点。 获取节点 父子关系 element[removed] element.firstChild/element.lastChild ...
gulp-svg2el Gulp 插件将传递的 HTML 转换为 Javascript $ npm install gulp-...该插件会转义源 HTML 中的所有相关字符,将制表符/空格折叠为单个空格并修剪结果以输出有效的 SVG DOM 元素。 ,由编写,用于项目 。
文档对象模型——Document Object Model DOM可以视为一种API的应用 将文件视为一个文件对象,通过程序语言调用DOM对象,来对该文件的某些特定...HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构(节点树)。
定位一个网页DOM元素,一般会以 id,class,name 作为标识符,通过 getElementById、getElementByName 、 querySelectorAPI来定位、获取指定元素。而针对一些无任何标识的节点,如 文本</sapn> 是否有方法定位到它们呢...
HTML DOM导航允许您以简单而简单的方式查看节点树。IRB对Watir自动化非常有用。 我开发此扩展主要是为了快速获取DOM,因为在Watir自动化中可能需要一些时间。 -网页完全加载后,单击页面右上方的“ HTML DOM导航”...