课件-05js4.javascript基础第4章进阶4dhtml

DHTML

动态HTML启奥-Web前端培训教程第4章授课目标：Document对象DOM的操作表单与事件

动态HTML设计Document对象启奥-Web前端培训教程Document启奥-Web前端培训教程Document的属性：title：读写位于文档标记<title></title>之间的文本URL：装载文档的URL，与Window对象的location属性相同referrer：返回把浏览器带到当前文档的链接（上一个URL）domain：提供下载文档的服务器域名（防盗链）cookie：允许设置或查询当前文档的cookieDocument启奥-Web前端培训教程Document的集合：images：数组，文档对象中的所有img

元素links：数组，文档对象中的所有link对象（包含超链接和Area）forms：数组，文档对象中的所有form

元素anchors：数组，文档对象中的所有锚还记得那段神奇的魔法代码吗？Document启奥-Web前端培训教程Document的方法：open()：打开一个新的文档输出流，覆盖原有文档close()：关闭文档输出流write()：向当前文档写入文本内容writeln()：与write一样，只是末尾会追加换行Document对象还包含很多其他方法，其余的我们在DOM操作部分再做介绍DOM操作获取元素启奥-Web前端培训教程DOM结构树启奥-Web前端培训教程DOM元素之间的关系启奥-Web前端培训教程关系术语：父节点（parent）：直接位于一个节点之上的节点，是这个节点的父节点子节点（children）：直接位于一个节点下层的节点是该节点的子节点兄弟节点（sibling）：属于同一层次，具有相同父节点的节点是兄弟节点后代（descendant）：一个节点的下一层次节点的集合是那个节点的后代祖先（ancestor）：一个节点的上一层节点是那个节点的祖先通过方法查找元素启奥-Web前端培训教程Document对象有3

个查找元素的方法：getElementById("idName")：通过元素的id

属性查找因为HTML中id属性值不允许重复，该操作将返回单个元素getElementsByTagName("tagName")：通过元素的标签名查找该操作将返回一个元素集合，可通过数组的方式查找单个元素getElementsByName("name")：通过元素的name

属性查找因为元素的name属性允许重复，该操作将返回元素集合getElementsByClassName("className")：通过元素的class属性查找该属性IE浏览器只有10以上版本可以支持由于document是每个DOM树的根document.documentElement：属性，返回文档的HTML元素document.body：属性，返回文档的body元素通过对象查找元素启奥-Web前端培训教程Document针对一些遗留元素，还可以通过name属性直接查找遗留的元素：表单、表单控件、图像、applet<imgsrc="a.jpg"name="photo"/>document.photo.src;photo.src;//这里的document在某些浏览器下可以省略掉，但这并不代表photo是一个window的属性<formname="myform">

<inputtype="text"name="txt"/>

