网页设计之Dom.

什么是Dom(DocumentObjectModel)Dom:文档对象模型，DOM可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。HTMLDOM定义了所有HTML元素的对象和属性，以及访问它们的方法。JavaScript通过调用Dom中的属性、方法就可以对网页中的文本框、层等元素进行编程控制。例如通过操作文本框的Dom对象，就可以读取文本框中的值、设置文本框中的值。DOM的优势:使用DOM时，将把所有的XML文档信息都存于内存中，并且遍历简单，增强了易用性。DOM的缺点:效率低，解析速度慢，内存占用量过高，对于大文件来说几乎不可能使用。节点根据DOM，HTML文档中的每个成分都是一个节点。整个文档是一个文档节点每个HTML标签是一个元素节点包含在HTML元素中的文本是文本节点每一个HTML属性是一个属性节点注释属于注释节点节点层次HTML文档中的所有节点组成了一个文档树（或节点树）。HTML文档中的每个元素、属性、文本等都代表着树中的一个节点。树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。节点关系除文档节点之外的每个节点都有父节点。举例，head和body的父节点是html节点，文本节点Helloworld!的父节点是p节点。大部分元素节点都有子节点。比方说，head节点有一个子节点：title节点。title节点也有一个子节点：文本节点DOMTutorial。当节点分享同一个父节点时，它们就是同辈（同级节点）。比方说，h1和p是同辈，因为它们的父节点均是body节点。节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点，以此类推。节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点，以此类推。htmlheadtitleDOMTutorial/title/headbodyh1DOMLessonone/h1pHelloworld!/p/body/html查找并访问节点getElementById()和getElementsByTagName()这两种方法，可查找整个HTML文档中的任何HTML元素。getElementById()方法：返回对拥有指定ID的第一个对象的引用。document.getElementById(id)。getElementsByName()方法：返回带有指定名称对象的集合。因为文档中name的属性不可能唯一，所以getElementsByName()方法返回的是元素的数组，而不是一个元素。getElementsByTagName()方法：返回带有指定标签名的对象的集合。返回元素的顺序是它们在文档中的顺序。getElementsByTagName(“*“)表示返回文档中所有元素的列表。可以用getElementsByTagName()方法获取任何类型的HTML元素的列表。访问节点示例示例1：返回文档中所有p元素的一个节点列表：document.getElementsByTagName(p);示例2：返回所有p元素的一个节点列表，且这些p元素必须是id为maindiv的元素的后代：document.getElementById('maindiv').getElementsByTagName(p);节点列表使用节点列表时，通常要把此列表保存在一个变量中，例如varx=document.getElementsByTagName(p);变量x包含着页面中所有p元素的一个列表。varx=document.getElementsByTagName(p);for(vari=0;ix.length;i++){//dosomethingwitheachparagraph}也可以通过索引号来访问某个具体的元素，要访问第三个p元素，vary=x[2];综合示例document对象的方法write()方法：向文档写HTML表达式或javaScript代码。writeln()方法：等同于write()方法，不同的是在每个表达式之后写一个换行符。document.write(“ahref=‘’百度/a”)在onclick事件中写的代码会冲掉页面内容，只有在页面加载过程中write才会与原有内容融合在一起。open()方法：打开一个新的文档，并擦除当前文档的内容。open(“text/html”,replace)。注意：调用open()方法打开一个新文档并且用write()方法设置文档内容后，必须用close方法关闭文档，并迫使其内容显示出来。close()方法：关闭一个由document.open()方法打开的输出流，并显示选定的数据。open示例Window对象的方法Window对象代表当前浏览器的窗口，使用window对象的属性、方法的时候可以省略window，例如window.alert(‘a’)可以省略成alert(‘aa’)。alert方法，弹出消息对话框confirm方法，显示“确定”、“取消”对话框，如果按下“确定”按钮，就返回true，否则返回falseprompt方法，显示一个用户可以输入信息的对话框，并返回用户输入的内容，可以预设输入信息的默认值，例如prompt(“提示信息”,”默认值”)。Confirm\prompt示例Window对象的方法close方法，关闭当前浏览器。moveTo方法，将浏览器窗口移动到屏幕上的某个位置resizeTo方法，改变浏览器窗口的大小createPopup()方法：用于创建一个pop-up窗口。window.createPopup()(IE支持)pop-up窗口示例open方法，打开一个新窗口，在open方法的参数列表中指定要装载的URL资源、窗口名称、窗口特性等，例如window.open(“information.html”,“_blank”,“top=0,left=0,width=200,height=200,toolbar=no”);open示例Window对象的方法导航到指定地址：navigate(“”),Chrome不支持setInterval按照指定的周期（以毫秒计）来调用函数或计算表达式。它会不停的调用函数，直到clearInterval（）被调用或窗口被关闭。由setInterval返回的ID值作为clearInterval（）方法的参数。setInterval(“alert(‘hello’)”,5000)，第一个参数为代码的字符串，第二个参数为间隔时间，返回值为定时器的标识。clearInterval取消setInterval的定时执行，因为setInterval可以设定多个定时，因此clearInterval要指定清除哪个定时器的标识。setInterval示例Window对象的方法setTimeout()方法：用于在指定的毫秒数后调用函数或计算表达式。注意：setTimeout()只执行code一次。如果要多次调用，就要用setInterval()，或让code自身调用setTimeout()。clearTimeout()方法：取消setTimeout()方法设置的timeout。clearTimeout(id_of_setTimeout)setTimeout示例Window对象的事件onload事件，浏览器窗口加载完网页文档时触发。onunload事件，浏览器窗口关闭之后触发。onbeforeunload事件，浏览器窗口准备关闭窗口时触发。onload、onunload、onbeforeunload事件示例onclick,onmousemove,onmouseover,onmousedown,onmouseup,onkeydown,onkeyup,onkeypress事件bodyonmousedown=“alert(‘哈哈’)”鼠标点击时执行，如果响应的代码太多，就放到单独的函数中scripttype=“text/javascript”functionbodymousedown(){alert(“响应鼠标按下事件！”);alert(“事件响应机制”);}/scriptbodyonmousedown=“bodymousedown()”Window对象的属性Closed属性，返回一个布尔值，声明了窗口是否已经关闭，为只读属性。defaultStatus属性，设置或返回窗口状态栏中的默认文本，只读属性。status属性，是一个可读可写的字符串，在窗口状态栏显示一条消息，当擦除status声明的消息时，状态栏恢复成defaultstatus设置的值。screenTop属性，返回窗口左上角顶点在屏幕上的垂直位置screenLeft属性，返回窗口左上角顶点在屏幕上的水平位置状态栏文字运动效果/标题栏走马灯效果示例Window对象的属性Window.location.href=“”，重新导向新的地址，和navigate方法类似，window.location.reload()刷新页面。window.event，用来获得发生事件时的信息。altkey,ctrlkey,shiftkey属性，bool类型，表示发生事件时alt,ctrl,shift键是否按下clientX,clientY发生事件时鼠标在客户区的坐标;screenX,screenY发生事件时鼠标在屏幕上的坐标;offsetX,offsetY发生事件时鼠标相对于事件源的坐标;returnvalue属性，returnvalue=false，取消事件的处理srcElement，获得事件源对象keyCode，发生事件时的按键值button,发生事件时的鼠标按键，1为左键，2为右键，3为左右键同时按,4为中键。event示例Window对象的属性screen,输出屏幕信息，alert(“分辨率:”+screen.width+“*”+screen.height)。clipboardData，对粘贴板的操作。clearData(“Text”)清空粘贴板;getData(“Text”)读取粘贴板的值，返回值为粘贴板中的内容;setData(“Text”,value),设置粘贴板中的值。clipboardData示例oncopy,onpaste:复制、粘贴时触发禁止复制bodyoncopy=“alert(‘禁止复制’);returnfalse;”Window对象的属性复制网站内容时，自动在复制的内容后添加版权声明。functionmodifyClipboard(){clipboardData.setData(‘Text’,clipboardData.getData(‘Text’)+‘本文来自网络，转载请注明来源。’+location.href);}oncopy=“setTimeout(‘modifyClipboard()’,100)”不能直接在oncopy中执行对粘贴板的操作操作历史记录window.history.back()后退window.history.forward()前进，也可以用window.history.go(-1),window.history.go(1)练习利用Dom编写程序获得注册、登录页面中的表单内容。注意：单选框、复选框、下拉列表中值的获取