javascript基础之查找元素的详细介绍(访问节点)


Posted in Javascript onJuly 05, 2013

当然这些选择器都是jQuery扩展的一些方法,那么使用原生js时要怎样来查找元素呢?今天就来简单梳理下。

DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName()。使用这几种方法方法我们可以查找html文档中的任意html元素。

getElementById()
首先来看下getElementById(),这个方法很简单,只需在参数中传入html标签的id属性值即可,由于html页面中的id具有唯一性,因此该方法返回的是单个元素对象。例如:

<span id="span1">span标签</span>
 <script>
     var oSpan = document.getElementById('span1'); //查找span元素
     alert(oSpan.innerHTML); //弹出span标签中的内容
 </script>

getElementsByTagName()
getElementsByTagName()参数需传入的是一个html标签名,它返回的是html文档中所有与之匹配的元素列表,这个列表具有部分数组的特性,因此也称其为类数组。当我们想操作某个特定的元素时,我们可以使用数组索引或item()来实现,例如:
<script>
     var oDiv = document.getElementsByTagName('div'); //查找所有div元素,返回一个元素列表
     /* 操作特定元素 */
     alert(oDiv[0].innerHTML) //弹出第一个div中的内容
     alert(oDiv.item(1).innerHTML) //弹出第二个div中的内容
 </script>

当然我们还可以通过length属性来循环遍历节点:
<script>
     var oDiv = document.getElementsByTagName('div'); 
     for(var i = 0; i < oDiv.length; i++){
         //do something
     }
 </script>

getElementsByName()
getElementsByName()常用来查找表单元素,参数中传入html标签的name属性值,由于文档中多个html标签的name值可能相同(如单选按钮),因此该方法返回的也是一个元素列表。具体操作方法与getElementsByTagName()类似,这里不在赘述。
<script>
     var oIpt= document.getElementsByName('city'); //查找name值为city的元素 
     alert(oIpt[0].value);
     alert(oIpt.item(1).value);
 </script>

getByClass()
虽然使用上面的几种方法已经可以满足常见需求,但是为了更方便的访问元素节点,我们一般会自己封装一个通过class来查找元素的方法:
<script>
     /** getByClass **/
     function getByClass(oParent, sClass){
         var aEle = oParent.getElementsByTagName('*');
         var re = new RegExp('\\b' + sClass + '\\b');
         var aResult = [];
         for(var i = 0; i < aEle.length; i++){
             if(re.test(aEle[i].className)){
                 aResult.push(aEle[i]);
             }
         }
         return aResult;
     }
 </script>

getByClass需传入两个参数,其中oParent为参考节点,即在oParent节点中查找元素,sClass为要查找的元素class的值。通过循环将oParent内的html标签的class值与传入的sClass值一一对比,符合条件的会存入到数组aResult中,最后再返回这个数组。

另外这里之所以用正则来匹配而没有直接用aEle[i].className == sClass,是避免标签的class值为多个时,出现匹配失效的情况。

Javascript 相关文章推荐
jQuery-Easyui 1.2 实现多层菜单效果的代码
Jan 13 Javascript
js判断背景图片是否加载成功使用img的width实现
May 29 Javascript
火狐下input焦点无法重复获取问题的解决方法
Jun 16 Javascript
js常用数组操作方法简明总结
Jun 20 Javascript
jquery实现浮动的侧栏实例
Jun 25 Javascript
jQuery实现带有动画效果的回到顶部和底部代码
Nov 04 Javascript
浅谈javascript中的call、apply、bind
Mar 06 Javascript
jQuery实现贪吃蛇小游戏(附源码下载)
Mar 04 Javascript
基于vue-video-player自定义播放器的方法
Mar 21 Javascript
vue cli 3.0 使用全过程解析
Jun 14 Javascript
angular的输入和输出的使用方法
Sep 22 Javascript
Element InfiniteScroll无限滚动的具体使用方法
Jul 27 Javascript
js文件缓存之版本管理详解
Jul 05 #Javascript
单击复制文字兼容各浏览器的完美解决方案
Jul 04 #Javascript
把input初始值不写value的具体实现方法
Jul 04 #Javascript
js一般方法改写成面向对象方法的无限级折叠菜单示例代码
Jul 04 #Javascript
简单实用jquery版三级联动select示例
Jul 04 #Javascript
原生javascript和jquery判断浏览器版本等信息
Jul 04 #Javascript
js将控件隐藏的方法及display属性介绍
Jul 04 #Javascript
You might like
PHP如何得到当前页和上一页的地址?
2006/11/27 PHP
PHP开发中的错误收集,不定期更新。
2011/02/03 PHP
php提交表单时判断 if($_POST[submit])与 if(isset($_POST[submit])) 的区别
2011/02/08 PHP
PHP无法访问远程mysql的问题分析及解决
2013/05/16 PHP
PHP+javascript制作带提示的验证码源码分享
2014/05/28 PHP
php判断一个数组是否为有序的方法
2015/03/27 PHP
深入解析PHP中SESSION反序列化机制
2017/03/01 PHP
PHP实现无限极分类的两种方式示例【递归和引用方式】
2019/03/25 PHP
PHP设计模式(五)适配器模式Adapter实例详解【结构型】
2020/05/02 PHP
基于jQuery图片平滑连续滚动插件
2009/04/27 Javascript
js中top、clientTop、scrollTop、offsetTop的区别 文字详细说明版
2011/01/08 Javascript
.net,js捕捉文本框回车键事件的小例子(兼容多浏览器)
2013/03/11 Javascript
jQuery中:only-child选择器用法实例
2015/01/03 Javascript
javascript实现动态加载CSS
2015/01/26 Javascript
JavaScript动态添加css样式和script标签
2016/07/19 Javascript
JavaScript基本类型值-Undefined、Null、Boolean
2017/02/23 Javascript
vue.js之vue-cli脚手架的搭建详解
2017/05/05 Javascript
Angular4实现动态添加删除表单输入框功能
2017/08/11 Javascript
微信小程序中吸底按钮适配iPhone X方案
2017/11/29 Javascript
node.js中TCP Socket多进程间的消息推送示例详解
2018/07/10 Javascript
深入理解JavaScript的值传递和引用传递
2018/10/24 Javascript
原生JavaScript创建不可变对象的方法简单示例
2020/05/07 Javascript
python django 增删改查操作 数据库Mysql
2017/07/27 Python
Django web框架使用url path name详解
2019/04/29 Python
Pycharm配置PyQt5环境的教程
2020/04/02 Python
html5 video全屏播放/自动播放的实现示例
2020/08/06 HTML / CSS
Java语言程序设计测试题判断题部分
2013/01/06 面试题
一名毕业生的自我鉴定
2013/12/04 职场文书
教师通用专业自荐书范文
2014/02/11 职场文书
2014年人事专员工作总结
2014/11/19 职场文书
2014年保卫科工作总结
2014/12/05 职场文书
死亡赔偿协议书
2015/01/28 职场文书
2015年工程师工作总结
2015/04/30 职场文书
2015年基建工作总结范文
2015/05/23 职场文书
《好妈妈胜过好老师》:每个孩子的优秀都是有源头的
2020/01/03 职场文书
Python 游戏大作炫酷机甲闯关游戏爆肝数千行代码实现案例进阶
2021/10/16 Python