javascript基础之DOM

什么是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.οnlοad=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 x:
y:
returnValue:事件的返回值
cancelBubble:取消事件的向下传递。
srcElement:事件源对象
keyCode:键盘按键的Unicode码值
//////////////////////////////////////////////////////////////////////////////////
//只适用于IE


///////////////////////////////////////////////////////////////////////////////////////////////////
//只有当文档中有元素时，点击才会弹出它的坐标信息。而在其它地方无效。不会弹出任何信息。 

Click in the document. An alert box will alert 
the x and y coordinates of the mouse pointer.

/////////////////////////////////////////////////////////////////////////////////////////////////////
button属性：
1为左键，2为右键。指示哪个鼠标键按下。
如下一段代码所示：

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文件夹
应用：
考虑下面一段代码：

下面是对其解码：











document对象标签的属性

document对象的对象属性：
forms[]数组：
anchors[]数组：
links[]数组：
images[]数组：
scripts[]数组
applets[]数组
all[]数组:用来表示文档中所有的标签对象的集合。
stylesheets[]数组对象
body对象： 
title对象
考虑下面一段代码：

对它的引用可以为：
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对象编写一个隐藏和显示网页元素的代码：



-list1

• item1


• item2


• item3

list2



实现图像的漂移效果：



<br> 将这个文本区域设置的很大，以便出现滚动条。 <br>

body对象的方法：
appendChild
考虑到下面一段代码：

 
 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:可以实现用户无论怎么样拖动，不随着其发动。总是漂浮在网页中。
  考虑如下的代码：
 
 
 
 form对象
 onsubmit事件，最重要的事件。也是专有的事件。 典型用法就是用来检测表单的合法性。一定要使用return 语句来返回处理的结果.false取消。true继续。
 考虑下面一段代码：
 

 会员号码（6位数字）：
 
 

 
form对象的对象属性：
all数组属性form标签下所有的子元素的集合。
elements[]数组属性：代表除了 之外的所有标签的集合。
children[]数组属性：包含其下的直接子元素的集合。
form对象的方法：
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表单元素对象实例

用户名:

密码：

实例二：
死锁现象，就是在两个文本框中一直来回的切换焦点。
实例三：用回车键在文本框中切换焦点

用户名:

密码：

第十二章    文档对象模型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;
文档树检测：

文档树检测

DOM Test Heading

---

a paragraph of text is just an example

• 链接

NodeName:

NodeType:

NodeValue:

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);
结果是something to add
然后就可以将其插入到文档中适当位置。
如下所示：

插入与追加

---

---

12.3.3   结点复制
有时候，不想创建或插入一个全新的元素，可以使用cloneNode（）方法创建某个结点的一个副本。该方法捕获一个Boolean值，用来指定该副本是包含结点的所有子结点。（称为深度复制，还是只包含该结点本身。即该方法获取一个参数。Boolean值。用来指定是深复制还是只包含该结点本身。
12.3.4   删除与替换
经常会遇到从树中删除一个结点的情况，Node对象提供了一个removeChild(child)方法来实现结点的删除。其中的参数是要删除的结点。例如：
current.removeChild(current.lastChild);
该代码会删除指定结点的最后一个子结点，removeChild()方法返回删除的Node对象
此外，还可以使用replaceChild(newChild,oldChild)方法实现对结点的替换，其中的newChild为替换后的结点，替换后，旧内容将被删除。

this is a paragraph

this is another pagraph to delete

this is yet another paragraph

this paragraph has an em element in it;

---

12.3.5  结点修改
虽然元素属性可以修改，但是元素不能修改，如果要进行修改，应当改变结点本身。
对于下面的结点：

this is a test

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支持很多关于属性操作的方法，由于数量多，用法简单，给出一示例程序。













Change my attrributes!

颜色




字号：

1
2
3
4
5
6
7

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

简单的HTML编辑器

 

B
BIG
CITE
CODE
EM
H1
H2
H3
H4
H5
H6
I
P
U
SAMP
SMALL
STRIKE
SUB
SUP

１２.４.３　　　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元素的内容。

this is atestof innerHTML;

12.5.2  其他类似属性
在IE中，还支持innerText,outerText,outerHTML.
12.5.3  document.all[]
在IE浏览器对象模型中，已经有大量的脚本代码，最具代表性的就是document.all[].在DOM下，可以使用document.getElementByTagName()方法来存取一个文档中所有的元素。然后创建一个实例属性性 document.all[].

	
move your mouse over the red square.
	

	

		custon tooltip

		more details can go here.
	


//可折叠区域，可以通过点击某个地方来显示或者隐藏屏幕中的某个区域。使用CSS的display特性就可以完成
//这个操作，当display设置为none时，元素就被从页面流中移除，页面重绘时就像这个元素不存在一样。
//这与将visibility设置为hidden不同，它仅仅隐藏元素，以留下一个元素所占的空白。


	


click here
this is some
	content to show and hide.>/div>
 
click here
this is some content to show and hide


////////////////////////////////
//访问样式表

	
		
		
			
			
			
				

				
			

/////////////////////////////////////////
//最终样式
//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
//innerText,用来修改起始标签和结束标签之间的文本
oDiv.appendChild(document.createTextNode("new text for the div."));
oDiv.innerText="new text for thd div.";
//innerHTML可以包含HTML标签
oDiv.innerHTML="Helloworld