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); 输出3
for(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="选择" οnclick="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="创建超链接" οnclick="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="删除元素" οnclick="test2()"/>
<input type="button" value="创建元素" οnclick="test1()"/>