原生的DOM选择器

最新推荐文章于 2023-03-20 20:34:38 发布

zhangzeyuaaa

最新推荐文章于 2023-03-20 20:34:38 发布

阅读量6.8k

点赞数

分类专栏： Web前端

Web前端专栏收录该内容

28 篇文章 0 订阅

订阅专栏

说说下面几个方法：
getElementById,
getElementsByName,
getElementsByTagName
getElementsByClassName
querySelector
querySelectorAll

一、getElementById　　
    语法：　　obj= document.getElementById( sID ) 　　
    参数：　　sID :　必选项。字符串(String)。　　
返回值：　　obj:　对象(object)。
根据指定的 id 属性值得到对象。返回 id 属性值等于 sID 的第一个对象的引用。假如对应的为一组对象，则返回该组对象中的第一个。如果无符合条件的对象，则返回 null。
这个方法再简单不过，不过在IE上还是可能会遇到麻烦，那就是id与name混淆的问题请参照 IE中id与name的BUG

二、 getElementsByName　　
    语法：　　objNodeList = document.getElementsById( name ) 　　
    参数：　　name:　必选项。字符串(String)。　　
返回值：　　objNodeList :　元素数组
document.getElementsByName(name)该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。
另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的 name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。如果一个文档中有两个以上的标签NAME相同，那么getElementsByName()就可以取得这些元素组成一个数组。
getElementsByName方法在IE浏览器下也存在id与name混淆的问题。

三、getElementsByTagName　　
    语法：　　objNodeList = document.getElementsByTagName(tagname); 或
                             = document.getElementById('ID').getElementsByTagName("tagname");
    参数：　　tagname:　必选项。字符串(String)。　　
返回值：　　objNodeList :　元素数组

getElementsByTagName() 方法会使用指定的标签名返回所有的元素（作为一个节点列表），这些元素是您在使用此方法时所处的元素的后代，这一点于getElementById和getElementsByName有很大的不同。如下例子：

Javascript代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='area'>
<input type="text" name="aaa" value="11"/>
<input type="text" name="aaa" value="22"/>
</div>
<input type="text" name="aaa" value="33"/>
</body>
<script type="text/javascript" charset="UTF-8">
var domsArr = document.getElementById('area').getElementsByTagName("input");
for( var i = 0, len = domsArr.length; i < len; i++){
alert(domsArr[i].getAttribute('value'));
}
</script>
</html>

这段代码会弹出两个提示框内容分别为 11，22。
四、getElementsByClassName　　
    语法：　　objNodeList = document.getElementsByClassName(class); 或
                             = document.getElementById('ID').getElementsByClassName("class");
    参数：　　class:　必选项。字符串(String)。　　
返回值：　　objNodeList :　元素数组
getElementsByClassName方法在标准浏览器中都已经实现,它的特点与getElementsByTagName。
IE这个怪胎没有这个方法，需要我们自己动手。具体的解决方法推荐大家去看这篇博客 document.getElementsByClassName的理想实现

五、querySelector和querySelectorAll
    语法：　　objNodeList = document.querySelectorAll(cssselecter); 或
= document.getElementById('ID').querySelectorAll("cssselecter");
    参数：　　cssselecter:　必选项。字符串(css选择器)。　　
   返回值：　　objNodeList :　元素数组
querySelector 和 querySelectorAll 方法是 W3C Selectors API 规范中定义的。他们的作用是根据 CSS 选择器规范，便捷定位文档中指定元素。两者不同的是querySelector返回的是一个匹配对象，querySelectorAll返回的一个集合(objNodeList )。

目前支持他们的浏览器包括。包括 IE8(含) 以上版本、 Firefox、 Chrome、Safari、Opera等。
例子如下

Javascript代码

<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<div id='area'>
<input type="text" class="bbb" name="aaa" value="11"/>
<input type="text" class="bbb" name="aaa" value="22"/>
</div>
<input type="text" class="bbb" name="aaa" value="33"/>
</body>
<script type="text/javascript" charset="UTF-8">
var domsArr = document.getElementById('area').querySelectorAll(".bbb");
for( var i = 0, len = domsArr.length; i < len; i++){
alert(domsArr[i].getAttribute('value'));
}
var dom = document.querySelector("body>[name='aaa']");
alert(dom.getAttribute('value'));
</script>
</html>

在使用中querySelector 和querySelectorAll 各浏览器的实现略有差别，也会存在一些潜在的BUG。等碰到了再总结进来。

zhangzeyuaaa

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
原生的DOM选择器

说说下面几个方法：getElementById,getElementsByName,getElementsByTagNamegetElementsByClassNamequerySelectorquerySelectorAll一、getElementById　　语法：　　obj= document.getElementById( sID ) 　　
复制链接

扫一扫