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>