js里要得到html中的元素,可以通过document里的函数获得。这样获得了html中的元素就可以方便的进行后续操作。获得html中的元素有三种方式,分别是通过id,name和tagname,其中html中元素的id要保持唯一,如果没有保持唯一的话,通过id方式获得的是html中的第一个此id的元素,此外id最好不要以数字开头,因为有些浏览器就会识别不出来,访问无效。通过name和tagname访问获得是元素集。代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>document1.html</title>
<script type="text/javascript">
function test1() {
var myhref=document.getElementById("a1");
window.alert(myhref.innerText);
}
function test2() {
//id不能唯一,但是name可以重复
var hobbies = document.getElementsByName("hobby");
for(var i = 0; i < hobbies.length; i++) {
if(hobbies[i].checked) {
window.alert("你的爱好是" + hobbies[i].value )
}
}
}
//通过标签名来获取对象(元素)
function test3() {
var myObjs = document.getElementsByTagName("input");
for(var i = 0; i < myObjs.length; i++) {
window.alert(myObjs[i].value);
}
}
</script>
</head>
<body>
<a id="1a" href="http://www.sohu.com">a连接到sohu</a>
<a id="1a" href="http://www.sina.com">连接到sina</a>
<a id="1a" href="http://www.163.com">连接到163</a>
请选择你的爱好
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="旅游"/>旅游
<input type="checkbox" name="hobby" value="音乐"/>音乐
<input type="button" value="testing" οnclick="test2()"/>
<input type="button" value="获取所有input" οnclick="test3()"/>
</body>
</html>
通过document中的函数还可以为html页面动态的添加或删除元素,效果就如游戏中的发射子弹,和子弹碰到障碍物的销毁。代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>document2.html</title>
<script type="text/javascript">
function test1() {
//创建元素
var myElement = document.createElement("input");//引号内写希望创建的html元素标签名
myElement.type="button";
myElement.value="我是button";
myElement.id="id1";
//给新的元素添加必要的信息
//myElement.href="http://www.sina.com";
//myElement.innerText="连接到新浪";
//myElement.style.left="200px";
//myElement.style.top="300px";
//myElement.position="absolute";
//添加到document.body
//document.body.appendChild(myElement);
//将元素添加到div
document.getElementById("div1").appendChild(myElement);
}
function test2() {
//删除一个元素
//document.getElementById("div1").removeChild(document.getElementById("id1"));
//第二种比较灵活
document.getElementById("id1").parentNode.removeChild();
window.alert(document.getElementById("id1").parentNode.id);
}
</script>
</head>
<body>
<input type="button" οnclick="test1()" value="动态的创建一个超链接"/>
<input type="button" οnclick="test2()" value="删除一个元素"/>
<div id="div1" style="width: 200px;height: 400px;border: 1px solid red;">div1</div>
</body>
</html>
其中第一段注释部分是将元素添加到body上面.