第6章 js DOM和事件处理

合集下载

相关主题

1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。

由于HTML DOM将HTML文档表示为一颗DOM对象树，每个节点对象表示文档的特定部分，因此通过修改这些对象，就可以动态改变页面元素的属性。关于元素对象的常用操作如下表所示。类型方法 createElement() 创建节点 createTextNode() appendChild() 节点操作 insertBefore() removeChild() replaceChild() 创建元素节点创建文本节点为当前节点增加一个子节点（作为最后一个子节点）为当前节点增加一个子节点（插入到指定子节点之前）删除当前节点的某个子节点替换当前节点的某个子节点说明
在操作元素属性时，style属性可以修改元素的样式，className属性可以修改元素的类名，通过这两种方法即可完成元素的样式操作。下面针对style和 className属性进行详细讲解。
（1）style属性
每个元素对象都有一个style属性，使用这个属性可以动态调整元素的内嵌样式，从而获得所需要的效果。例如： var test = document.getElementById("test");//获得待操作的元素对象 test.style.width = "200px"; //设置样式，相当于：#test{width:200px; } test.style.height = "100px"; //设置样式，相当于：#test{height:100px;} test.style.backgroundColor = "#ff0000";//设置样式，相当于：#test{backgroundcolor:#ff0000;} var testWidth = test.style.width; //获得width样式 alert(testWidth); //输出结果为“200px”
事件
事件说明
当页面加载完成时触发此事件
当页面卸载时触发此事件
onunload
事件对象（Event对象）记录了当前事件相关的信息，例如触发event对
象的元素、鼠标的位置及状态、按下的键等等。下表中列举了以下常用的按
键和相应的键码值，具体如下：
按键 A B C D E F G H I 按键 Backspae Tab 键码 65 66 67 68 69 70 71 72 73 键码 8 9 按键 J K L M N O P Q R 按键 Esc Spacebar 键码 74 75 76 77 78 79 80 81 82 键码 27 32 按键 S T U V W X Y Z 0 按键 right down 键码 83 84 85 86 87 88 89 90 48 键码 39 40 按键 1 2 3 4 5 6 7 8 9 按键 -_ .> 键码 49 50 51 52 53 54 55 56 57 键码 189 190
（1）访问指定元素一个元素对象可以拥有元素节点、文本节点、子节点或其它类型的节点。访问指定节点的常用方法如下表所示。
类型方法 getElementById() getElementsByTagName() 说明获取拥有指定ID的第一个元素对象的引用获取带有指定标签名的元素对象集合获取带有指定名称的元素对象集合获取指定class的元素对象集合（不支持IE6~8浏览器）
设置或检索用户访问过的链接的颜色
方法
名称说明
clear ( )
close ( ) write ("text")
清除当前文档
关闭输出流并强制显示发送的数据将文本写入文档
<HTML> <HEAD> <TITLE>无标题文档</TITLE> <SCRIPT language="JavaScript"> function change(color) 利用document对象的 { bgColor属性改变背景色 document.bgColor=color ; } </SCRIPT> </HEAD> <BODY> 添加鼠标悬停事件 <H2> 移过来我变色给你看看！</H2> <FONT size=4> <SPAN onMouseOver="change('red')">变红色</SPAN>| <SPAN onMouseOver="change('blue')">变蓝色</SPAN>| <SPAN onMouseOver="change('yellow')">变黄色</SPAN> </FONT> </BODY>

