javascript基础之DOM

来源：互联网发布：pid算法的c语言实现编辑：程序博客网时间：2024/06/04 18:48

什么是DHTML？
JavaScript将浏览器本身，网页文档，以及网页文档中的HTML元素都用内置对象来表示，这些对象以及对象之间的层次关系统称为文档对象模型DOM。文档对象模型。
动态HTML。
window对象：
window对象代表浏览器的的整个窗口，编程人员可以利用window对象控制浏览器窗口的各个方面。如改变状态栏上的显示文字，移动窗口，弹出对话框等。
对window对象属性和方法的引用，可以省略window.这个前缀。
window对象方法：
alert("这是用alert弹出来的");弹出对话框
window.confirm("您确定不");确认对话框
window.prompt("输入值","");输入对话框
navigator对象
setInterval:每隔多长时间定时调用。 setInterval(func,1000);每隔一秒钟自动调用函数func
setTimeout:设置多长时间后去执行程序代码。
clearInterval：取消前面调用的setInterval所设置的方法。
clearTimeout:取消setTimeout所设置的多长时间后去执行代码
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
var i=0;
var id;
function func(){
alert("123");
if(i==5)
clearInterval(id);
i++;
}
function set(){
id=setInterval(func,1000);
}
setTimeout(set,5000);
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
moveTo:窗口移动到的位置
resizeTo:窗口缩放的位置
///////////////////////////////////////////////////////////////////////////////////////////////////////////
//窗口抖动的代码程序
//本人测试在火狐浏览器下无法运行，只在IE下测试有效。
//自己写的抖动代码
var rx=400;
var ry=300;
var mx=400,my=300;
window.onload=function(){
window.resizeTo(rx,ry);
window.moveTo(mx,my);
setInterval(func,100);
}
function func(){
window.moveTo(mx+10,my+10);
window.setTimeout(funcs,50);
}
function funcs(){
window.moveTo(mx-10,my-10);
}
//////////////实际抖动代码
window.resizeTo(400,400); //改变窗口大小
var loop=0;//设置震动次数
var offx;
var offy;
var dir=1;//震动方向 -1，1
var timer;//定时器引用
timer=setInterval(function(){
window.moveTo(500,180);
if(loop > 1000){
clearInterval(timer);}
dir=Math.random()*10>5?1:-1;
offx=Math.random()*20*dir;
offy=Math.random()*20*dir;
window.moveBy(offx,offy);
loop++;
},10);

