获取HTML DOM节点元素的方法的总结


Posted in Javascript onAugust 21, 2009

令人欣慰的是,使用JavaScript获取节点的方法有很多种,这里简单做一下总结(以下方法在IE7和Firefox2.0.0.11测试通过):
1. 通过顶层document节点获取:
(1) document.getElementById(elementId):该方法通过节点的ID,可以准确获得需要的元素,是比较简单快捷的方法。如果页面上含有多个相同id的节点,那么只返回第一个节点。
如今,已经出现了如prototype、Mootools等多个JavaScript库,它们提供了更简便的方法:$(id),参数仍然是节点的id。这个方法可以看作是document.getElementById()的另外一种写法,不过$()的功能更为强大,具体用法可以参考它们各自的API文档。
(2)document.getElementsByName(elementName):该方法是通过节点的 name获取节点,从名字可以看出,这个方法返回的不是一个节点元素,而是具有同样名称的节点数组。然后,我们可以通过要获取节点的某个属性来循环判断是否为需要的节点。
例如:在HTML中checkbox和radio都是通过相同的name属性值,来标识一个组内的元素。如果我们现在要获取被选中的元素,首先获取改组元素,然后循环判断是节点的checked属性值是否为true即可。

(3)document.getElementsByTagName(tagName):该方法是通过节点的Tag获取节点,同样该方法也是返回一个数组,例如:document.getElementsByTagName('A')将会返回页面上所有超链接节点。在获取节点之前,一般都是知道节点的类型的,所以使用该方法比较简单。但是缺点也是显而易见,那就是返回的数组可能十分庞大,这样就会浪费很多时间。那么,这个方法是不是就没有用处了呢?当然不是,这个方法和上面的两个不同,它不是document节点的专有方法,还可以应用其他的节点,下面将会提到。
2、通过父节点获取:
(1)parentObj.firstChild:如果节点为已知节点(parentObj)的第一个子节点就可以使用这个方法。这个属性是可以递归使用的,也就是支持 parentObj.firstChild.firstChild.firstChild...的形式,如此就可以获得更深层次的节点。
(2)parentObj.lastChild:很显然,这个属性是获取已知节点(parentObj)的最后一个子节点。与firstChild一样,它也可以递归使用。
在使用中,如果我们把二者结合起来,那么将会达到更加令人兴奋的效果,即:parentObj.firstChild.lastChild.lastChild...
(3)parentObj.childNodes:获取已知节点的子节点数组,然后可以通过循环或者索引找到需要的节点。
注意:经测试发现,在IE7上获取的是直接子节点的数组,而在Firefox2.0.0.11上获取的是所有子节点即包括子节点的子节点。
(4)parentObj.children:获取已知节点的直接子节点数组。注意:经测试,在IE7上,和childNodes效果一样,而Firefox2.0.0.11不支持。这也是为什么我要使用和其他方法不同样式的原因。因此不建议使用。
(5)parentObj.getElementsByTagName(tagName):使用方法不再赘述,它返回已知节点的所有子节点中类型为指定值的子节点数组。例如:parentObj.getElementsByTagName('A')返回已知的子节点中的所有超链接。
3、通过临近节点获取:
(1)neighbourNode.previousSibling:获取已知节点(neighbourNode)的前一个节点,这个属性和前面的firstChild、lastChild一样都似乎可以递归使用的。
(2)neighbourNode.nextSibling:获取已知节点(neighbourNode)的下一个节点,同样支持递归。
4、通过子节点获取:
(1)childNode.parentNode:获取已知节点的父节点。
上面提到的方法,只是一些基本的方法,如果使用了Prototype等JavaScript库,可能还获得其他不同的方法,例如通过节点的class获取等等。不过,如果能够灵活运用上面的各种方法,相信应该可以应付大部分的程序

Javascript 相关文章推荐
Add a Table to a Word Document
Jun 15 Javascript
JavaScript Memoization 让函数也有记忆功能
Oct 27 Javascript
javascript学习笔记(十三) js闭包介绍(转)
Jun 20 Javascript
javascript表单验证使用示例(javascript验证邮箱)
Jan 07 Javascript
javascript精确统计网站访问量实例代码
Dec 19 Javascript
Angular中$compile源码分析
Jan 28 Javascript
JS从数组中随机取出几个数组元素的方法
Aug 02 Javascript
Vue自定义指令介绍(2)
Dec 08 Javascript
详解Node.js串行化流程控制
May 04 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 Javascript
JS中准确判断变量类型的方法
Jun 01 Javascript
微信小程序实现轮播图指示器
Jun 25 Javascript
自己的js工具 Event封装
Aug 21 #Javascript
自己的js工具 Cookie 封装
Aug 21 #Javascript
自己的js工具_Form 封装
Aug 21 #Javascript
javascript 面向对象编程基础 多态
Aug 21 #Javascript
javascript 面向对象编程基础:继承
Aug 21 #Javascript
javascript 面向对象编程基础:封装
Aug 21 #Javascript
javascript arguments 传递给函数的隐含参数
Aug 21 #Javascript
You might like
PHP聊天室技术
2006/10/09 PHP
php入门学习知识点一 PHP与MYSql连接与查询
2011/07/14 PHP
PHPWind与Discuz截取字符函数substrs与cutstr性能比较
2011/12/05 PHP
php实现网页缓存的工具类分享
2015/07/14 PHP
Laravel中如何轻松容易的输出完整的SQL语句
2020/07/26 PHP
javascript 简单高效判断数据类型 系列函数 By shawl.qiu
2007/03/06 Javascript
使用node.js半年来总结的 10 条经验
2014/08/18 Javascript
JS实现OCX控件的事件响应示例
2014/09/17 Javascript
jQuery实现表格展开与折叠的方法
2015/05/04 Javascript
JavaScript基本语法讲解
2015/06/03 Javascript
详解JavaScript对Date对象的操作问题(生成一个倒数7天的数组)
2015/10/01 Javascript
jQuery点击其他地方时菜单消失的实现方法
2016/04/22 Javascript
JavaScript简单获取系统当前时间完整示例
2016/08/02 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
bootstrap modal+gridview实现弹出框效果
2017/08/15 Javascript
jQuery除指定区域外点击任何地方隐藏DIV功能
2017/11/13 jQuery
vue.js在标签属性中插入变量参数的方法
2018/03/06 Javascript
layerUI下的绑定事件实例代码
2018/08/17 Javascript
jQuery实现的鼠标拖动画矩形框示例【可兼容IE8】
2019/05/17 jQuery
聊聊鉴权那些事(推荐)
2019/08/22 Javascript
js实现简单页面全屏
2019/09/17 Javascript
node.js实现简单的压缩/解压缩功能示例
2019/11/05 Javascript
javascript实现简单搜索功能
2020/03/26 Javascript
pyinstaller打包程序exe踩过的坑
2019/11/19 Python
python 控制台单行刷新,多行刷新实例
2020/02/19 Python
基于Python的一个自动录入表格的小程序
2020/08/05 Python
英国家喻户晓的高街品牌:River Island
2017/11/28 全球购物
百思买加拿大:Best Buy Canada
2018/03/20 全球购物
毕业生找工作推荐信
2013/11/21 职场文书
国家助学金获奖感言
2014/01/31 职场文书
道德大讲堂实施方案
2014/05/14 职场文书
三严三实对照检查材料
2014/08/25 职场文书
微笑面对生活演讲稿
2014/09/23 职场文书
世界红十字日活动总结
2015/02/10 职场文书
工作能力自我评价2015
2015/03/05 职场文书
Python Pandas解析读写 CSV 文件
2022/04/11 Python