js中document里的常用函数

来源：互联网发布：淘宝出售假冒商品扣分编辑：程序博客网时间：2024/05/18 00:32

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上面.