//////////////////////////////////////////////////////////////////////////////////////////////////////////
open:window.open('http://www.baidu.cn');
window对象中的event对象属性：
altKey:用于检测是否alt键按下。如果为真，表示按下。
ctrlKey::用于检测是否ctrl键按下。
shiftKey:用于检测是否shift键按下.
clientX,clientY:用于返回鼠标相对窗口的有效工作空间。X,Y坐标。是指不包括菜单和滚动条的区域。
screenX,screenY:返回相对于屏幕的X,Y坐标。
offsetX,offsetY:返回鼠标相对事件源的顶点的X<Y坐标。
x:
y:
returnValue:事件的返回值
cancelBubble:取消事件的向下传递。
srcElement:事件源对象
keyCode:键盘按键的Unicode码值
//////////////////////////////////////////////////////////////////////////////////
//只适用于IE
<script language="javascript">
function onkeypressevent(){
var str="";
if(window.event.altKey)
str+="alt键按下,,";
if(window.event.shiftKey)
str+="shift键按下";
if(window.event.ctrlKey)
str+="ctrl键按下";
alert(str);
alert(window.event.keyCode);
}
</script>
<body onkeypress="onkeypressevent();">
///////////////////////////////////////////////////////////////////////////////////////////////////
//只有当文档中有元素时，点击才会弹出它的坐标信息。而在其它地方无效。不会弹出任何信息。
<script type="text/javascript">
function show_coords(event)
{
var cx=event.clientX;//相对于客户区
var cy=event.clientY;
var sx=event.screenX;//相对于屏幕
var sy=event.screenY;
var ox=event.offsetX;//相对于事件源顶点，这两个在firefox下是没有定义的。
var oy=event.offsetY;
alert("X coords: " + cx + ", Y coords: " + cy+"screenx:"+sx+",screeny:"+sy+"offsetx:"+ox+"offsety:"+oy);
}
</script>
<body onmousedown="show_coords(event)">
<p>Click in the document. An alert box will alert
the x and y coordinates of the mouse pointer.</p>
/////////////////////////////////////////////////////////////////////////////////////////////////////
button属性：
1为左键，2为右键。指示哪个鼠标键按下。
如下一段代码所示：
<script language="javascript">
function checkCancel(){
if(window.event.shiftKey)
window.event.cancelBubble=true;
}
function showSrc(){
if(window.event.srcElement.tagName=="img")
alert(window.event.srcElement.src);
}
</script>
window对象事件：
onload事件：
onunload事件：
onbeforeunload事件：
onclick
onmousemove
onmouseover
onmouseout
onmousedown
onmouseup
onkeydowm
onkeyup
onkeypress
window对象属性、：
closed属性：返回窗口是不是关闭
opener:返回打开当前窗口的那个window对象
defaultstatus:用于返回窗口状态栏中缺省显示的内容
status:返回窗口状态栏当前正在显示的内容
screenTop:
screenLeft:
window对象中的对象类型的属性：
表示这个属性是对象类型的属性。
location对象：用于返回和设置当前网页文档的URL信息。
event对象：获取和设置当前所发生的有关信息
frames数组对象：表示某个窗口中所有的子窗口的集合。
screen对象：提供了显示器的分辨率和色彩信息。
clipboardData:提供了读取剪切板内容的若干方法
history:重新装载曾经访问过的URL的若干方法
navigator:用于获取浏览器的名称，版本号等信息，。
document:整个网页文档对象。
举例如下：
window.location.href="www.it315.com"。即让浏览器载入一个新的页面。
等效于：window.navigate("www.it3145.com");
location对象的replace方法也可用于载入一个新的页面。
location对象的reload方法用于刷新当前页面。
如何实现论坛列表的自动刷新功能：
document对象：
Cookie是什么？
在浏览器与服务器产生有状态信息会话的方式。
document对象的Cookie属性
是一系列字符串，设置的值与返回的值是不一样的。其设置格式如下：
name=value; expires=Fri,31,Dec 1999 23:59:59 GMT; path=/bookshop; domain=it315.org; secure;
读取格式：
expires用来设置该Cookie在浏览器中的有效时间。如果没有设置。这条Cookie信息将随浏览器关闭而消失。
domain:cookie信息在哪个域中保持有效。
path:设置在服务器哪个目录下有效。
secure:安全。
在Javascript中，通常都是采用escape函数对参数值进行编码，采用unescape函数对参数值进行解码。
cookie的存储位置：
一个Cookies文件夹
应用：
考虑下面一段代码：
<script language=javascript>
var never=new Date();
never.setTime(never.getTime()+10*365*24*60*60*1000);
var expstring="expires="+never.toGMTString()+";";
document.cookie="area="+escape("北京海淀")+";"+expstring;
document.cookie="zipcode=10000;";
</script>
下面是对其解码：
<html>
<head></head>
<body>
<script language="javascript">
var never=new Date();
never.setTime(never.getTime()+10*365*24*60*60*1000);
var expstring="expires="+never.toGMTString()+";";
document.cookie="area="+escape("北京海淀")+";"+expstring;
document.write(document.cookie);
</script>
<br><br><br>
<script language="javascript">
function getCookie(name){
var result=null;
var myCookie=" "+document.cookie+";";
var searchName=" "+name+"=";
var startOfCookie=myCookie.indexOf(searchName);
var endOfCookie;
if(startOfCookie!=-1)
{
startOfCookie+=searchName.length;
endOfCookie=myCookie.indexOf(";",startOfCookie);
result=unescape(myCookie.substring(startOfCookie,endOfCookie));
}
return result;
}
document.write(document.cookie+"<br>");
document.write("area is"+getCookie("area"));
document.write("area is"+getCookie("gData1059693014"));
</script>
</body>
</html>
document对象标签的属性
<script>
defer属性：不需要设置值的属性。提高浏览器的性能，意思是说在浏览器加载网页时先暂时不要加载脚本代码的内容，。等到对文档分析和加载完毕时，再加载脚本代码的内容，如果其中有document.write属性，将会覆盖掉原文档内容，。
language属性：脚本语言的类型。已经过时了。嘻嘻
type属性：用来代替language.type="text/javascript"
<meta http-equiv="Content-Script-Type" content="text/javascript">用来说明文档中的默认脚本代码。
src属性：引用外部文件
使用<script>标签的src属性实现为其它网页提供各种扩展功能。如对网页访问的计数。
如何在您的网页中显示访问者的IP地址和地区呢？
把下面一段代码加入到您的网页中就可以了。
<script src="http://www.it315.org/ip/inquire.asp">
</script>
document对象的对象属性：
forms[]数组：
anchors[]数组：
links[]数组：
images[]数组：
scripts[]数组
applets[]数组
all[]数组:用来表示文档中所有的标签对象的集合。
stylesheets[]数组对象
body对象：
title对象
考虑下面一段代码：
<img name=img1 src="samble.src">
对它的引用可以为：
document.all[7].src;
document.all.img1.src
document.all["img1"].src
document.all.item("img1").src
document.images[0].src
document.images.img1.src
document.images["img1"].src
document.images.item(0).src
document.images.item("img1").src
document对象的方法;
write
writeln
open:用于打开一个新的文档，于window相似。建议用window
close:关闭文档流。
clear:清除文档中所有内容。
getElementById
getElementByName
getElementByTagName
createElement
createStyleSheet
对网页文档内容进行加密的一般方式：
我们可以查看到源文件的内容
document对象中的属性：
与body标签相关的属性：
alinkColor
linkColor
vlinkColor
bgColor
fgColor:指定文本的默认前景颜色
描述网页文档信息的属性：
charset属性：用于设置和返回浏览器显示网页内容时所使用的当前字符编码集。
defaultCharset:缺省字符编码集。
cookie属性：是一个初学者比较难懂的问题。
fileCreatedData属性：用于返回网页文档的创建时间。
fileModifiedData属性
fileSize属性：返回当前网页文档的大小。
lastModified属性：
URL属性
URLUnecoded属性：返回经过URL解码的字符串
referrer:用于返回导航到当前网页的超链接源的文件。
body对象的对象属性：
all数组与style对象
all数组：
使用style对象编写一个隐藏和显示网页元素的代码：
<html>
<head></head>
<body>
<span id="b1" style="border:thin ridge;cursor:hand" onclick="dealclick()">-</span>list1<br>
<ul id="list1">
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
list2
<script type="text/javascript">
function dealclick(){
var a=document.getElementById("b1");
if(a.innerText=="+"){
list1.style.display='block';
a.innerText="-";

}
else
{
list1.style.display="none";
a.innerText="+";
}
}
</script>
</body>
</html>
实现图像的漂移效果：
<html>
<head></head>
<body>
<textarea cols="500" rows="500" name="textarea1" id="textarea1">
将这个文本区域设置的很大，以便出现滚动条。
</textarea>
<div id="float_icon" style="visibility:hidden;position:absolute;top:0px;left:0px"><a href="#"><img src="31.jpg"></a></div>
<script type="text/javascript">
var dirx=1;
var diry=1;
var xpos=0;
var ypos=0;
var float_icon=document.getElementById("float_icon");
float_icon.style.top=0;
document.body.all.float_icon.style.left=0;
document.body.all("float_icon").style.visibility="visible";
window.setInterval("move()",100);
function move(){
xpos+=2*dirx;
ypos+=2*diry;
float_icon.style.top=ypos;
float_icon.style.left=xpos;
if(xpos<=0||xpos+float_icon.offsetWidth>=document.body.clientWidth)
dirx=-dirx;
if(ypos<=0||ypos+float_icon.offsetHeight>=document.body.clientHeight)
diry=-diry;
}
</script>
</body>
</html>
body对象的方法：
appendChild
考虑到下面一段代码：
<script type="text/javascript">
function createA(){
var oa=document.createElement("a");
oa.href="#";
oa.innerText="交流网";
document.body.appendChild(oa);
}
</script>
<body onload="createA()">
body对象的属性、：：
专用属性：
background:网页背景图像的URL地址。
bgProperties:用来设置背景图像是否随鼠标的滚动而滚动。
text：用来设置文本的显示颜色。
topMargin
leftMargin
rightMargin
bottomMargin
通用属性：
id
name
className;返回class值
innerText:设置或返回元素标签对之间的内容
innerHTML;：
outerText:用于设置或返回标签本身以及其中的内容
outerHTML
offsetTop
offsetLeft:用于设置或返回元素边界左上角相对于它上层元素的左上角的垂直和水平位置。
offsetWidth:
offsetHeight:返回元素对象自身的宽度和高度
clientTop
clientLeft:客户区的左上角顶点与自身边界的垂直和水平位置。
clientWidth
clientHeight:返回元素上的可见客户区的高度和宽度。指显示出来的那部分，当有滚动条的时候。
scroll:yes,no.是否出现滚动条
scrollTop:
scrollLeft:左边界与当前被显示内容左边界的距离。
scrollWidth:
scrollHeight:整个内容的宽度和高度。包括没有显示出来的。
body对象的事件：
onselectstart:用于在用户选取网页内容的时候发生的。如果它返回false从而就可以阻止用户选取网页中的内容，从而阻止用户复制网页中的内容。
onscroll:可以实现用户无论怎么样拖动，不随着其发动。总是漂浮在网页中。
考虑如下的代码：
<script type="text/javascript">
function dealscroll(){
it315.style.top=document.body.scrollTop+50;
it315.style.left=document.body.scrollLeft;
}
</script>
<body onscroll="dealscroll()" onselectstart="return false">
<a id=it315 style="position:absolute;left:0;top:50">
form对象
onsubmit事件，最重要的事件。也是专有的事件。典型用法就是用来检测表单的合法性。一定要使用return 语句来返回处理的结果.false取消。true继续。
考虑下面一段代码：
<form name="myform" id="myform" method="post" onsubmit="return dosubmit(this)">
会员号码（6位数字）：<input type=text name="mytext" id="mytext">
<input type=submit name="mysubmit" id="mysubmit" value="递交">
</form>
<script type="text/javascript">
function dosubmit(frm){
if(frm.mytext.value.length!=6)
{alert("必须是六位");return false;}
}
else{
var my_text=frm.mytext.value;
for(var i=0;i<my_text.length;i++){
if(my_text.charAt(i)<'0'||my_text.charAt(i)>9)
{alert("请输入数字";return false;}

}
return true;
}
</script>
form对象的对象属性：
all数组属性form标签下所有的子元素的集合。
elements[]数组属性：代表除了<input type=image> 之外的所有标签的集合。
children[]数组属性：包含其下的直接子元素的集合。
form对象的方法：
submit方法，模拟用户点击<input type="submit">。
item方法返回某个字段元素所对应的对象。，接受的参数可以是表单元素的名称。
form对象的属性：
name,target,title,enctype,encoding,method,action.
form表单中的字段元素对象
方法：
blur失去焦点
focus方法某个表单字段元素获得焦点
click方法
setCapture:捕获当前网页鼠标的事件。
releaseCapture:取消
select元素的add方法，用于在列表框中增加一个选择项。
表单字段元素的属性：
defaultValue:返回表单元素的默认值。
disabled用于设置和返回表单元素的该属性的状态，
form返回字段元素的表单对象
readOnly 用于设置和返回表单元素的readOnly状态
title用于返回表单元素的title属性。
value属性：用于返回表单元素的Value值
checked属性：单选按钮和复选按钮的选中状态，
列表框的专有属性、：
multiple
selectedIndex
options数组
表单元素对象事件：
onchange
onfocus
onselect
form表单元素对象实例
<html>
<head></head>
<body>
<form method="post">
用户名:<input type="text" name="user" id="user"><br>
密码： <input type="passward" name="pass" id="pass" onfocus="checkName(this.form)">
<br>
<input type="submit" name="submit1" id="submit1" value="递交">
</form>
<script language="javascript">
function checkName(frm){
if(frm.user.value=="")
{alert("你必须先输入用户名");frm.user.focus();}
}
</script>
</body>
</html>
实例二：
死锁现象，就是在两个文本框中一直来回的切换焦点。
实例三：用回车键在文本框中切换焦点
<form method="post">
用户名:<input type="text" name="user" id="user" onkeydown="toNext(this.form)"><br>
密码： <input type="passward" name="pass" id="pass" >
<br>
<input type="submit" name="submit1" id="submit1" value="递交">
</form>
<script type="text/javascript">
function toNext(frm){
if(window.event.keyCode==13)
{
frm.pass.focus();
window.event.returnValue=false;
}
}

</script>

第十二章文档对象模型DOM
文档对象模型DOM是一个基础性的概念，主要涉及网页页面元素的层次关系。很好地理解DOM对于编写出高效，实用的JavaScript程序非常有帮助的。
12.1 DOM概述
12.1.1 DOM分层
第0层：与上一章所讲相同。为经典JavaScript对象模型。
第一层：提供了通过公用函数集来访问页面所有元素的功能。在该层次中，页面中的所有元素在任何时候都可以读写。
第二层：提供了更进一步的机制，可以访问包括XML，CSS等的页面元素。简称DOM2.
12.1.2 Document树
DOM有12种结点类型，但很多只与XML有关，下面为与HTML相关的结点类型：
1元素：一个XHTML或XML元素
2属性：一个元素的一个属性
3文本：附加在HTML或XML元素上的一段文本
8注释：一个HTML注释
9文档：即树中的顶层元素
10文档类型：文档类型定义
12.2 访问元素
在DOM中，可以对页面元素进行访问，甚至是对其进行操作。本节介绍DOM中访问页面元素的方法。
12.2.2DOM结点属性：
nodeName: 包含结点名称
nodeValue: 包含了结点内部值，通常只用于文本结点
nodeType: 结点类型。对应于数字。
parentNode: 如果存在，指向当前结点的双亲结点
childNodes: 访问子结点列表
firstChild: 如果存在，则指向当前元素的第一个子结点
lastChild: 如果存在，则指向当前元素的最后一个子结点
previousSibling: 指向当前结点的前一个兄弟结点
nextSibling 指向当前结点的后一个兄弟结点
attributes: 元素的属性列表
ownerDocument 指向包含该元素的HTMLDocument对象
12.2.3 相邻结点检测
在上例中，事先知道某个结点的兄弟结点和子结点，若不知道某个结点的子结点时，可以使用hasChildNodes()方法，该方法返回一个Boolean值，指明当有结点是某有子结点。
if(current.hasChildNodes())
current=current.firstChild;
同样，当不知道结点的兄弟和双亲结点时，可使用如下形式：
if(current.parentNode)
current=current.parentNode;
文档树检测：
<html>
<head>文档树检测</head>
<body>
<h1>DOM Test Heading</h1>
<hr>
<p>a paragraph of <em>text</em> is just an example</p>
<ul>
<li><a href="#">链接</a></li>
</ul>
<form name="testform" id="testform" acton="#" method="get">
NodeName:<input type="text" id="nodename" name="nodename"><br>
NodeType:<input type="text" id="nodetype" name="nodetype"><br>
NodeValue:<input type="text" id="nodevalue" name="nodevalue"><br>

</form>
<script language="javascript">

</script>
<form action="#" method="get">
<input type="button" value="双亲结点" onclick="currentElement=nodeMove(currentElement,'parent');">
<input type="button" value="第一个子结点" onclick="currentElement=nodeMove(currentElement,'firstChild');">
<input type="button" value="最后一个子结点" onclick="currentElement=nodeMove(currentElement,'lastChild');">
<input type="button" value="后一个兄弟结点" onclick="currentElement=nodeMove(currentElement,'nextSibling');">
<input type="button" value="前一个兄弟结点" onclick="currentElement=nodeMove(currentElement,'previousSibling');">
<input type="button" value="返回根结点" onclick="currentElement=document.documentElement;update(currentElement);">
</form>
</body>
</html>
12.3 结点
有了前面对DOM树的了解，本节介绍对结点的操作。主要包括创建结点，结点的插入，添加，以及结点的删除与替换。
12.3.1 创建
用来创建结点的DOM方法：
createAttribute(name) 创建一个由name指定的元素名称，很少用于已经有的元素，因为有预定义的属性名。可以直接进行操作
createComment(string) 创建一个由string指定的HTML或XML注释
createDocumentFragment() 创建一个包含结点信息的文档片断
createElement(tagName) 创建一个由字符串参数tagName指定的元素
createTextNode(string) 创建一个文本结点
例如：创建一个新结点和一个创建一个文本结点的代码如下：
newNode=document.createElement('p');
newText=document.createTextNode("something to add!");
12.3.2 插入和追加
Node对象有insertBefore（newChild,referenceChild)和appendChild(newChild)两个方法用来插入结点。
appendChild()方法作为某个结点的方法来调用，在该结点的子结点的结尾添加一个newChild.
insertBefore()方法指定在referenceChild之前插入一个newChild。在实际应用中，需要访问某个结点的双亲结点，以获得insertBefore（）方法的信息，。
可以使用appendChild（）方法将下面两个结点链接起来。
newNode.appendChild(newText);
结果是<b>something to add</b>
然后就可以将其插入到文档中适当位置。
如下所示：
<html>
<head>
</head>
<body>
<script language="javascript">

