说说下面几个方法:
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有很大的不同。如下例子:
这段代码会弹出两个提示框内容分别为 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等。
例子如下
在使用中querySelector 和querySelectorAll 各浏览器的实现略有差别,也会存在一些潜在的BUG。等碰到了再总结进来。
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。等碰到了再总结进来。