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(1.3.2) 7行代码搞定跟随屏幕滚动的层
May 21 Javascript
jquery构造器的实现代码小结
May 16 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
JQuery实现动态添加删除评论的方法
May 18 Javascript
JavaScript判断按钮被点击的方法
Dec 13 Javascript
干货分享:让你分分钟学会javascript闭包
Dec 25 Javascript
jQuery实现弹出窗口弹出div层的实例代码
Jan 09 Javascript
基于node下的http小爬虫的示例代码
Jan 11 Javascript
在vue中使用v-bind:class的选项卡方法
Sep 27 Javascript
js删除数组中某几项的方法总结
Jan 16 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 Javascript
Vue实现小购物车功能
Dec 21 Vue.js
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
eaglephp使用微信api接口开发微信框架
2014/01/09 PHP
PHP观察者模式示例【Laravel框架中有用到】
2018/06/15 PHP
PHPUnit + Laravel单元测试常用技能
2019/11/06 PHP
Prototype源码浅析 Enumerable部分之each方法
2012/01/16 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
js 动态加载事件的几种方法总结
2013/12/25 Javascript
Javascript学习笔记之 函数篇(二) : this 的工作机制
2014/06/24 Javascript
JavaScript DOM节点添加示例
2014/07/16 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
jQuery实现的指纹扫描效果实例(附演示与demo源码下载)
2016/01/26 Javascript
Angularjs的Controller间通信机制实例分析
2016/11/07 Javascript
javascript监听页面刷新和页面关闭事件方法详解
2017/01/09 Javascript
解决vuejs项目里css引用背景图片不能显示的问题
2018/09/13 Javascript
js Array.slice的8种不同用法示例
2019/07/10 Javascript
js构造函数constructor和原型prototype原理与用法实例分析
2020/03/02 Javascript
Vue+Openlayers自定义轨迹动画
2020/09/24 Javascript
[01:12:53]完美世界DOTA2联赛PWL S2 Forest vs SZ 第一场 11.25
2020/11/26 DOTA
浅谈python中的getattr函数 hasattr函数
2016/06/14 Python
Python实现 多进程导入CSV数据到 MySQL
2017/02/26 Python
Python协程的用法和例子详解
2017/09/09 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
win10下tensorflow和matplotlib安装教程
2018/09/19 Python
Python的UTC时间转换讲解
2019/02/26 Python
分析运行中的 Python 进程详细解析
2019/06/22 Python
简单了解Python3里的一些新特性
2019/07/13 Python
一套C#面试题
2013/10/09 面试题
三万活动总结
2014/04/28 职场文书
硕士研究生就业推荐信
2014/05/18 职场文书
2014年入党积极分子党校培训心得体会
2014/07/08 职场文书
2015国际残疾人日活动总结
2015/03/24 职场文书
简爱读书笔记
2015/06/26 职场文书
小学生红领巾广播稿
2015/08/19 职场文书
我的中国梦心得体会范文
2016/01/05 职场文书
四年级语文教学反思
2016/03/03 职场文书
小学生作文之《压岁钱的烦恼》
2019/09/27 职场文书
MySQL自定义函数及触发器
2022/08/05 MySQL