Web开发——HTML DOM基础

2023-08-15 23:41:58

文档资料参考：

目录：

1、HTML DOM （文档对象模型）

　　当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。

　　HTML DOM 模型被构造为对象的树。

Web开发——HTML DOM基础

　　通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。

  • JavaScript 能够改变页面中的所有 HTML 元素
  • JavaScript 能够改变页面中的所有 HTML 属性
  • JavaScript 能够改变页面中的所有 CSS 样式
  • JavaScript 能够对页面中的所有事件做出反应

2、查找 HTML 元素

　　通常，通过 JavaScript，您需要操作 HTML 元素。

　　为了做到这件事情，您必须首先找到该元素。有三种方法来做这件事：

  • 通过 id 找到 HTML 元素（id）
  • 通过标签名找到 HTML 元素（<p>, <h1>...）
  • 通过类名找到 HTML 元素（class）

2.1 通过 id 查找 HTML 元素

　　在 DOM 中查找 HTML 元素的最简单的方法，是通过使用元素的 id。

　　举例1（HTML内嵌JavaScript）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p id="intro">Hello, world!</p>

         <script>

             var x = document.getElementById("intro");

             document.write('<p>id="intro"的段落中的文本是：' + x.innerHTML + '</p>');

         </script>

     </body>

 </html>

　　输出结果：

Hello, world!

id="intro"的段落中的文本是：Hello, world!

　　举例2（HTML + JavaScript）：

　　test.html代码：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p id="intro">Hello, world!</p>

         <script src="my-js-file.js"></script>

     </body>

 </html>

　　my-js-file.js代码：

 var x = document.getElementById("intro");

 document.write('<p>id="intro"的段落中的文本是：' + x.innerHTML + '</p>');

　　输出结果：

Hello, world!

id="intro"的段落中的文本是：Hello, world!

2.2 通过标签名查找 HTML 元素

　　举例（本例查找 id="main" 的元素，然后查找 "main" 中的所有 <p> 元素）：

　　提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <div id="main">

             <p>The DOM is very useful.</p>

             <p>本例演示 <b>getElementByTagName</b> 方法</p>

         </div>

         <script>

             var x = document.getElementById("main");

             var y = document.getElementsByTagName("p");

             document.write('id为"main"的div中的第一段文本是：' + y[0].innerHTML);

         </script>

     </body>

 </html>

　　输出结果：略。

3、改变 HTML 输出

　　HTML DOM 允许 JavaScript 改变 HTML 元素的内容。

3.1 改变 HTML 输出流

　　JavaScript 能够创建动态的 HTML 内容：

　　今天的日期是： Sun Oct 14 2018 17:06:00 GMT+0800 (中国标准时间)

　　在 JavaScript 中，document.write() 可用于直接向 HTML 输出流写内容。

　　提示：绝不要使用在文档加载之后使用 document.write()。这会覆盖该文档。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <script>

             document.write(Date());

         </script>

     </body>

 </html>

　　输出结果：Sun Oct 14 2018 17:15:26 GMT+0800 (中国标准时间)

3.2 改变 HTML 内容

　　修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

　　如需改变 HTML 元素的内容，请使用这个语法：

document.getElementById(id).innerHTML=new HTML

　　举例（本例改变了p元素的内容）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p id="p1">Hello, world!</p>

         <script>

             var x = document.getElementById("p1");

             x.innerHTML = "New text!"

         </script>

     </body>

 </html>

　　输出结果：New text!

3.3 改变 HTML 属性

　　如需改变 HTML 元素的属性，请使用这个语法：

document.getElementById(id).attribute=new value

　　举例（本例改变了 <img> 元素的 src 属性）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <img id="image1" src=hello.jpg>

         <script>

             var x = document.getElementById("image1");

             x.src = "baidu.jpg";

         </script>

     </body>

 </html>

　　输出结果：略。

4、改变CSS（样式）

　　HTML DOM 允许 JavaScript 改变 HTML 元素的样式。

4.1 改变 HTML 样式

　　如需改变 HTML 元素的样式，请使用这个语法：

