getElementById,getElementsByName,getElementsByTagName详解

Eddy 发布于2010-2-10 15:43:25 分类: 程序设计已浏览loading次网友评论1条我要评论

在vb中可用来网页自动填表、模拟网页按钮点击等……

getElementById:
语法： document.getElementById(id)
参数：id :必选项为字符串(String)
返回值：对象; 返回相同id对象中的第一个,如果无符合条件的对象，则返回 null
example：document.getElementById("id1").value;

getElementsByName:
语法： document.getElementsByName(name)
参数：name :必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：document.getElementsByName("name1")[0].value;
document.getElementsByName("name1")[1].value;

getElementsByTagName:
语法： object.getElementsByTagName(tagname) object可以是document或event.srcElement.parentElement等
参数：tagname:必选项为字符串(String)
返回值：数组对象; 如果无符合条件的对象，则返回空数组
example：document.getElementsByTagName("p")[0].childNodes[0].nodeValue;
document.getElementsByTagName("p")[1].childNodes[0].nodeValue;

注意getElementsByName 有s在里面
document.getElementById()可以控制某个id的tag
document.getElementsByName()，返回的是一个具有相同 name 属性的元素的集合，而不是某个，注意有“s”。
而 document.getElementsByTagName() 返回的是一组相同 TAG 的元素集合。
同一个name可以有多个element，所以用document.getElementsByName("theName"),他return 一个collection，引用的时候要指名index
var test = document.getElementsByName('testButton')[0];
id那个，是唯一的

getElementsByName返回的是所有name为指定值的所有元素的集合

“根据 NAME 标签属性的值获取对象的集合。”

集合比数组要松散的多, 集合里每个子项的类型可以不同, 集合只是把某些元素放在一起作为一类来使用, 相比之下数组就严格多了, 每个子项都是统一的类型. getElementsByName, getElementsByTagName, formName.elements 这类方法所得到的结果都是集合.

例1：
<html>
<head>
<title>fish</title>
< language="java">
get(){
var xx=getElementById("bbs")
alert("标记名称："+xx.tagName);
}
getElementName(){
var ele = getElementsByName("happy");
alert("无素为happy的个数：" + ele.length);
}
</></head>
<body>
<h2 id="bbs">获取文件指定的元素</h2>
<hr>
<form>
<input type="button" ="get()" ="获取标题标记">
<input type="button" name="happy" ="getElementName()" ="click "><input type="button" name="happy" ="getElementName()" ="click "><input type="button" name="happy" ="getElementName()" ="click "><input type="button" name="happy" ="getElementName()" ="click "><input type="button" name="happy" ="getElementName()" ="click ">
</form>
</body>
</html>

getElementsByName()这个方法.它对一个和多个的处理是一样的,我们可以用:
Temp = getElementsByName('happy')来引用
当Temp只有1个的时候,那么就是Temp[0],有多个的时候,用下标法Temp[i]循环获取

也有例外：
在ie 中getElementsByName(“test“)的时候返回的是id=test的object数组，而firefox则返回的是name＝ test的object的数组。
按照w3c的规范应该是返回的是name＝ test的object的数组。

firefox和ie中的getElementByID相同：获取对 ID 标签属性为指定值的第一个对象的引用。

注意getElementsByName 有s在里面
getElementById()可以控制某个id的tag
getElementsByName()，返回的是一个具有相同 name 属性的元素的集合，而不是某个，注意有“s”。

而 getElementsByTagName() 返回的是一组相同 TAG 的元素集合。

同一个name可以有多个element，所以用getElementsByName("theName")
他return 一个collection，引用的时候要指名index
var test = getElementsByName('testButton')[0];

id那个，是唯一的

document.getElementsByName:方法可返回带有指定名称的对象的集合。

该方法与 getElementById() 方法相似，但是它查询元素的 name 属性，而不是 id 属性。

另外，因为一个文档中的 name 属性可能不唯一（如 HTML 表单中的单选按钮通常具有相同的

name 属性），所有 getElementsByName() 方法返回的是元素的数组，而不是一个元素。

<html><head><script type="text/javascript">function getElements()  {  var x=document.getElementsByName("myInput");  alert(x.length);  }</script></head><body><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()"value="How many elements named 'myInput'?" /></body></html>

getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
document.getElementsByTagName(tagname)
getElementsByTagName() 方法返回元素的顺序是它们在文档中的顺序。
如果把特殊字符串 "*" 传递给 getElementsByTagName() 方法，
它将返回文档中所有元素的列表，元素排列的顺序就是它们在文档中的顺序。
注释：传递给 getElementsByTagName() 方法的字符串可以不区分大小写。
<html><head><script type="text/javascript">function getElements()  {  var x=document.getElementsByTagName("input");  alert(x.length);  }</script></head><body><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><input name="myInput" type="text" size="20" /><br /><br /><input type="button" onclick="getElements()"value="How many input elements?" /></body></html>
可以用 getElementsByTagName() 方法获取任何类型的 HTML 元素的列表。
例如，下面的代码可获取文档中所有的表：
var tables = document.getElementsByTagName("table");alert ("This document contains " + tables.length + " tables");如果您非常了解文档的结构，也可以使用 getElementsByTagName() 方法获取文档中的一个特定的元素。
例如，下面的代码可以获得文档中的第四个段落：
var myParagragh = document.getElementsByTagName("p")[3];
不过，我们还是认为，如果您需要操作某个特定的元素，使用 getElementById() 方法将更为有效。
 
getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
document.getElementById(id)
HTML DOM 定义了多种查找元素的方法，除了 getElementById() 之外，还有 getElementsByName()
和 getElementsByTagName()。
不过，如果您需要查找文档中的一个特定的元素，最有效的方法是 getElementById()。
在操作文档的一个特定的元素时，最好给该元素一个 id 属性，为它指定一个（在文档中）
唯一的名称，然后就可以用该 ID 查找想要的元素。
<html><head><script type="text/javascript">function getValue(){var x=document.getElementById("myHeader")alert(x.innerHTML)}</script></head><body><h1 id="myHeader" onclick="getValue()">This is a header</h1><p>Click on the header to alert its value</p></body></html>
getElementById() 是一个重要的方法，在 DOM 程序设计中，它的使用非常常见。
我们为您定义了一个工具函数，这样您就可以通过一个较短的名字来使用 getElementById() 方法了：
function id(x) {  if (typeof x == "string") return document.getElementById(x);  return x;  }上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数，
您只要在使用前编写 x = id(x) 就可以了。

1楼 xvzvz 回复该评论

发表于2010-2-17 13:31:12

Goldsoon has rich experience in VCT industry. By August.10, 2008, We have 328, 252 precious members, 1,852,235,400 wow gold and other game gold has been delivered successfully. We also set up worldwide branch offices in Europe, USA, China and Hong Kong. Our Support team of 400 members provide 7/24 Customer Service. If you have any questions about buying , you can contact our Live cheap wow gold Support for assistance To Make sure our customers can get Faster, Cheaper and more safe, we have established the long-term cooperation with 18,266 farming studios in China.
很不错哦