</form>myform.txt.value;节点指针查找元素启奥-Web前端培训教程在一颗DOM树环境中，任何两个元素之间都是有关联的，通过这种关联，我们也可以查找到元素Node：节点对象，元素在DOM树环境中所表现的对象形式Node对象的属性：nodeType：节点类型！nodeName：节点名称（标签名）nodeValue：节点值！attributes：数组，节点的属性集合[]ownerDocument：该节点所在的documentparentNode：父节点childNodes：数组，子节点集合[]firstChild：第一个子节点lastChild：最后一个子节点nextSibling：下一个兄弟节点previousSibling：上一个兄弟节点Node对象启奥-Web前端培训教程Node.nodeType：表示节点的类型Node.nodeValue：根据节点类型不同，所反映的值也不同元素类型节点类型节点值元素1null属性2属性值文本3节点文本注释8注释文本文档9nullDOM操作修改元素启奥-Web前端培训教程DOM元素修改启奥-Web前端培训教程在DOM元素修改包含三个方向：属性操作：获取和设置元素的属性getAttribute("属性名")：获取属性setAttribute("属性名","属性值")：设置属性element.属性名：获取属性element.属性名=属性值：设置属性CSS操作：获取和设置元素的CSS样式内容操作：操作元素本身或其后代元素DOM元素修改启奥-Web前端培训教程CSS操作：document.styleSheets引用了一个CSSStyleSheet对象，可以获得文档中所有的样式（包含<link>和<style>）CSSStyleSheet对象包含一个rules(IE)/cssRules数组document.styleSheets[0].rules[0]CSSStyleSheets对象定义了增加和删除CSS规则的方法IE：addRule()和removeRule()其他：insertRule()和deleteRule()直接处理：element.style.color="red";Css属性中的连字符“-”，在JS中被删除，取而代之的是连字符后面单词的首字母大写float是被保留的关键字，因此JS读取float属性，要用styleFloat（IE）/cssFloat属性值必须是字符串，如e.style.zIndex=“100”;属性值必须带单位，如e.style.left=“100px”；使用style的cssText属性，可以存取整个style属性值DOM元素修改启奥-Web前端培训教程内容操作：(以下的Node均代表具体对象)创建节点：注意，这两个方法是document的document.createElement(ElementName)：创建一个元素节点，参数为标签名document.createTextNode(Text)：创建一个文本节点，参数为文本内容插入节点：Node.appendChild(Node)：向节点内的末尾追加节点，被追加的节点可是元素或文本节点Node.insertBefore(Node)：在节点之前插入节点，同上替换节点：Node.replaceChild(

newNode,oldNode)：从节点内部删除指定子节点，并用新节点替换复制节点：Node.cloneNode(boolean)：复制节点，参数为布尔值，true表示复制直接点，false反之删除节点：Node.removeChild(oldNode)：删除指定子节点事件启奥-Web前端培训教程事件句柄启奥-Web前端培训教程在HTML中，如果一个表单没有提交功能，那么这个表单将没有任何用途但是有了JS，不能提交的表单一样可以接收用户的录入，所有的表单都是通过不同的事件来响应用户的输入行为，每个事件，都有一个对应的事件句柄，以"on"开头JS中的事件分为两类：原始事件（输入事件）和语义事件原始事件：当用户移动鼠标、点击鼠标或敲击键盘时生成语义事件：在特定环境中发生，如浏览器载入完毕或者表单提交时事件句柄有两种使用方式：在HTML属性中添加和在JS属性中添加<inputtype="button"onclick="alert('html')"/>element.onclick=function(){alert('js')}常用事件启奥-Web前端培训教程事件句柄说明onmouseover鼠标移动到某个对象上onmousemove鼠标在某对象上移动onmouseout鼠标离开某对象onmousedown鼠标某个键按下onmouseup鼠标某个键弹起onclick鼠标单击某个对象ondblclick鼠标双击某个对象onkeydown键盘某个键按下onkeyup键盘某个键弹起onkeypress键盘敲击事件句柄说明onload文档加载完毕执行

body专有onunload文档卸载前执行

body专有onsubmit表单提交时执行

form专有onreset表单内容重置时执行form专有onresize对象尺寸改变时执行onfocus对象获得焦点时执行onblur对象失去焦点时执行onchange内容发生改变时执行事件的触发和处理启奥-Web前端培训教程任何一个事件，都包含两层含义：触发和处理事件的触发：事件可以由用户输入来触发，也可以通过JS代码来触发事件的处理：为事件句柄定义相应的处理内容，通常该内容包含在一个函数中例如：我们定义一个form的onsubmit事件，当表单提交时，弹出一个对话框（处理）form中有一个button，当button被点击时，让form提交（触发）事件句柄的返回值事件句柄没有具体返回值，没有返回值就表示处理正常执行如果让事件句柄返回一个false，则可以终止正常处理的执行上面这句话，onsubmit事件是个例外(看演示)对于上面这个例外，还有特殊的解决办法(看演示)这个this有点忙启奥-Web前端培训教程每一个函数或者方法中，都存在一个this

