第4章 JavaScript基础.ppt

4.3.6 DOM元素 替换 HTML 元素 如需替换 HTML DOM 中的元素，请使用 replaceChild() 方法： 实例 div id=div1 p id=p1This is a paragraph./p p id=p2This is another paragraph./p /div script var para=document.createElement(p); var node=document.createTextNode(This is new.); para.appendChild(node); var parent=document.getElementById(div1); var child=document.getElementById(p1); parent.replaceChild(para,child); /script 4.3.7 DOM事件 HTML DOM 允许 JavaScript 对 HTML 事件作出反应 当事件发生时，可以执行 JavaScript，比如当用户点击一个 HTML 元素时 onclick=JavaScript HTML 事件的例子： 当用户点击鼠标时 当网页已加载时 当图片已加载时 当鼠标移动到元素上时 当输入字段被改变时 当 HTML 表单被提交时 当用户触发按键时 4.3.7 DOM事件 在本例中，当用户点击时，会改变 h1 元素的内容： html body h1 onclick=this.innerHTML=hello!请点击这段文本!/h1 /body /html 4.3.7 DOM事件 在本例中，会从事件处理程序中调用函数： html head script function changetext(id) { id.innerHTML=hello!; } /script /head body h1 onclick=changetext(this)请点击这段文本!/h1 /body /html 4.3.7 DOM事件 HTML 事件属性 如需向 HTML 元素分配事件，您可以使用事件属性。 实例 向 button 元素分配一个 onclick 事件： button onclick=displayDate()试一试/button 在上面的例子中，当点击按钮时，会执行名为 displayDate 的函数。 4.3.7 DOM事件 使用 HTML DOM 来分配事件 HTML DOM 允许您使用 JavaScript 向 HTML 元素分配事件 实例 为 button 元素分配 onclick 事件 script document.getElementById(myBtn).onclick=function(){ displayDate() }; /script 在上面的例子中，名为 displayDate 的函数被分配给了 id=myButn 的 HTML 元素。当按钮被点击时，将执行函数。 4.3.7 DOM事件 onload 和 onunload 事件 当用户进入或离开页面时，会触发 onload 和 onunload 事件 onload 事件可用于检查访客的浏览器类型和版本，以便基于这些信息来加载不同版本的网页。 onload 和 onunload 事件可用于处理 cookies 实例 body onload=checkCookies() 4.3.7 DOM事件 onchange 事件 onchange 事件常用于输入字段的验证。 下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时，将调用 upperCase() 函数。 实例 input type=text onchange=upperCase() 4.3.7 DOM事件 onmouseover 和 onmouseout 事件 onmouseover 可用于在鼠标指针移动元素时触发函数。 onmouseout 事件可用于在鼠标指针离开元素时触发函数。 4.3.7 DOM事件 onmousedown、onmouseup 以及 onclick 事件 onmousedown、onmouseup 以及 onclick 事件是鼠标点击的全部过程。首先当某个鼠标按钮被点击时，触发 onmousedown 事件，然后，当鼠标按钮被松开时，会触发 onmouseup 事件，最后，当鼠标点击完成时，触发 onclick 事件。 4.3 DOM DOM 是 Document Object Model（文档对象模型）的缩写，是 W3C（万维网联盟）的标准 DOM 定义了访问 HTML 和 XML 文档的标准： “W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动