document.getElementById(id).style.property=new style

　　举例1（下面的例子会改变 <p> 元素的样式）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p id="p1">Hello, world!</p>

         <script>

             var x = document.getElementById("p1");

             p1.style.color = "red";

         </script>

     </body>

 </html>

　　输出结果：

Hello, world!

　　举例2（本例改变了 id="id1" 的 HTML 元素的样式，当用户点击按钮时）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <h1 id="header1">Header 1!</h1>

         <!--<button type="button" onclick="document.getElementById('header1').style.color='red'">点击这里！</button>-->

         <button type="button" onclick='document.getElementById("header1").style.color="red"'>点击这里！</button>

         <script>

         </script>

     </body>

 </html>

　　输出结果：

Header 1!

点击这里！

4.2 HTML DOM Style 对象参考手册

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p id="p1">这是一段文本。</p>

         <input type="button" value="隐藏文本" onclick='document.getElementById("p1").style.visibility="hidden"' />

         <input type="button" value="显示文本" onclick='document.getElementById("p1").style.visibility="visible"' />

         <script>

         </script>

     </body>

 </html>

　　输出结果：

这是一段文本。

5、HTML DOM事件

5.1 对事件做出反应

　　我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。

　　如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：

1 onclick=JavaScript

　　HTML 事件的例子：

  • 当用户点击鼠标时
  • 当网页已加载时
  • 当图像已加载时
  • 当鼠标移动到元素上时
  • 当输入字段被改变时
  • 当提交 HTML 表单时
  • 当用户触发按键时

　　举例1（在本例中，当用户在 <h1> 元素上点击时，会改变其内容）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <h1 onclick='this.innerHTML="谢谢"'>请点击该文本</h1>

         <script>

         </script>

     </body>

 </html>

　　输出结果：略。

　　举例2（例1和例2实现效果一致，本例从事件处理器调用一个函数）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <h1 onclick=changetext(this)>请点击该文本</h1>

         <script>

             function changetext(id) {

                 id.innerHTML = '谢谢！';

             }

         </script>

     </body>

 </html>

　　输出结果：略。

5.2 HTML 事件属性

　　如需向 HTML 元素分配 事件，您可以使用事件属性。

　　举例1（向 button 元素分配 onclick 事件）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

         <button onclick="displayDate()">点击这里</button>

         <p id='demo'></p>

         <script>

             function displayDate() {

                 <!--document.write("Date()");<!--这个语句会重写页面内容-->-->

                 var demo = document.getElementById("demo");

                 demo.innerHTML = Date();

             }

         </script>

     </body>

 </html>

　　输出结果：略。

5.3 使用 HTML DOM 来分配事件

　　HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p>

         <button id="myBtn">点击这里</button>

         <p id='demo'></p>

         <script>

             var button = document.getElementById("myBtn");

             button.onclick = function() {displayDate()}

             function displayDate() {

                 <!--document.write("Date()");<!--这个语句会重写页面内容-->-->

                 var demo = document.getElementById("demo");

                 demo.innerHTML = Date();

             }

         </script>

     </body>

 </html>

　　输出结果：略。

（1）onload 和 onunload 事件

　　onload 和 onunload 事件会在用户进入或离开页面时被触发。

　　onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。

　　onload 和 onunload 事件可用于处理 cookie。

　　举例1：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body onload="checkCookies()">

         <script>

             function checkCookies() {

                 if (navigator.cookieEnabled === true) {

                     alert("已启用cookies");

                 } else {

                     alert("未启用cookies");

                 }

             }

         </script>

     </body>

 </html>

　　输出结果：略。

　　举例2（当页面完成加载时，显示一个提示框。）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body onload="myMessage()">

         <script>

             function myMessage() {

                 alert("这段消息由 onload 事件触发");

             }

         </script>

     </body>

 </html>

　　输出结果：略。

（2）onchange 事件

　　onchange 事件常结合对输入字段的验证来使用。

　　下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         请输入英文字符：

         <input type="text" id="fname" onchange="myFunction()">

             <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p>

         </input>

         <script>

             function myFunction() {

                 var myText = document.getElementById("fname");

                 myText.value = myText.value.toUpperCase();

             }

         </script>

     </body>

 </html>

