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

2020-02-27 07:44:41

字体：大中小

来源：转载

供稿：网友

当然这些选择器都是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('*');

上一篇：原生javascript和jquery判断浏览器版本等信息

下一篇：浅析jQuery对select操作小结(遍历option,操作option)

学习交流

访问asp站点时候，出现“不允许的父路径”

访问asp站点时候，出现“不允许的父路径”的错误...

热门图片

猜你喜欢的新闻

猜你喜欢的关注