</script>
<h1><center>插入与追加</center></h1>
<hr>
<div style="background-color:gray;">
<div id="innerDiv" style="background-color:red;"></div>
</div>
<hr>
<form id="form1" name="form1" action="#" method="get">
<input type="text" id="field1" name="field1">
<input type="button" value="前插入" onclick="appendBefore('innerDiv',document.form1.field1.value);">
<input type="button" value="中插入" onclick="insertWithin('innerDiv',document.form1.field1.value);">
<input type="button" value="后插入" onclick="appendAfter('innerDiv',document.form1.field1.value);">
</body>
</html>
12.3.3 结点复制
有时候，不想创建或插入一个全新的元素，可以使用cloneNode（）方法创建某个结点的一个副本。该方法捕获一个Boolean值，用来指定该副本是包含结点的所有子结点。（称为深度复制，还是只包含该结点本身。即该方法获取一个参数。Boolean值。用来指定是深复制还是只包含该结点本身。
12.3.4 删除与替换
经常会遇到从树中删除一个结点的情况，Node对象提供了一个removeChild(child)方法来实现结点的删除。其中的参数是要删除的结点。例如：
current.removeChild(current.lastChild);
该代码会删除指定结点的最后一个子结点，removeChild()方法返回删除的Node对象
此外，还可以使用replaceChild(newChild,oldChild)方法实现对结点的替换，其中的newChild为替换后的结点，替换后，旧内容将被删除。
<html>
<head>
<title></title>
</head>
<body>
<div id="toDelete">
<p>this is a paragraph</p>
<p>this is <em>another pagraph</em> to delete</p>
<p>this is yet another paragraph</p>
</div>
this paragraph has an <em id="toReplace">em element</em> in it;
</p>
<hr>
<form action="#" method="get">
<input type="button" value="delete" onclick="doDelete();">
<input type="button" value="replace" onclick="doReplace();">
</form>
<script language="javascript">

