原生的DOM选择器

ywxowen999

浏览: 23633 次
性别:
来自: 吉林

最近访客更多访客>>

chenkechao

duna_ncw

eyeityou

wuhuidelang

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

javaScript

DOM javascript getElement querySelector

说说下面几个方法：
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有很大的不同。如下例子：

<!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等。
例子如下

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

分享到：

一段优美的正则 | IE 中的id 与name

2012-09-08 15:38
浏览 3131
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论