js中document里的惯用函数
日期：2014-05-16 浏览次数：20368 次
js中document里的常用函数
通过document中的函数还可以为html页面动态的添加或删除元素，效果就如游戏中的发射子弹，和子弹碰到障碍物的销毁。代码如下：
其中第一段注释部分是将元素添加到body上面.
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" onclick="test2()"/>
<input type="button" value="获取所有input" onclick="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" onclick="test1()" value="动态的创建一个超链接"/>
<input type="button" onclick="test2()" value="删除一个元素"/>
<div id="div1" style="width: 200px;height: 400px;border: 1px solid red;">div1</div>
</body>
</html>
其中第一段注释部分是将元素添加到body上面.
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
