前端 JS Docume

来源：互联网发布：linux常用命令rm 编辑：程序博客网时间：2024/06/06 00:32

JS Document 补充整理

1.getElementById():理论上id必须唯一，若不唯一则只能取到第一个。

2.getElementsByName()：方法可返回带有指定名称的对象的集合。该方法与 getElementById() 方法相似，但是它查询元素的 name属性，而不是id属性。另外，因为一个文档中的name属性可能不唯一（如HTML表单中的单选按钮通常具有相同的name属性），所有getElementsByName()方法返回的是元素的数组，而不是一个元素。

代码：

<script language="javascript" type="text/javascript">function test(){//id不能唯一，但是name可以重复var hobbies = document.getElementsByName("hobby");//window.alert(hobbies.length);输出3for(var i=0;i<hobbies.length;i++){//判断是否选中if(hobbies[i].checked){window.alert("你的爱好是"+hobbies[i].value)}}}  </script> </head> <body>请选择你的爱好  <input type="checkbox" name="hobby" value="足球"/>足球  <input type="checkbox" name="hobby" value="篮球"/>篮球  <input type="checkbox" name="hobby" value="网球"/>网球  <input type="button"  value="选择" onclick="test()"/>足球 </body>

3.getElementsByTagName()方法可返回带有指定标签名的对象的集合。document.getElementsByTagName(tagname)

4.如何动态创建HTML元素（参考文献XML Dom高级）(createElement())

//动态添加元素function test1(){//创建元素var myElement=document.createElement("a");//希望创建的HTML元素标签名//给新元素添加必要信息myElement.href="http://www.sina.com";myElement.innerText="新浪连接";//myElement.style.left="200px";//myElement.style.top="200px";//myElement.style.position="absolute";//绝对定位 添加到document.body//document.body.appendChild(myElement);//将元素添加到指定部件（如：div）document.getElementById("div1").appendChild(myElement);}  </script> </head> <body><div id="div1" style="width:500px;height:400px;border:1px solid red;">这是div1</div>    <input type="button"  value="创建超链接" onclick="test1()"/> </body>

test1()中也可以加入 Button

var myElement=document.createElement("input");//希望创建的HTML元素标签名//给新元素添加必要信息myElement.type="button";myElement.value="我是按钮";

5.如何动态删除元素（removeChild()）

function test1(){//创建元素var myElement=document.createElement("input");//希望创建的HTML元素标签名//给新元素添加必要信息myElement.type="button";myElement.value="我是按钮";myElement.id="id1";document.getElementById("div1").appendChild(myElement);}//动态删除元素function test2(){//删除一个元素前提是要：必须获得其父元素//删除元素 方法1（不太灵活）document.getElementById("div1").removeChild(document.getElementById('id1'));//第二种方式 （推荐）document.getElementById("id1").parentNode.removeChild(document.getElementById('id1'));}  </script> </head> <body><div id="div1" style="width:500px;height:400px;border:1px solid red;">这是div1</div>  <input type="button"  value="删除元素" onclick="test2()"/>  <input type="button"  value="创建元素" onclick="test1()"/>

0 0