Javascript(8)-优快云博客

本文介绍了 JavaScript 中 document 对象的常用方法，包括 write(), getElementById(), getElementsByName(), getElementsByTagName() 和 createElement()。通过示例展示了如何使用这些方法来操作 HTML 元素。

昨天看了一集关于javascript内置对象document的视频教程
主要讲诉了document的几个方法。
归结一下主要知识点吧。
1，write()
说明：往浏览器窗体Body写入内容。
2，getElementById()
说明：根据节点ID得到首个节点句柄（引用）
3，getElementsByName()--不推荐使用：因为有时候同一控件可能有很多个名字相同的
说明：根据节点Name得到节点句柄，返回数组。
4，getElementByTagName()
说明：根据节点类别得到节点句柄。
5，createElement()---这个方法并没有讲诉，需要在将Dom编程的时候讲
说明：创建一个新节点。

简单示例代码如下：

View Code

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>document案例</title>
</head>
<script type="text/javascript">
function testGetElementById()
{
var dizigui=document.getElementById("dizigui");
alert(dizigui.height+""+dizigui.width)
dizigui.width=dizigui.width/3;
dizigui.height=dizigui.height/3;
var baidu=document.getElementById("baidu");
baidu.href="http://www.xaygc.com";
baidu.title="西安云工厂";
var haha=document.getElementById("haha");
haha.bgColor="red";//注意：原本属性为bgcolor但在javascript中应该改为bgColor才能起到效果
var haha1=document.getElementById("haha1");
haha1.style.backgroundColor="green";//注意：background-color应该变为backgroundColor 去掉横线然后第二个单词首字母变大写
}

function testGetElementByName()
{
var userNames=document.getElementsByName("userName");
alert(userNames.length);
for(var i=0;i<userNames.length;i++)
{
alert(userNames[i].value);
}
}

function testGetElemenstByTagName()
{
var inputs=document.getElementsByTagName("input");
alert(inputs.length);
for(var i=0;i<inputs.length;i++)
{
alert(inputs[i].type+" "+inputs[i].name+" "+inputs[i].value);
}
}

</script>
<body>
<p>
<img src="弟子规.jpg" id="dizigui"/><br>
<table><tr id="haha" bgcolor="#3366CC"><td>测试</td></tr></table><br>
<table><tr id="haha1" style="background-color:#FF3366"><td>测试1</td></tr></table><br>
<input type="button" value="button"/><br>
<a href="http://www.baidu.com" id="baidu">超链接</a><br>
<input type="button" value="getElementById" onclick="testGetElementById()"/><br>
<input type="button" value="getElementsByName" onclick="testGetElementByName()"/><br>
<input name="userName"/> <input name="userName"/> <input name="userName"/> <input name="userName"/><br>
<input type="button" value="getElementsByTagName" onclick="testGetElemenstByTagName()"/>
</p>
</body>
</html>

转载于:https://www.cnblogs.com/lhmlyx2723356/archive/2011/05/05/2037740.html