</script>
</body>
</html>
12.3.5 结点修改
虽然元素属性可以修改，但是元素不能修改，如果要进行修改，应当改变结点本身。
对于下面的结点：
<p id="p1" >this is a test</p>
textNode=document.getElementById("p1").firstChild;
使用上面的方法对元素内部的文本结点访问，。可以使用length属性来设置文本结点的长度。
下面列出了处理文本结点用到的方法：
appendData(string) 由文本结点的结尾添加一个String指字的字符串
deleteData(offset,count) 删除从offset处开始由count指定的字符个数
insertData(offset,string) 在offset处插入文本
replaceData(offset,count,string) 用string文本替换自Offset处开始由Count指定的文本
splitText(offset) 从offset处开始将原文本结点一分为二，左半部分作为原结点内容，右半部分作为新的文本结点
substringData(offset,.count) 返回一个字符串
12.4 属性
12.4.1 属性使用
DOM支持很多关于属性操作的方法，由于数量多，用法简单，给出一示例程序。
<html>

<head>

<title></title>

</head>

<body>
<font id="test" size="2" color="red">Change my attrributes!</font>
<script language="javascript">

</script>
<form name="testform" id="testform" action="#" method="get">
颜色<input type="text" size="8" value="" name="color" id="color">
<input type="button" value="设置颜色" onclick="theElement.setAttribute('color',document.testform.color.value);">
<input type="button" value="移除颜色" onclick="theElement.removeAttribute('color');">
<br>
字号：
<select onchange="theElement.setAttribute('size',this.options[this.selectedIndex].text);">
<option>1</option>
<option>2</option>
<option selected="selected">3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>

