JavaScript查找DOM元素的方法总结

2014-08-16 09:06:00|?次阅读|上传:huigezrx【已有?条评论】发表评论

关键词:JavaScript, Web|来源:唯设编程网

它将返回文档中所有元素的列表,元素排列的顺序就是它们在文档中的顺序。

注释:传递给 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) 就可以了。

<12>
发表评论0条 】
网友评论(共?条评论)..
JavaScript查找DOM元素的方法总结