原生的DOM选择器

最新推荐文章于 2024-09-09 09:35:48 发布

ywxowen999

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量107

点赞数

分类专栏： javaScript 文章标签： DOM javascript getElement querySelector ViewUI

本文链接：https://blog.csdn.net/ywxowen999/article/details/84286019

版权

javaScript 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

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

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

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

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

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


<!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。
[b]四、getElementsByClassName[/b]　　
语法：　　objNodeList = document.getElementsByClassName(class); 或
= document.getElementById('ID').getElementsByClassName("class");
参数：　　class:　必选项。字符串(String)。　　
返回值：　　objNodeList :　元素数组
getElementsByClassName方法在标准浏览器中都已经实现,它的特点与getElementsByTagName。
IE这个怪胎没有这个方法，需要我们自己动手。具体的解决方法推荐大家去看这篇博客[url='http://www.cnblogs.com/rubylouvre/archive/2009/07/24/1529640.html']document.getElementsByClassName的理想实现 [/url]

[b]五、querySelector和querySelectorAll[/b]
语法：　　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等。
例子如下


<!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。等碰到了再总结进来。

ywxowen999

关注

0
点赞
踩
0

收藏

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

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

扫一扫

专栏目录