</select>
</form>
<script language="javascript">
document.testform.color.value=theElement.getAttribute("color");
</script>
</body>

</html>
12.4.2 DOM与HTML元素
由于很多对象属性与XHTML元素之间有着直接的映射关系，所以，要很好地掌握DOM，需要对XHTML语法有很好的理解。例如：
<html>

<head>

<title></title>

</head>

<body>
<h1 style="text-align:center;">简单的HTML编辑器</h1>
<br><br>
<div id="addHere" style="background-color:#ffffcc;border:solid;"> </div>
<br>
<br>
<form id="htmlForm" name="htmlForm" action="#" method="get">
<select id="elementList" name="elementList">
<option>B</option>
<option>BIG</option>
<option>CITE</option>
<option>CODE</option>
<option>EM</option>
<option>H1</option>
<option>H2</option>
<option>H3</option>
<option>H4</option>
<option>H5</option>
<option>H6</option>
<option>I</option>
<option>P</option>
<option>U</option>
<option>SAMP</option>
<option>SMALL</option>
<option>STRIKE</option>
<option>SUB</option>
<option>SUP</option>
</select>
<input type="text" name="elementText" id="elementText" value="default">
<input type="button" value="添加元素" onclick="addElement();">
<br><br>
<input type="button" value="插入HR" onclick="addEmptyElement('HR');">
<input type="button" value="插入BR" onclick="addEmptyElement('BR');">
<input type="button" value="删除元素" onclick="deleteNode();">
<input type="button" value="显示HTML" onclick="showHTML();">
</form>
<script language="javascript">

