【推荐】javascript基础之查找元素(访问节点)
2013-07-04 20:28
288 查看
有好长时间没更新博客了,回学校呆了两个月,期间也发生了不少事情,酸甜苦辣咸,各种感觉都有。回想这段时间真的没少疯、没少醉、没少哭,也许每个人都想用一种不同的方式来纪念这逝去的大学吧。现在想起来还有种淡淡的忧伤,一幅幅分别相拥而泣的画面历历在目……
更让人无奈的是公司的变动,回到北京后发现同部门的同事都走的差不多了,也就两个月的时间,变动实在有点大,虽然不知道这期间发生了什么,但仍有种不详的预感。撇开能不能留下来不说,即便留下来意义也不大。团队散了,每天也没什么工作做,尽管很安逸,但毕竟这不是我想要的。后面也许面临着重新找工作,所以这段时间会梳理些比较基础的东西,为找工作提前做好准备。好了,打住,吐槽的有点多了。
常用jQuery的话我们知道,jQuery有非常强大的选择器来查找元素(也称作访问节点),例如:基本选择器、层次选择器、过滤选择器、属性选择器等,具体可以参考之前写过的一篇文章jQuery基础之选择器。当然这些选择器都是jQuery扩展的一些方法,那么使用原生js时要怎样来查找元素呢?今天就来简单梳理下。
DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName()。使用这几种方法方法我们可以查找html文档中的任意html元素。
另外这里之所以用正则来匹配而没有直接用aEle[i].className == sClass,是避免标签的class值为多个时,出现匹配失效的情况。
更让人无奈的是公司的变动,回到北京后发现同部门的同事都走的差不多了,也就两个月的时间,变动实在有点大,虽然不知道这期间发生了什么,但仍有种不详的预感。撇开能不能留下来不说,即便留下来意义也不大。团队散了,每天也没什么工作做,尽管很安逸,但毕竟这不是我想要的。后面也许面临着重新找工作,所以这段时间会梳理些比较基础的东西,为找工作提前做好准备。好了,打住,吐槽的有点多了。
常用jQuery的话我们知道,jQuery有非常强大的选择器来查找元素(也称作访问节点),例如:基本选择器、层次选择器、过滤选择器、属性选择器等,具体可以参考之前写过的一篇文章jQuery基础之选择器。当然这些选择器都是jQuery扩展的一些方法,那么使用原生js时要怎样来查找元素呢?今天就来简单梳理下。
DOM定义了多种查找元素的方法,除了我们常用的getElementById(),还有getElementsByTagName()和getElementsByName()。使用这几种方法方法我们可以查找html文档中的任意html元素。
getElementById()
首先来看下getElementById(),这个方法很简单,只需在参数中传入html标签的id属性值即可,由于html页面中的id具有唯一性,因此该方法返回的是单个元素对象。例如:1 <span id="span1">span标签</span> 2 <script> 3 var oSpan = document.getElementById('span1'); //查找span元素 4 alert(oSpan.innerHTML); //弹出span标签中的内容 5 </script>
getElementsByTagName()
getElementsByTagName()参数需传入的是一个html标签名,它返回的是html文档中所有与之匹配的元素列表,这个列表具有部分数组的特性,因此也称其为类数组。当我们想操作某个特定的元素时,我们可以使用数组索引或item()来实现,例如:1 <script> 2 var oDiv = document.getElementsByTagName('div'); //查找所有div元素,返回一个元素列表 3 /* 操作特定元素 */ 4 alert(oDiv[0].innerHTML) //弹出第一个div中的内容 5 alert(oDiv.item(1).innerHTML) //弹出第二个div中的内容 6 </script>当然我们还可以通过length属性来循环遍历节点:
1 <script> 2 var oDiv = document.getElementsByTagName('div'); 3 for(var i = 0; i < oDiv.length; i++){ 4 //do something 5 } 6 </script>
getElementsByName()
getElementsByName()常用来查找表单元素,参数中传入html标签的name属性值,由于文档中多个html标签的name值可能相同(如单选按钮),因此该方法返回的也是一个元素列表。具体操作方法与getElementsByTagName()类似,这里不在赘述。1 <script> 2 var oIpt= document.getElementsByName('city'); //查找name值为city的元素 3 alert(oIpt[0].value); 4 alert(oIpt.item(1).value); 5 </script>
getByClass()
虽然使用上面的几种方法已经可以满足常见需求,但是为了更方便的访问元素节点,我们一般会自己封装一个通过class来查找元素的方法:1 <script> 2 /** getByClass **/ 3 function getByClass(oParent, sClass){ 4 var aEle = oParent.getElementsByTagName('*'); 5 var re = new RegExp('\\b' + sClass + '\\b'); 6 var aResult = []; 7 for(var i = 0; i < aEle.length; i++){ 8 if(re.test(aEle[i].className)){ 9 aResult.push(aEle[i]); 10 } 11 } 12 return aResult; 13 } 14 </script>getByClass需传入两个参数,其中oParent为参考节点,即在oParent节点中查找元素,sClass为要查找的元素class的值。通过循环将oParent内的html标签的class值与传入的sClass值一一对比,符合条件的会存入到数组aResult中,最后再返回这个数组。
另外这里之所以用正则来匹配而没有直接用aEle[i].className == sClass,是避免标签的class值为多个时,出现匹配失效的情况。
相关文章推荐
- javascript基础之查找元素的详细介绍(访问节点)
- javascript基础之查找元素的详细介绍(访问节点)
- Javascript脚本语言简介、查找元素节点、查看是否存在子节点、根节点
- 【php基础班】第14天 DOM概述、节点的访问、随机显示星星、HTMLDOM简介和访问、元素对象属性、事件对象
- JavaScript_查找指定节点之后的下一个元素节点_getNextElement(node)_JavaScript扩展
- C++语法基础--顺序容器(三)--关系操作符,容器大小的操作,访问元素,删除元素,查找元素
- Javascript基础——利用Dom元素对节点进行创建、插入和删除、文档碎片
- JavaScript 获取元素在父节点中的下标(推荐)
- JavaScript基础 通过id查找节点 通过节点的style属性添加鼠标放上出现小手的效果 getElementById style
- JavaScript基础(三) ---- 字符串、Math、节点、元素的动态
- JavaScript基础 通过id查找节点 通过节点的style属性添加鼠标放上出现小手的效果 getElementById style
- JavaScript基础进阶之数组方法总结(推荐)
- 跟我学JavaScript--HTML DOM--DOM访问,修改,元素
- [Java基础]数组/二维数组/查找最大元素/平均值/复制/颠倒/矩阵相乘
- 轻松学习JavaScript二十一:DOM编程学习之获取元素节点的子节点和属性节点
- JavaScript HTML DOM 元素(节点)
- JavaScript的DOM编程--04--获取元素节点的子节点
- JavaScript HTML DOM 元素(节点)
- JavaScript基础 通过parentNode.bgColor设置一个节点的父节点的背景颜色
- JavaScript DOM中获取元素节点的父节点和父节点名