简明现代魔法 -> JavaScript -> DOM 编程艺术:getElementById() 方法

DOM 编程艺术:getElementById() 方法

2010-02-07

DOM 提供了一个名为 getElementById() 的方法,这个方法将返回一个对象,这个对象就是参数 id 所对应的元素节点。假如有一个 form,它的 id 为 nowamagic,如果你想获得这个 form 的属性值,那么你调用这个方法即可:

document.getElementById("nowamagic");

这个方法是与 document 对象相关联的函数。

举个例子吧。

<script language="javascript">
	alert(typeof document.getElementById("nowamagic"));
</script>
  
<form id="nowamagic">
</form>

运行代码时,屏幕将弹出 alert 对话框,它向你报告 document.getElementById("nowamagic") 的类型,它是一个对象。

事实上,文档中的每一个元素都对应着一个对象。

运行测试

其它介绍

getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。

HTML DOM 定义了多种查找元素的方法,除了 getElementById() 之外,还有 getElementsByName() 和 getElementsByTagName()。

不过,如果您需要查找文档中的一个特定的元素,最有效的方法是 getElementById()。

在操作文档的一个特定的元素时,最好给该元素一个 id 属性,为它指定一个(在文档中)唯一的名称,然后就可以用该 ID 查找想要的元素。

实例2

<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>

查看运行效果

实例3

getElementById() 是一个重要的方法,在 DOM 程序设计中,它的使用非常常见。我们为您定义了一个工具函数,这样您就可以通过一个较短的名字来使用 getElementById() 方法了:

function id(x) 
{
  	if (typeof x == "string") return document.getElementById(x);
  	return x;
}

上面这个函数接受元素 ID 作为它们的参数。对于每个这样的参数,您只要在使用前编写 x = id(x) 就可以了。

随机文章推荐
网站分类


注:如需转载本文,请注明出处(原文链接),谢谢。更多精彩内容,请进入简明现代魔法首页。

进入新博客
喜欢本文,就分享它吧
给我留言
您的名字:
您的邮件:
您的网站:


 

copyright © 2009 简明现代魔法    学习、分享、进步

power by Gonn 感谢所有关心和支持本站的朋友们