document对象 DOM 事件处理
属性
名称说明
alinkColor bgColor body
设置或检索文档中所有活动链接的颜色设置或检索 Document 对象的背景色指定文档正文的开始和结束
linkColor location title url
vlinkColor
设置或检索文档链接的颜色包含关于当前 URL 的信息包含文档的标题设置或检索当前文档的 URL
键盘事件是指通过键盘动作触发的事件，常用于检查用户向页面输入的内容。下面列举几个常用的键盘事件，如下表所示。事件说明当键盘上的某个按键被按下时触发此事件
类别
事件 onkeydown
键盘事件
onkeyup onkeypress
当键盘上的某个按键被按下后弹起时触发此事件
当输入有效的字符按键时触发此事件
元素对象除了节点操作，还具有一些属性和内容的操作，常用的操作方法如下表所示。
类型元素内容样式属性属性/方法 innerHTML className 说明获取或设置元素的HTML内容获取或设置元素的class属性获取或设置元素的style样式属性获取或设置元素的宽和高（不含滚动条）获取或设置元素的完整的宽和高（含滚动条）获取或设置包含滚动条，距离上或左边滚动过的距离获取或设置元素在网页中的坐标获得元素指定属性的值为元素设置新的属性为元素删除指定的属性
鼠标弹起时触发的事件
鼠标移动到某个设置了此事件的元素上时触发此事件鼠标移动时触发此事件鼠标从某个设置了此事件的元素上离开时触发此事件
鼠标移上时背景颜色变成黄色，移出时颜色恢复，单击时背景颜色变成浅蓝色
页面事件是指通过页面触发的事件，下面列举几个常用的页面事件，如表下所示。
类别
onload 页面事件
访问指定节点
getElementsByName() getElementsByClassName()
（2）访问相关元素引用完成一个页面元素对象后，可以使用DOM节点对象的parentNode、 childNodes、firstChild、lastChild、previousSibling或nextSibling属性访问相对于该页面元素的父、子或兄弟元素。具体如下表所示。
DOM(Document Object Model)称为文档对象模型，是一个表示和处理文档的应用程序接口（API），可用于动态访问、更新文档的内容、结构和样式。 DOM将网页中文档的对象关系规划为节点层级，构成它们之间的等级关系，这种各对象间的层次结构被称为节点树。如下图所示。
html
<html> <head> <title>DOM树结构</title> </head> <body> <h1>HTML树结构</h1> <ul> <li>无序列表</li> <li>无序列表</li> </ul> </body> </html>
<title>元素属性与内容操作</title> <script type="text/javascript"> function init() { var test = document.getElementById("test"); //获取test元素对象 test.innerHTML = "<h1>Hello,JavaScript!</h1>"; //元素内容操作 test.setAttribute("style","font-size:12px;color:red;"); //设置元素的属性 test.innerHTML += test.getAttribute("style") //获得元素的style属性并显示 } </script> </head> <body onload="init()"> <div id="test">test</div> </body>
（2）nodeValue 对于文本节点，nodeValue 属性包含文本。对于属性节点，nodeValue 属性包含属性值。 nodeValue属性对于文档节点和元素节点是不可用的。
（3）nodeType nodeType属性可返回节点的类型。最重要的节点类型是：元素类型节点类型元素 1 属性 2 文本 3 注释 8 文档 9
style
offsetWidth、offsetHeight scrollWidth、scrollHeight
位置属性
offsetTop、offsetLeft scrollTop、scrollLeft
属性操作
getAttribute() setAttribute() removeAttribute()
head
body
title title文本
h1 h1文本
ul
li li文本
li li文本
通常把DOM树中的每个元素称为节点（Node)。
一个文档的树形结构就是由各种不同的节点组成的。文档对象节点树有以下
特点：

每个节点树有一个根节点。除了根节点，每个节点都有一个父节点。每个节点都可以有许多的子节点。具有相同父节点的节点叫做“兄弟节点”。
鼠标事件是指通过鼠标动作触发的事件，鼠标事件有很多，下面列
举几个常用的鼠标事件，如下表所示。
类别 onclick ondblclick onmousedown 事件事件说明
鼠标单击时触发此事件
鼠标双击时触发此事件鼠标按下时触发此事件
鼠标事件
onmouseup onmouLeabharlann Baidueover onmousemove onmouseout
属性 parentNode 说明元素节点的父节点
childNodes
firstChild lastChild
元素节点的子节点数组
第一个子节点最后一个子节点
previousSibling
nextSibling
前一个兄弟节点
后一个兄弟节点
采用事件驱动是JavaScript语言的一个最基本特征，所谓的事件是指用户在访问页面时执行的操作。说到事件就不得不提到“事件处理”。事件处理指的就是与事件关联的JavaScript对象，当与页面特定部分关联的事件发生时，事件处理器就会被调用。事件处理的过程通常分为三步，具体如下：

发生事件启动事件处理程序
事件处理程序作出反应
事件监听，也叫事件绑订，指使HTML元素获取事件的能力，有3种绑订方式，以点击事件为例：（1）作为HTML属性 (2)为 DOM添加方法（3）使用监听器addEventListener
（1）nodeName nodeName属性含有某个节点的名称。元素节点的 nodeName 是标签名称属性节点的 nodeName 是属性名称文本节点的 nodeName 永远是#text 文档节点的 nodeName 永远是#document
（2）className属性元素对象的className属性用于切换元素的类名，或为元素追加类名。例如：
var test = document.getElementById("test");//获取元素对象 <div id="test"> test.className = "aa"; //添加样式，执行后：<div id="test" class="aa"> test.className = "bb"; //切换样式，执行后：<div id="test" class="bb"> alert(test.className); //获取样式，执行后输出：bb test.className += "cc"; //追加样式，执行后：<div id="test" class="bb cc"> test.className = test.className.replace(/cc/,"dd");//替换样式，执行后：<div id="test" class="bb dd"> test.className = test.className.replace(/dd/,"");//删除dd样式，执行后：<div id="test" class="bb"> test.className = ""; //删除所有样式