</script>
</body>

</html>
１２.４.３　　　DOM遍历API
在DOM第二层中引入了DOM遍历API的概念，这个概念提供了一种方法，用来对document树中的结点进行遍历和检测，。这里介绍NodeIterator和:TreeWalker对象。
12.4.4 DOMRange选择
DOM第二层提供了另一个很有用的扩展即DOMRangeAPI，允许选择文档目录的排列。
var myRange=document.createRange();
range对象创建后，可以使用myRange.setStart()方法，myRange.setEnd()方法，myRange.setStartBefore(),myrange.setStartAfter(),myRange.setEndBefore(),myRange.setEndAfter()等来设置开始点和结束点。
12.5 与DHTML相对的DOM
在DHTML中有很多对DOM的支持，本节介绍DOM对HTML元素内容的读取与修改。
12.5.1 innerHTML属性
该属性允许对HTML元素内容的简单读取和修改。可以显示相应部分的HTML代码。
也可以使用它来设置HTML元素的内容。
<html>

<head>

<title></title>

</head>

<body onload="document.testform.content.value=theElement.innerHTML;">
<div id="div1">this is a<em>test</em>of innerHTML;</div>
<script language="javascript">
var theElement=document.getElementById("div1");
</script>
<form name="testform" id="testform" action="#" method="get">
<input type="text" name="content" id="content" size="60">
<input type="button" value="设置" onclick="theElement.innerHTML=document.testform.content.value;">
</form>
</body>
</html>
12.5.2 其他类似属性
在IE中，还支持innerText,outerText,outerHTML.
12.5.3 document.all[]
在IE浏览器对象模型中，已经有大量的脚本代码，最具代表性的就是document.all[].在DOM下，可以使用document.getElementByTagName()方法来存取一个文档中所有的元素。然后创建一个实例属性性 document.all[].

