获取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 相关文章推荐
自动生成文章摘要的代码[JavaScript 版本]
Mar 20 Javascript
jQuery学习笔记(4)--Jquery中获取table中某列值的具体思路
Apr 10 Javascript
利用js 进行输入框自动匹配字符的小例子
Jun 29 Javascript
jQuery中ajax的使用与缓存问题的解决方法
Dec 19 Javascript
jQuery使用empty()方法删除元素及其所有子元素的方法
Mar 26 Javascript
JQuery使用$.ajax和checkbox实现下次不在通知功能
Apr 16 Javascript
Bootstrap零基础学习第一课之模板
Jul 18 Javascript
js 模仿锚点定位的实现方法
Nov 19 Javascript
JavaScript优化以及前段开发小技巧
Feb 02 Javascript
详解基于vue-cli配置移动端自适应
Jan 13 Javascript
vue-cli设置publicPath小记
Apr 14 Javascript
Typescript3.9 常用新特性一览(推荐)
May 14 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程序
2012/02/04 PHP
PHP中根据IP地址判断城市实现城市切换或跳转代码
2012/09/04 PHP
php Session存储到Redis的方法
2013/11/04 PHP
jQuery获取json后使用zy_tmpl生成下拉菜单
2015/03/27 PHP
PHP+JS实现的实时搜索提示功能
2018/03/13 PHP
php实现分页功能的详细实例方法
2019/09/29 PHP
Jquery实现简单的动画效果代码
2012/03/18 Javascript
用JavaScript计算在UTF-8下存储字符串占用字节数
2013/08/08 Javascript
JQuery动画animate的stop方法使用详解
2014/05/09 Javascript
JavaScript中window.open用法实例详解
2015/04/15 Javascript
Javascript的无new构建实例详解
2016/05/15 Javascript
javascript数组常用方法汇总
2016/09/10 Javascript
bootstrap精简教程_动力节点Java学院整理
2017/07/14 Javascript
Vue.js获取被选择的option的value和text值方法
2018/08/24 Javascript
JavaScript遍历DOM元素的常见方式示例
2019/02/16 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
2019/05/09 Javascript
vue cli3 调用百度翻译API翻译页面的实现示例
2019/09/13 Javascript
微信小程序实现星星评分效果
2020/11/01 Javascript
[01:14]英雄,所敬略同——2018完美盛典宣传视频
2018/12/05 DOTA
[54:30]Liquid vs Newbee 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
python sort、sorted高级排序技巧
2014/11/21 Python
python操作字典类型的常用方法(推荐)
2016/05/16 Python
Python算术运算符实例详解
2017/05/31 Python
python中hashlib模块用法示例
2017/10/30 Python
python 格式化输出百分号的方法
2019/01/20 Python
Python实现FTP弱口令扫描器的方法示例
2019/01/31 Python
Ubuntu下Python+Flask分分钟搭建自己的服务器教程
2019/11/19 Python
Python数据可视化:幂律分布实例详解
2019/12/07 Python
python实现逻辑回归的示例
2020/10/09 Python
纯CSS3绘制打火机动画火焰效果
2016/07/18 HTML / CSS
节省高达65%的城市景点费用:Go City
2019/07/06 全球购物
我的中国梦演讲稿500字
2014/08/19 职场文书
税务干部群众路线教育实践活动自我剖析材料
2014/09/21 职场文书
个人借款协议书范本
2014/11/17 职场文书
python中requests库+xpath+lxml简单使用
2021/04/29 Python
JS数组去重详情
2021/11/07 Javascript