JavaScript基础教程与应用 第六章 DOM对象
发布时间:2024-03-06 09:03:45浏览次数:50JavaScript 基础教程与应用主 题:课件第六章 DOM 对象(二)内 容:我们这周主要学习课件第六章 DOM 对象(二)的相关内容,希望通过下面的内容能使同学们加深对本章相关知识点的理解。知识脉络:1、 DOM CSS2、 DOM 事件3、 DOM 节点重点与难点:1、重点:DOM CSS,DOM 事件。2、难点:DOM 事件。一、JavaScript HTML DOM—改变 CSSHTML DOM 允许 JavaScript 改变 HTML 元素的样式。改变 HTML 样式如需改变 HTML 元素的样式,请使用这个语法:document.getElementById(id).style.property=new style例子 1下面的例子会改变 <p> 元素的样式:<p id="p2">Hello World!</p><script>document.getElementById("p2").style.color="blue";</script>例子 2本例改变了 id="id1" 的 HTML 元素的样式,当用户点击按钮时:<h1 id="id1">My Heading 1</h1><button type="button" onclick="document.getElementById('id1').style.color='red'">点击这里</button>
二、JavaScript HTML DOM 事件HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应。对事件做出反应我们可以在事件发生时执行 JavaScript,比如当用户在 HTML 元素上点击时。如需在用户点击某个元素时执行代码,请向一个 HTML 事件属性添加 JavaScript 代码:onclick=JavaScriptHTML 事件的例子:• 当用户点击鼠标时• 当网页已加载时• 当图像已加载时• 当鼠标移动到元素上时• 当输入字段被改变时• 当提交 HTML 表单时• 当用户触发按键时例子 1在本例中,当用户在 <h1> 元素上点击时,会改变其内容:<h1 onclick="this.innerHTML='谢谢!'">请点击该文本</h1>例子 2本例从事件处理器调用一个函数:<!DOCTYPE html><html><head><script>function changetext(id){id.innerHTML="谢谢!";}</script></head><body>
<h1 onclick="changetext(this)">请点击该文本</h1></body></html>HTML 事件属性如需向 HTML 元素分配 事件,您可以使用事件属性。实例向 button 元素分配 onclick 事件:<button onclick="displayDate()">点击这里</button>在上面的例子中,名为 displayDate 的函数将在按钮被点击时执行。使用 HTML DOM 来分配事件HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件:实例向 button 元素分配 onclick 事件:<script>document.getElementById("myBtn").onclick=function(){displayDate()};</script>在上面的例子中,名为 displayDate 的函数被分配给 id=myButn" 的 HTML 元素。当按钮被点击时,会执行该函数。onload 和 onunload 事件onload 和 onunload 事件会在用户进入或离开页面时被触发。onload 事件可用于检测访问者的浏览器类型和浏览器版本,并基于这些信息来加载网页的正确版本。onload 和 onunload 事件可用于处理 cookie。实例<body onload="checkCookies()">onchange 事件onchange 事件常结合对输入字段的验证来使用。下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时,会调用 upperCase() 函数。实例
<input type="text" id="fname" onchange="upperCase()">onmouseover 和 onmouseout 事件onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。onmousedown、onmouseup 以及 onclick 事件onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时,会触发 onmousedown 事件,当释放鼠标按钮时,会触发 onmouseup 事件,最后,当完成鼠标点击时,会触发 onclick 事件。三、JavaScript HTML DOM 元素(节点)添加和删除节点(HTML 元素)。创建新的 HTML 元素如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素追加该元素。实例<div id="div1"><p id="p1">这是一个段落</p><p id="p2">这是另一个段落</p></div><script>var para=document.createElement("p");var node=document.createTextNode("这是新段落。");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script>例子解释:这段代码创建新的 <p> 元素:var para=document.createElement("p");如需向 <p> 元素添加文本,您必须首先创建文本节点。这段代码创建了一个文本节点:var node=document.createTextNode("这是新段落。");然后您必须向 <p> 元素追加这个文本节点:
para.appendChild(node);最后您必须向一个已有的元素追加这个新元素。这段代码找到一个已有的元素:var element=document.getElementById("div1");这段代码向这个已有的元素追加新元素:element.appendChild(para);删除已有的 HTML 元素如需删除 HTML 元素,您必须首先获得该元素的父元素:实例<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div><script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);</script>例子解释:这个 HTML 文档含有拥有两个子节点(两个 <p> 元素)的 <div> 元素:<div id="div1"><p id="p1">这是一个段落。</p><p id="p2">这是另一个段落。</p></div>找到 id="div1" 的元素:var parent=document.getElementById("div1");找到 id="p1" 的 <p> 元素:var child=document.getElementById("p1");从父元素中删除子元素:parent.removeChild(child);提示:如果能够在不引用父元素的情况下删除某个元素,就太好了。不过很遗憾。DOM 需要清楚您需要删除的元素,以及它的父元素。
这是常用的解决方案:找到您希望删除的子元素,然后使用其 parentNode 属性来找到父元素:var child=document.getElementById("p1");child.parentNode.removeChild(child);