<script type="text/javascript">//访问相关节点var html=document.documentElement;var head=html.firstChild;var body=html.lastChild;var head=html.childNodes[0];var body=html.childNodes[1];var head=html.childNodes.item(0);var body=html.childNodes.item(1);alert(html.childNodes.length);var body=document.body;//检测节点类型alert(document.nodeType);alert(document.documentElement.nodeType);//getElementsByTagName//getElementsByName//getElementById//getAttribute//setAttribute//createElement(),createTextNode(),appendChild()var p=document.createElement("p");  //创建p标签var textNode=document.createTextNode("hello world"); //创建文本节点p.appendChild(textNode); //添加到p节点的末尾document.body.appendChild(p); //大小写很重要////removeChild(),replaceChild(),insertBefore()var p=document.createElement("p");var old=document.createTextNode("hello world");p.appendChild(old);document.body.appendChild(p);//p.parentNode.removeChild(p);var news=document.createTextNode("hello world!!!!!");old.parentNode.replaceChild(news,old);p.insertBefore(old,news);/////////createDocumentFragment()创建文档碎片var arrText=["first","second","third","fourth","fifth","six","seven","eight","nine","ten"];var oFragment=document.createDocumentFragment();for(var i=0;i<arrText.length;i++){var op=document.createElement("p");var optext=document.createTextNode(arrText[i]);op.appendChild(optext);oFragment.appendChild(op);}document.body.appendChild(oFragment);//HTML DOM让特性像属性一样oImg=document.getElementByTagName(img)[0];alert(oImg.src);alert(oImg.border);oImg.src="mypicture2.jpg";oImg.border="1";//class===classNameoImg.className="footer"////////////////////////////////////////////////javascript中的table方法var oTable=document.createElement("table");oTable.setAttribute("border","1");oTable.setAttribute("width","100%");var oTBody=document.createElement("tbody");oTable.appendChild(oTBody);oTBody.insertRow(0);oTBody.rows[0].insertCell(0);oTBody.rows[0].cells[0].appendChild(document.createTextNode("cell1,1"));oTBody.rows[0].insertCell(1);oTBody.rows[0].cells[1].appendChild(document.createTextNode("cell2,1"));oTBody.insertRow(1);oTBody.rows[1].insertCell(0);oTBody.rows[1].cells[0].appendChild(document.createTextNode("cell1,2"));oTBody.rows[1].insertCell(1);oTBody.rows[1].cells[1].appendChild(document.createTextNode("cell2,2"));  document.body.appendChild(oTable);  //DOM遍历规范中的NodeIterator,TreeWalker对象</script>

