《网页设计之Dom剖析》由会员分享，可在线阅读，更多相关《网页设计之Dom剖析（20页珍藏版）》请在金锄头文库上搜索。
1、Dom (Document Object Model) 什么是Dom(Document Object Model) Dom:文档对象模型，DOM可以以一种独立于平台和语言 的方式访问和修改一个文档的内容和结构。 HTML DOM 定义了所有 HTML 元素的对象和属性，以及 访问它们的方法。 JavaScript通过调用Dom中的属性、方法就可以对网页中的 文本框、层等元素进行编程控制。例如通过操作文本框的 Dom对象，就可以读取文本框中的值、设置文本框中的 值。 DOM的优势:使用DOM时，将把所有的XML文档信息都存 于内存中，并且遍历简单，增强了易用性。 DOM的缺点:效率低，解析速度慢
2、，内存占用量过高，对 于大文件来说几乎不可能使用。 节点 根据 DOM，HTML 文档中的每个成分都是一个节 点。 整个文档是一个文档节点 每个 HTML 标签是一个元素节点 包含在 HTML 元素中的文本是文本节点 每一个 HTML 属性是一个属性节点 注释属于注释节点 节点层次 HTML 文档中的所有节点组成了一个文档树（或节点 树）。HTML 文档中的每个元素、属性、文本等都代 表着树中的一个节点。树起始于文档节点，并由此继 续伸出枝条，直到处于这棵树最低级别的所有文本节 点为止。 节点关系 除文档节点之外的每个节点都有父节点。 举例， 和 的父节点是 节点，文本节点 Hello wor
3、ld! 的 父节点是 节点。 大部分元素节点都有子节点。比方说， 节点有一个子节点： 节点。 节点也有一个子节点：文本节点 DOM Tutorial。 当节点分享同一个父节点时，它们就是同 辈（同级节点）。比方说， 和 是 同辈，因为它们的父节点均是 节 点。 节点也可以拥有后代，后代指某个节点的 所有子节点，或者这些子节点的子节点， 以此类推。 节点也可以拥有先辈。先辈是某个节点的 父节点，或者父节点的父节点，以此类 推。 DOM Tutorial DOM Lesson one Hello world! 查找并访问节点 getElementById() 和 getElementsByTagN
4、ame() 这两种方法 ，可查找整个 HTML 文档中的任何 HTML 元素。 getElementById()方法：返回对拥有指定ID的第一个对象的 引用。document.getElementById(id)。 getElementsByName()方法：返回带有指定名称对象的集 合。因为文档中name的属性不可能唯一，所以 getElementsByName()方法返回的是元素的数组，而不是一 个元素。 getElementsByTagName()方法：返回带有指定标签名的对象 的集合。返回元素的顺序是它们在文档中的顺序。 getElementsByTagName(“*“)表示返回文档中
5、所有元素的列 表。可以用getElementsByTagName()方法获取任何类型的 HTML元素的列表。 访问节点示例 示例1：返回文档中所有 元素的一个节点列表： document.getElementsByTagName(p); 示例2：返回所有 元素的一个节点列表，且这些 元素必须是 id 为 maindiv 的元素的后代： document.getElementById(maindiv).getElementsByTag Name(p); 节点列表 使用节点列表时，通常要把此列表保存在一个变量中， 例如 var x=document.getElementsByTagName(p);
6、 变量 x 包含着页面中所有 元素的一个列表。 var x=document.getElementsByTagName(p); for (var i=0;ix.length;i+) / do something with each paragraph 也可以通过索引号来访问某个具体的元素，要访问第三 个 元素，var y=x2; 综合示例 document对象的方法 write()方法：向文档写HTML表达式或javaScript代码。 writeln()方法：等同于write()方法，不同的是在每个表达 式之后写一个换行符。 document.write(“百度 ”) 在onclick事件中
7、写的代码会冲掉页面内容，只有在页面加 载过程中write才会与原有内容融合在一起。 open()方法：打开一个新的文档，并擦除当前文档的内 容。 open(“text/html”,replace) 。注意：调用open()方法 打开一个新文档并且用write()方法设置文档内容后，必须 用close方法关闭文档，并迫使其内容显示出来。 close()方法：关闭一个由document.open()方法打开的输出 流，并显示选定的数据。 open示例 Window对象的方法 Window对象代表当前浏览器的窗口，使用window对 象的属性、方法的时候可以省略window，例如 window.al
8、ert(a)可以省略成alert(aa)。 alert方法，弹出消息对话框 confirm方法，显示“确定”、“取消”对话框，如果 按下“确定”按钮，就返回true，否则返回false prompt方法，显示一个用户可以输入信息的对话框， 并返回用户输入的内容，可以预设输入信息的默认值 ，例如prompt(“提示信息”,”默认值”)。 Confirmprompt示例 Window对象的方法 close方法，关闭当前浏览器。 moveTo方法，将浏览器窗口移动到屏幕上的某个位置 resizeTo方法，改变浏览器窗口的大小 createPopup()方法：用于创建一个pop-up窗口。 windo
9、w.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（）被
10、 调用或窗口被关闭。由setInterval返回的ID值作为 clearInterval（）方法的参数。 setInterval(“alert(hello)”, 5000)，第一个参数为代码的字符串，第二个参数为间隔时 间，返回值为定时器的标识。 clearInterval取消setInterval的定时执行，因为setInterval 可以设定多个定时，因此clearInterval要指定清除哪个定时 器的标识。 setInterval示例 Window对象的方法 setTimeout()方法：用于在指定的毫秒数后调用函数 或计算表达式。注意：setTimeout()只执行code一 次。如
11、果要多次调用，就要用setInterval()，或让code 自身调用setTimeout()。 clearTimeout()方法：取消setTimeout()方法设置的 timeout。clearTimeout(id_of_setTimeout) setTimeout示例 Window对象的事件 onload事件，浏览器窗口加载完网页文档时触发。 onunload事件，浏览器窗口关闭之后触发。 onbeforeunload事件，浏览器窗口准备关闭窗口时触 发。 onload、 onunload、 onbeforeunload事件示例 onclick, onmousemove, onmouse
12、over, onmousedown, onmouseup, onkeydown, onkeyup,onkeypress 事件 鼠标点击时执行 ，如果响应的代码太多，就放到单独的函数中 function bodymousedown() alert(“响应鼠标按下事件！”); alert(“事件响应机制”); Window对象的属性 Closed属性，返回一个布尔值，声明了窗口是否已经关闭 ，为只读属性。 defaultStatus属性，设置或返回窗口状态栏中的默认文本 ，只读属性。 status属性，是一个可读可写的字符串，在窗口状态栏显 示一条消息，当擦除status声明的消息时，状态栏恢复成
13、 defaultstatus设置的值。 screenTop属性，返回窗口左上角顶点在屏幕上的垂直位 置 screenLeft属性，返回窗口左上角顶点在屏幕上的水平位置 状态栏文字运动效果/标题栏走马灯效果示例 Window对象的属性 Window.location.href=“”，重新导向新的 地址，和navigate方法类似，window.location.reload()刷新页 面。 window.event，用来获得发生事件时的信息。 altkey,ctrlkey,shiftkey属性，bool类型，表示发生事件时 alt,ctrl,shift键是否按下 clientX, clientY
14、发生事件时鼠标在客户区的坐标; screenX, screenY 发生事件时鼠标在屏幕上的坐标; offsetX, offsetY发生事件时鼠标相 对于事件源的坐标; returnvalue属性，returnvalue=false，取消事件的处理 srcElement，获得事件源对象 keyCode，发生事件时的按键值 button,发生事件时的鼠标按键，1为左键，2为右键，3为左右键同 时按,4为中键。 event示例 Window对象的属性 screen,输出屏幕信息，alert(“分辨率:” + screen.width + “*” + screen.height)。 clipboard
15、Data，对粘贴板的操作。clearData(“Text”) 清空粘贴板; getData(“Text”)读取粘贴板的值，返回值 为粘贴板中的内容; setData(“Text”, value), 设置粘贴板 中的值。 clipboardData示例 oncopy, onpaste:复制、粘贴时触发 禁止复制 Window对象的属性 复制网站内容时，自动在复制的内容后添加版权声明。 function modifyClipboard() 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编写程序获得注册、登录页面中的表单内 容。 注意：单选框、复选框、下拉列表中值的获取