　　输出结果：略。

（3）onmouseover 和 onmouseout 事件

　　onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">

             把鼠标移动到上面

         </div>

         <script>

             function mouseOver(obj) {

                 obj.innerHTML = "谢谢";

             }

             function mouseOut(obj) {

                 obj.innerHTML = "把鼠标移到上面";

             }

         </script>

     </body>

 </html>

　　输出结果：略。

（4）onmousedown、onmouseup 以及 onclick 事件

　　onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。

　　举例1（当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色）：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">请把鼠标移动到这段文本上</h1>

         <script>

         </script>

     </body>

 </html>

　　输出结果：

请把鼠标移动到这段文本上

　　举例2：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" style="background-color:green;width:120px;height:20px;padding:40px;color:#ffffff;">

             把鼠标移动到上面

         </div>

         <script>

             function mouseDown(obj) {

                 obj.style.backgroundColor = "#1ec5e5";

                 obj.innerHTML = "请释放鼠标按钮";

             }

             function mouseUp(obj) {

                 obj.style.backgroundColor="green";

                 obj.innerHTML="请按下鼠标按钮"

             }

         </script>

     </body>

 </html>

　　输出结果：略。

　　举例3（当用户按下鼠标按钮时，更换一幅图像（图片已经提前准备好））：

Web开发——HTML DOM基础    Web开发——HTML DOM基础

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <img id="image1" onmousedown="lightOn()" onmouseup="lightOff()" src="eg_bulboff.gif">

         <p>按住鼠标不放可以点亮这盏灯！</p>

         <script>

             function lightOn() {

                 document.getElementById("image1").src="eg_bulbon.gif";

             }

             function lightOff() {

                 document.getElementById("image1").src="eg_bulboff.gif";

             }

         </script>

     </body>

 </html>

　　输出结果：略。

（5）onfocus 事件

　　当输入字段获得焦点时，改变其背景色。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         请输入英文字符：<input type="text" onfocus="myFunction(this)"></input>

         <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p>

         <script>

             function myFunction(id) {

                 id.style.background="yellow";

             }

         </script>

     </body>

 </html>

　　输出结果：

请输入英文字符：

当输入字段获得焦点时，会触发改变背景颜色的函数。

6、添加和删除节点（HTML元素）

6.1 创建新的 HTML 元素

　　如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <div id="div1">

             <p id="p1">这是一个段落。</p>

             <p id="p2">这是另一个段落。</p>

         </div>

         <script>

             var para = document.createElement("p");                   <!--创建新的<p>元素-->

             var node = document.createTextNode("这是新段落。");         <!--如需向<p>元素添加文本，必须首先创建文本节点-->

             para.appendChild(node);                                   <!--必须向<p>元素追加这个文本节点-->

             <!--最后必须向一个已有的元素追加这个新元素-->

             var element = document.getElementById("div1");            <!--找到一个已有的元素-->

             element.appendChild(para);                                <!--向这个已有的元素追加新元素-->

         </script>

     </body>

 </html>

　　输出结果：

这是一个段落。

这是另一个段落。

这是新段落。

6.2 删除已有的 HTML 元素

　　如需删除 HTML 元素，您必须首先获得该元素的父元素：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <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>

     </body>

 </html>

　　输出结果：

这是另一个段落。

　　提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。

　　不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。

　　这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：

 <!DOCTYPE html>

 <html>

     <head>

         <!--<meta charset="utf-8">-->

         <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

         <meta http-equiv="Content-Language" content="zh-cn" />

         <title>My test page</title>

     </head>

     <body>

         <div id="div1">

             <p id="p1">这是一个段落。</p>

             <p id="p2">这是另一个段落。</p>

         </div>

         <script>

             var child = document.getElementById("p1");

             child.parentNode.removeChild(child);

         </script>

     </body>

 </html>

　　输出结果：

这是另一个段落。

上一篇：JVM学习笔记(四)：类加载机制


下一篇：idea创建maven SSM项目