<script type="text/javascript">//支持CSS的下一步就是让JavaScript能够访问样式表//一些常用的CSS特性以及它们对应的JavaScript中style对象的表示//background-color:style.backgroundColor;color:style.color;font:style.font;font-family:style.fontFamily;font-weight:style.fontWeight;<div id="div1" style="background-color:red;height:50px;width:50px"onmouseover="this.style.backgroundColor='blue'"onmouseout="this.style.backgroundColor='red'"></div>//DOM样式的方法//自定义鼠标提示<a href="http://www.wrox.com" title="Wrox Site">Wrox</a><html><head><script type="text/javascript">function showTip(oEvent){var oDiv=document.getElementById("divTip1");oDiv.style.visibility="visible";oDiv.style.left=oEvent.clientX+5;oDiv.style.top=oEvent.clientY+5;}function hideTip(oEvent){var oDiv=document.getElementById("divTip1");oDiv.style.visibility="hidden";}</script></head><body><p>move your mouse over the red square.</p><div id="div1" style="background-color:red;height:50px; width:50px" onmouseover="showTip(event)"onmouseout="hideTip(event)"></div><div id="divTip1" style="background-color:yellow;position:absolute;visibility:hidden;padding:5px"><span style="font-weight:bold">custon tooltip</span><br>more details can go here.</div></body></html>//可折叠区域，可以通过点击某个地方来显示或者隐藏屏幕中的某个区域。使用CSS的display特性就可以完成//这个操作，当display设置为none时，元素就被从页面流中移除，页面重绘时就像这个元素不存在一样。//这与将visibility设置为hidden不同，它仅仅隐藏元素，以留下一个元素所占的空白。<html><head><script type="text/javascript">function toggle(sDivId){var oDiv=document.getElementById(sDivId);oDiv.style.display=(oDiv.style.display=="none")?"block":"none";}</script></head><body><div style="background-color:blue;color:white;font-weight:bold;padding:10px;cursor:pointer"onclick="toggle('divContent1')">click here</div><div style="border:3px solid blue; height:100px;padding:10px" id="divContent1">this is somecontent to show and hide.>/div><p> </p><div style="background-color:blue;color:white;font-weight:bold;padding:10px;cursor:pointer"onclick="toggle('divContent2')">click here</div><div style="border:3px solid blue;height:100px;padding:10px" id="divContent2">this is some content to show and hide</div></body></html>//////////////////////////////////访问样式表<html><head><title>Accessing style sheets example</title><style type="text/css">div.special{background-color:red;height:10px;width:10px;margin:10px;</style><script type="text/javascript">function getBackgroundColor(){var oCSSRules=document.styleSheets[0].cssRules||document.styleSheets[0].rules;alert(oCSSRules[0].style.backgroundColor);}</script></head><body><div id="div1" class="special"></div><input type="button" value="get background color:"onclick="getBackgroundColor()"></body></html>///////////////////////////////////////////最终样式//IE中使用currentStyle对象，它是对所有采用了的样式的合计。是只读的，不可赋值。var oDiv=document.getElementById("div1");alert(oDiv.currentStyle.backgroundColor);//DOM中的最终样式var oDiv=document.getElementById("div1");alert(document.defaultView.getComputedStyle(oDiv,null).backgroundColor);//innerText,innerHTML<IE引入了这两个方法>//innerText,用来修改起始标签和结束标签之间的文本oDiv.appendChild(document.createTextNode("new text for the div."));oDiv.innerText="new text for thd div.";//innerHTML可以包含HTML标签oDiv.innerHTML="<strong>Hello</strong><em>world</em";var oStrong=document.createElement("strong");oStrong.appendChild(document.createTextNode("Hello"));var oEm=document.createElement("em");oEm.appendChild(document.createTextNode("world"));oDiv.appendChild(oStrong);oDiv.appendChild(document.createTextNode(" "));oDiv.appendChild(oEm);//outerText,outerHTML//与innerText,innerHTML十分相似，只不过替换的是整个目标节点oDiv.outerText="Hello world!";等同于:var oText=document.createTextNode("hello world!");var oDivParent=oDiv.parentNode;oDivParent.replaceChild(oText,oDiv);oDiv.outerHTML="<p>this is a paragraph.</p>";//范围，暂时跳过。</script>

0 0