指针this指针指向执行这个函数或者方法的主体对象在实际应用中，可能存在函数嵌套函数的情况，this表示离它最近的函数或者方法的主体事件句柄中的thisfunctionaa(){alert(this);}

<inputtype="button"onclick="alert(this);"/>

<inputtype="button"onclick="aa()"/><inputtype="button"name="btn"/>

myform.btn.onclick=function(){alert(this);}事件句柄的注册启奥-Web前端培训教程我们一直所说的DOM对象，实际上包含4个不同级别DOM级别0：不是W3C规范DOM级别1：专注于HTML和XML文档模型DOM级别2：添加了样式表对象模型，操作样式信息DOM级别3：规定了内容模型和文档验证，同时规定了文档加载和保存、文档查看、文档格式化和关键事件这4种DOM级别并不是升级关系，而是一种共存状态我们之前所讨论的事件句柄的使用方法，都是在0级DOM事件模型中使用的方法，而在2级DOM事件模型中，我们有了另外一种注册事件句柄的方式：事件监听（addEventListener()）事件监听启奥-Web前端培训教程事件监听：和事件句柄所做的工作一样，就是用于监听元素所捕获到的事件，然后为我们所监听的事件执行相应的方法element.addEventListener("mousedown",function(){/*执行内容*/},true);要注册的事件类型（字符串），事件名称前面不需要再加"on"要执行的处理（函数），在调用函数时，会隐式传递一个参数Event

对象调用事件句柄的时机（布尔值），true表示在捕获阶段监听，false表示在冒泡阶段监听由于事件监听中的函数没有明确指明对象，因此函数中的this并不代表当前对象removeEventListener()：移除事件监听，参数与添加事件监听完全一样，用于注销某一对象的事件监听对于事件监听，IE提供了不一样的方法：element.attachEvent("onmousedown",function(){/*执行内容*/});detachEvent()IE注册事件监听，还要带上"on"事件流程启奥-Web前端培训教程事件的响应包含三个过程：事件捕获：事件从Document对象沿着DOM树向下传播给目标节点事件执行：注册在事件目标上的事件句柄执行事件冒泡：事件从目标向上，沿着DOM树一直冒泡到Document对象，这一过程中，凡是注册事件句柄的祖先元素，都会执行相应的事件句柄在整个事件流程中，只有事件冒泡会对我们造成一些不必要的影响有些情况下，可能需要我们通过阻止事件冒泡来回避影响阻止事件冒泡的方法：Event.stopPropagation()/event.cancelBubble=true(IE)阻止事件冒泡的代码，应当写在目标对象上Event对象启奥-Web前端培训教程Event对象：注册的事件监听所执行的事件对象（不同事件Event也不同）Event的属性：以下属性均为只读type：发生事件的类型target：发生事件的节点currentTarget：发生当前正在处理的事件的节点（如果是在冒泡阶段捕获事件，这个属性的值将与target不同）eventPhase：数字，指定当前所处的事件传播过程的阶段timeStamp：Date对象，声明事件发生时间bubbles：布尔值，声明该事件是否在文档树中冒泡cancelable：布尔值，声明该事件是否具有能用preventDefault()方法取消默认动作Event的方法：stopPropagation()：阻止事件从当前正在处理的节点向上传播preventDefault()：阻止浏览器执行与事件相关的默认动作MouseEvent对象启奥-Web前端培训教程属性：以下属性均为只读altKey：布尔值，鼠标事件发生时，alt键是否被按下ctrlKey：布尔值，鼠标事件发生时，ctrl键是否被按下shiftKey：布尔值，鼠标事件发生时，shift键是否被按下metaKey：布尔值，鼠标事件发生时，meta键是否被按下button：数字，按下的是哪个键，0=左键，1=中间键，2=右键clientX/clientY：鼠标相对于浏览器窗口的坐标screenX/screenY：鼠标相对于显示器左上角的坐