dom对象详解----document对象
document对象代表的是整个html文档，因此可以访问到文档中的各个对象（元素）。
- write()
这个是向文档输出文本或是js代码
- writeln
这个也
是向文档输出文本或是js代码，不同的是多一个换行符。但是实际上对于浏览器来说，输出效果并没有区别。
- getElementById()
1. 规定html文档中 id 号要唯一，如果不唯一，则只取第一个元素
2. id号不要用数字开头
案例：
<html>
<head>
<script language="javascript">
function test()
{
var myhref=document.getElementById("a1");//其实它只找一个，只找第一个，找到第一个后就返回了，不往后执行了
window.alert(myhref);
}
</script>
</head>
<body>
<!-- 故意定义了三个id号相同的超链接 -->
<a id="a1" href="http://www.baidu.com">连接到baidu</a>
<a id="a1" href="http://www.sina.com">连接到sohu</a>
<a id="a1" href="http://www.163.com">连接到163</a>
<input type="button" value="test1" οnclick="test();"/>
</body>
</html>- getElementsByName() 注意是Elements 不是 Element
案例：
<html>
<head>
<script language="javascript">
function test2()
{
//id不能重复，但是name可以重复
var hobbies=document.getElementByName("hobby");
//window.alert(hobbies.length);
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="testing" οnclick="test2()"/>
</body>
</html>- getElementsByTagName()
通过标签名来获取对象（元素）
综合案例：
<html>
<head>
<script language="javascript">
function test()
{
var myhref=document.getElementById("a1");//其实它只找一个，只找第一个，找到第一个后就返回了，不往后执行了
window.alert(myhref);
}
function test2()
{
//id不能重复，但是name可以重复
var hobbies=document.getElementsByName("hobby");
//window.alert(hobbies.length);
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("input:"+myObjs[i].value);
}
}
</script>
</head>
<body>
<!-- 故意定义了三个id号相同的超链接 -->
<a id="a1" href="http://www.baidu.com">连接到baidu</a>
<a id="a1" href="http://www.sina.com">连接到sohu</a>
<a id="a1" href="http://www.163.com">连接到163</a>
<input type="button" value="test1" οnclick="test();"/>
请选择你的爱好
<input type="checkbox" name="hobby" value="足球"/> 足球
<input type="checkbox" name="hobby" value="旅游"/> 旅游
<input type="checkbox" name="hobby" value="音乐"/> 音乐
<input type="button" value="test2" οnclick="test2();"/>
<input type="button" value="获取所有input" οnclick="test3()"/>
</body>
</html>
下面再来看几个重要的函数
- createElement() 动态的创建节点
- appendChild() 动态的添加节点
- removeChild() 动态的删除节点
如何动态的创建 ，删除 html元素
举例说明：
动态的添加元素到document文档中，动态的删除document中的元素
<html>
<head>
<script language="javascript">
function test1()
{
//创建元素
var myElement=document.createElement("a"); //写希望创建的标签的名字
//给新的元素添加必要的信息
myElement.href="http://www.baidu.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);
}
function test2()
{
var myButton=document.createElement("input"); //写希望创建的标签的名字
myButton.type="button";
myButton.value="新加的按钮";
myButton.id="id1";
document.getElementById("div1").appendChild(myButton);
}
function test3()
{ //删除一个元素,必须首先知道它的父元素是谁
//这是第一种删除元素的方法，这种方法不灵活
document.getElementById("div1").removeChild(document.getElementById("id1"));
//第二种比较灵活(推荐)
document.getElementById("div1").parentNode.removeChild(document.getElementById("id1"));
}
</script>
</head>
<body>
<input type="button" value="动态的创建一个超链接" οnclick="test1();"/>
<input type="button" value="动态的创建一个按键" οnclick="test2();"/>
<input type="button" value="删除一个元素" οnclick="test3();"/>
<div id="div1" style="width:200px;height:400px;border:1px solid red ">div1</div>
</body>
</html>
4489
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
