HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。
不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。
在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。
实例
例子 1
<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>
例子 2
getElementById() 是一个重要的方法,在 DOM 程序设计中,它的使用非常常见。我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了:
function id(x) {
if (typeof x == "string") return document.getElementById(x);
return x;
}
上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数,您只要在使用前编写 x = id(x) 就可以了。
// A few configuration settings
var CROSSHAIRS_LOCATION = ‘images/crosshairs.png’;
var HUE_SLIDER_LOCATION = ‘images/h.png’;
var HUE_SLIDER_ARROWS_LOCATION = ‘images/position.png’;
var SAT_VAL_SQUARE_LOCATION = ‘images/sv.png’;
var BUTON_CLOSE_LOCATION = ‘images/close.jpg’;
改为
var SELF_RELATIVE_PATH_LENGTH = 17 ;
var SELF_LOCATION = document.getElementById(“colorpicker”).src;
var SELF_FOLDER_LOCATION = SELF_LOCATION.substring(0,SELF_LOCATION.length – SELF_RELATIVE_PATH_LENGTH );
// A few configuration settings
var CROSSHAIRS_LOCATION = SELF_FOLDER_LOCATION + ‘images/crosshairs.png’;
var HUE_SLIDER_LOCATION = SELF_FOLDER_LOCATION + ‘images/h.png’;
var HUE_SLIDER_ARROWS_LOCATION = SELF_FOLDER_LOCATION + ‘images/position.png’;
var SAT_VAL_SQUARE_LOCATION = SELF_FOLDER_LOCATION + ‘images/sv.png’;
var BUTON_CLOSE_LOCATION = SELF_FOLDER_LOCATION + ‘images/close.jpg’;