您的位置：站点首页 > 技术文章 >正文

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元素的方法总结