JavaScript基础教程与应用 第六章 DOM对象
发布时间：2024-03-06 09:03:45浏览次数：42JavaScript 基础教程与应用主 题：课件第六章 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);
