知识大全 javascript基础之查找元素的详细介绍

Posted 2022-07-20 元素

篇首语：你既认准这条路，又何必在意要走多久。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全 javascript基础之查找元素的详细介绍相关的知识，希望对你有一定的参考价值。

　　当然这些选择器都是jQuery扩展的一些方法那么使用原生js时要怎样来查找元素呢？今天就来简单梳理下 DOM定义了多种查找元素的方法除了我们常用的getElementById() 还有getElementsByTagName()和getElementsByName() 使用这几种方法方法我们可以查找文档中的任意元素 getElementById() 首先来看下getElementById() 这个方法很简单只需在参数中传入标签的id属性值即可由于页面中的id具有唯一性因此该方法返回的是单个元素对象例如

复制代码代码如下: <span id="span ">span标签</span> <script> var oSpan = document getElementById( span ); //查找span元素 alert(oSpan innerHTML); //弹出span标签中的内容 </script>

　　 getElementsByTagName() getElementsByTagName()参数需传入的是一个标签名它返回的是文档中所有与之匹配的元素列表这个列表具有部分数组的特性因此也称其为类数组当我们想操作某个特定的元素时我们可以使用数组索引或item()来实现例如

复制代码代码如下: <script> var oDiv = document getElementsByTagName( div ); //查找所有div元素返回一个元素列表 /* 操作特定元素 */ alert(oDiv[ ] innerHTML) //弹出第一个div中的内容 alert(oDiv item( ) innerHTML) //弹出第二个div中的内容 </script>

　　当然我们还可以通过length属性来循环遍历节点

复制代码代码如下: <script> var oDiv = document getElementsByTagName( div ); for(var i = ; i < oDiv length; i++) //do something </script>

　　 getElementsByName() getElementsByName() 常用来查找表单元素参数中传入标签的name属性值由于文档中多个标签的name值可能相同（如单选按钮）因此该方法返回的也是一个元素列表具体操作方法与getElementsByTagName()类似这里不在赘述

复制代码代码如下: <script> var oIpt= document getElementsByName( city ); //查找name值为city的元素 alert(oIpt[ ] value); alert(oIpt item( ) 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 = ; i < aEle length; i++) if(re test(aEle[i] className)) aResult push(aEle[i]); return aResult; </script> cha138/Article/program/Java/JSP/201311/20332