Day24
-
document对象
-
document是DOM编程中最重要的一个对象
-
document对象代表整个html文档,可用来访问页面中所有的元素,是最复杂的一个dom对象,可以说是学好dom编程的关键所在。
-
document对象是window对象一个成员属性,通过window.document来访问,当然也可以直接使用document
再来看一下dom对象层次一览图:
1.write()向文档输出文本或是js代码等。
2.writeln()也是向文档输出文本或是js代码等,与write()不一样的是,这个是换行输出。
3.getElementById()
a).规定Html文档中,id号要唯一,如果不唯一,则只取第一个元素
b).id号不要以数字开头
4.getElementsByName()
通过元素的名字来获取对象集合
案例:
<html>
<head>
<title>window.test</title>
<script language="javascript" type="text/javascript">
<!--
function test1(){
var myhref = document.getElementById("a1");
window.alert(myhref.innerText);
}
function test2(){
//id必须唯一,但是名字可以重复
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);
}
}
}
//>
</script>
</head>
<body>
<a id="a1" href="http://www.sohu.com">连接到sohu</a><br/>
<a id="a1" href="http://www.sina.com">连接到sina</a><br/>
<a id="a1" href="http://www.baidu.com">连接到baidu</a><br/>
请选择你的爱好:
<input type="checkbox" name="hobby" value="足球"/>足球
<input type="checkbox" name="hobby" value="旅游"/>旅游
<input type="checkbox" name="hobby" value="音乐"/>音乐
<br/>
<input type="button" value="test" οnclick="test2()"/>
</body>
</html>
5.getElementsByTagName()
通过标签名字获取对象集合
//通过标签名来获取对象(元素)
function test3(){
var myobjs = document.getElementsByTagName("input");
for(var i =0;i<myobjs.length;i++){
window.alert(myobjs[i].value);
}
}
-
6.动态的创建元素(节点)/添加元素/删除元素
案例:
<html>
<head>
<title>day_24_2</title>
<script language="javascript" type="text/javascript">
<!--
function test1(){
//创建元素
var myElement = document.createElement("a"); //??写希望创建的html元素标签名
//给新的元素添加必要的信息
myElement.href="http://www.sina.com";
myElement.innerText="连接到sina";
myElement.target="_blank";
myElement.id="id1";
/*
myElement.style.left = "200px";
myElement.style.top="300px";
myElement.style.position="absolute";
*/
//添加到document.body上去
//document.body.appendChild(myElement);
//将元素添加到div上去
document.getElementById("div1").appendChild(myElement);
var myButton = document.createElement("input"); //??写希望创建的html元素标签名
//给新的元素添加必要的信息
myButton.type="button";
myButton.value="我是Button";
document.getElementById("div1").appendChild(myButton);
}
function test2(){
//删除一个元素
var myHref = document.getElementById("id1");
// document.getElementById("div1").removeChild(myHref);
//或者可以直接根据id号为id1的元素得到其父节点id
//这种方法比较灵活
var parentNodeId = document.getElementById("id1").parentNode.id;
document.getElementById(parentNodeId).removeChild(myHref);
}
//>
</script>
</head>
<body>
<input type="button" οnclick="test1()" value="动态地创建一个元素"/>
<input type="button" οnclick="test2()" value="删除一个元素,id号为id1"/>
<div id="div1" style="width:200px;height:400px;border:1px solid red">div1</div>
</body>
</html>
7.对dom的加强
在dom编程中,一个html文档会被当做一个dom树来对待。Dom会把所有的html元素(包括注释、文本)映射成Node节点。于是,你就可以使用Node节点(对象)的属性和方法。
案例:
<html>
<head>
<title>
DOM树
</title>
<script language="javascript" type="text/javascript">
function $(id){
return document.getElementById(id);
}
function test1(){
var tortoise=$("div1");
window.alert(tortoise.nodeName+" "+tortoise.nodeType);
window.alert(tortoise.childNodes.length);//这里会把换行符也当成一个节点(文本元素)
//兄弟节点,这时候div之间的换行符也看做是文本是它的第一个兄弟节点。
window.alert(tortoise.nextSibling.nextSibling.id);
}
</script>
</head>
<body>
<div id="div1" style ="height:125px;width:125px;">
<img src="1.jpg" style="height:124px;width:124px;">
</div>
<div id="div2" style = "height:125px;width:125px;">
<img src="2.jpg" style="height:124px;width:124px;">
</div>
<input type="button" value="test" οnclick="test1()"/>
</body>
</html>
8.document属性
-
alinkColor 当前文档访问过的超链接的颜色
-
linkColor 当前文档超链接的颜色
-
bgColor 当前文档背景色
-
fgColor 文档前景色
-
title 当前文档的标题
-
URL 当前文档的URL
-
domain 当前文档访问的域名
案例:
<html>
<head>
<title>
DOM属性
</title>
<script language="javascript" type="text/javascript">
document.fgColor="red";
document.bgColor="blue";
document.writeln(document.URL);
document.writeln(document.domain);
</script>
</head>
<body>
hello
</body>
</html>
-
body对象
body对象代表文档的主体(HTML body)
body对象是document对象的一个成员属性,通过访问document.body来访问。
使用body对象,要求文档的主体创建后才能使用,也就是说不能在文档的body主体还没有创建就去访问body。
-
body对象的常用函数和属性:
-
appendChild() 添加元素
-
removeChild() 删除元素
-
getElementByTagName() 通过html元素名称得到对象数组
-
bgColor 文档背景色
-
background 文档背景图
-
innerText 某个元素间的文本
-
innerHTML 某个元素间的html代码
-
onload事件 文件加载时触发
-
onunload事件 文档关闭时触发
-
onbeforeunload事件 文档关闭前触发
强调innerText和innerHTML的区别:
InnerHTML会当成html代码来解析,而innerText会把它当成普通文本来解析。
-
onscroll事件
广告滚动!当用户拉动滚动条时,广告图片也跟着往下。
-
onselectstart事件
当用户试图选中网页内容时触发。一般用于阻止用户选中网页内容和复制等。