- dom对象详解-document对象
dom编程最重要的一个对象
最复杂的
document对象代表的是整个html文档，因此可以访问到文档中的各个对象（元素）。
是学习dom编程的一个最关键所在
- 常用函数
- write()
这个是向文档输出文本或是js代码
- writeln（）
- 这个也 是向文档输出文本或是js代码，
- 不同的是多一个换行符。但是实际上对于浏览器来说，输出效果并没有区别。
- 可在每个表达式后写一个换行符
- getElementById()
- 规定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
- 复选框，要求id号一样，getElementById()就不好用了
- 通过getElementByName()返回对象集合
- 集合中规模也是length，这点和Java不同
案例：
<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){
程序只认value
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()
场景：想获得input控件有哪些，这个时候靠名字也拿不到
通过标签名来获取对象（元素）
将来做编程，会遇到各种问题，少一个知识点，都得去问别或者是查资料
html编程就是元素，dom编程就是对象了
综合案例：
<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");
遍历
不止是value，type，name都可以获取
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>
下面再来看几个重要的函数
这几个在文档中没有
可以动态操作html文档的
dom分为5级
- createElement()
动态的创建节点html（元素）
- appendChild()
动态的添加节点（元素）
- removeChild()
动态的删除节点（元素）
如何动态的创建 ，删除 html元素
举例说明：
动态的添加元素到document文档中，动态的删除document中的元素
<html>
<head>
<script language="javascript">
function test1()
{
//创建元素
创建完成如果不添加到document对象上，是看不见的
超链接如果没有必要的信息，也是看不见的
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()
{
删除一个元素,必须首先知道它的父元素是谁
这是第一种删除元素的方法，这种方法不灵活
无论是动态创建的还是，原先就有的，都可以删除
动态删除的话，要有一个id号，不然的话无法删除
要清楚的知道父子关系
document.getElementById("div1").removeChild(document.getElementById("id1"));
//第二种比较灵活(推荐)
可以通过子元素找到父元素，然后再进行删除
到公司里面，要求灵活的方式，就采用这种方式，比较好
document.getElementById("id1").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>