Web开发——HTML DOM基础 1、HTML DOM （文档对象模型） 2、查找 HTML 元素 3、改变 HTML 输出 4、改变CSS（样式） Header 1! 5、HTML DOM事件 6、添加和删除节点（HTML元素）
文档资料参考：
- 参考：HTML DOM 参考手册
- 参考：HTML DOM 教程
目录：
- 1、HTML DOM （文档对象模型）
- 2、查找 HTML 元素
-
3、改变 HTML 输出
-
4、改变CSS（样式）
-
5、HTML DOM事件
- 5.1 对事件做出反应
- 5.2 HTML 事件属性
-
5.3 使用 HTML DOM 来分配事件
- （1）onload 和 onunload 事件
- （2）onchange 事件
- （3）onmouseover 和 onmouseout 事件
- （4）onmousedown、onmouseup 以及 onclick 事件
- （5）onfocus 事件
-
6、添加和删除节点（HTML元素）
当网页被加载时，浏览器会创建页面的文档对象模型（Document Object Model）。
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）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 <p id="intro">Hello, world!</p> 13 14 <script> 15 var x = document.getElementById("intro"); 16 document.write('<p>>); 17 </script> 18 </body> 19 </html>
输出结果：
Hello, world!
的段落中的文本是：Hello, world!
举例2（HTML + JavaScript）：
test.html代码：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 <p id="intro">Hello, world!</p> 13 14 <script src="my-js-file.js"></script> 15 </body> 16 </html>
my-js-file.js代码：
1 var x = document.getElementById("intro"); 2 document.write('<p>的段落中的文本是：' + x.innerHTML + '</p>');
输出结果：
Hello, world!
的段落中的文本是：Hello, world!
2.2 通过标签名查找 HTML 元素
举例（本例查找 中的所有 <p> 元素）：
提示：通过类名查找 HTML 元素在 IE 5,6,7,8 中无效。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <div id="main"> 14 <p>The DOM is very useful.</p> 15 <p>本例演示 <b>getElementByTagName</b> 方法</p> 16 </div> 17 18 <script> 19 var x = document.getElementById("main"); 20 var y = document.getElementsByTagName("p"); 21 document.write('id为"main"的div中的第一段文本是：' + y[0].innerHTML); 22 </script> 23 </body> 24 </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()。这会覆盖该文档。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 <script> 13 document.write(Date()); 14 </script> 15 </body> 16 </html>
输出结果：Sun Oct 14 2018 17:15:26 GMT+0800 (中国标准时间)
3.2 改变 HTML 内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容，请使用这个语法：
document.getElementById(id).innerHTML=new HTML
举例（本例改变了p元素的内容）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <p id="p1">Hello, world!</p> 14 <script> 15 var x = document.getElementById("p1"); 16 x.innerHTML = "New text!" 17 </script> 18 </body> 19 </html>
输出结果：New text!
3.3 改变 HTML 属性
如需改变 HTML 元素的属性，请使用这个语法：
document.getElementById(id).attribute=new value
举例（本例改变了 <img> 元素的 src 属性）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <img id="image1" src=hello.jpg> 14 15 <script> 16 var x = document.getElementById("image1"); 17 x.src = "baidu.jpg"; 18 </script> 19 </body> 20 </html>
输出结果：略。
4、改变CSS（样式）
HTML DOM 允许 JavaScript 改变 HTML 元素的样式。
4.1 改变 HTML 样式
如需改变 HTML 元素的样式，请使用这个语法：
document.getElementById(id).style.property=new style
举例1（下面的例子会改变 <p> 元素的样式）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <p id="p1">Hello, world!</p> 14 15 <script> 16 var x = document.getElementById("p1"); 17 p1.style.color = "red"; 18 </script> 19 </body> 20 </html>
输出结果：
Hello, world!
举例2（本例改变了 的 HTML 元素的样式，当用户点击按钮时）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <h1 id="header1">Header 1!</h1> 14 <!--<button type="button" onclick="document.getElementById('header1').style.color='red'">点击这里！</button>--> 15 <button type="button" onclick='document.getElementById("header1").style.color="red"'>点击这里！</button> 16 <script> 17 </script> 18 </body> 19 </html>
输出结果：
Header 1!
4.2 HTML DOM Style 对象参考手册
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <p id="p1">这是一段文本。</p> 14 15 <input type="button" value="隐藏文本" onclick='document.getElementById("p1").style.visibility="hidden"' /> 16 <input type="button" value="显示文本" onclick='document.getElementById("p1").style.visibility="visible"' /> 17 18 <script> 19 </script> 20 </body> 21 </html>
输出结果：
这是一段文本。
5、HTML DOM事件
5.1 对事件做出反应
我们可以在事件发生时执行 JavaScript，比如当用户在 HTML 元素上点击时。
如需在用户点击某个元素时执行代码，请向一个 HTML 事件属性添加 JavaScript 代码：
1 onclick=JavaScript
HTML 事件的例子：
- 当用户点击鼠标时
- 当网页已加载时
- 当图像已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当提交 HTML 表单时
- 当用户触发按键时
举例1（在本例中，当用户在 <h1> 元素上点击时，会改变其内容）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <h1 onclick='this.innerHTML="谢谢"'>请点击该文本</h1> 14 15 <script> 16 </script> 17 18 </body> 19 </html>
输出结果：略。
举例2（例1和例2实现效果一致，本例从事件处理器调用一个函数）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <h1 onclick=changetext(this)>请点击该文本</h1> 14 15 <script> 16 function changetext(id) { 17 id.innerHTML = '谢谢！'; 18 } 19 </script> 20 21 </body> 22 </html>
输出结果：略。
5.2 HTML 事件属性
如需向 HTML 元素分配 事件，您可以使用事件属性。
举例1（向 button 元素分配 onclick 事件）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> 14 15 <button onclick="displayDate()">点击这里</button> 16 <p id='demo'></p> 17 18 <script> 19 function displayDate() { 20 <!--document.write("Date()");<!--这个语句会重写页面内容-->--> 21 var demo = document.getElementById("demo"); 22 demo.innerHTML = Date(); 23 } 24 </script> 25 26 </body> 27 </html>
输出结果：略。
5.3 使用 HTML DOM 来分配事件
HTML DOM 允许您通过使用 JavaScript 来向 HTML 元素分配事件：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <p>点击按钮就可以执行 <em>displayDate()</em> 函数。</p> 14 15 <button id="myBtn">点击这里</button> 16 <p id='demo'></p> 17 18 <script> 19 var button = document.getElementById("myBtn"); 20 button.onclick = function() {displayDate()} 21 22 function displayDate() { 23 <!--document.write("Date()");<!--这个语句会重写页面内容-->--> 24 var demo = document.getElementById("demo"); 25 demo.innerHTML = Date(); 26 } 27 </script> 28 29 </body> 30 </html>
输出结果：略。
（1）onload 和 onunload 事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onload 事件可用于检测访问者的浏览器类型和浏览器版本，并基于这些信息来加载网页的正确版本。
onload 和 onunload 事件可用于处理 cookie。
举例1：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body onload="checkCookies()"> 12 13 <script> 14 function checkCookies() { 15 if (navigator.cookieEnabled === true) { 16 alert("已启用cookies"); 17 } else { 18 alert("未启用cookies"); 19 } 20 } 21 </script> 22 23 </body> 24 </html>
输出结果：略。
举例2（当页面完成加载时，显示一个提示框。）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body onload="myMessage()"> 12 13 <script> 14 function myMessage() { 15 alert("这段消息由 onload 事件触发"); 16 } 17 </script> 18 19 </body> 20 </html>
输出结果：略。
（2）onchange 事件
onchange 事件常结合对输入字段的验证来使用。
下面是一个如何使用 onchange 的例子。当用户改变输入字段的内容时，会调用 upperCase() 函数。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 请输入英文字符： 14 <input type="text" id="fname" onchange="myFunction()"> 15 <p>当您离开输入字段时，会触发将输入文本转换为大写的函数。</p> 16 </input> 17 18 <script> 19 function myFunction() { 20 var myText = document.getElementById("fname"); 21 myText.value = myText.value.toUpperCase(); 22 } 23 </script> 24 25 </body> 26 </html>
输出结果：略。
（3）onmouseover 和 onmouseout 事件
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <div onmouseover="mouseOver(this)" onmouseout="mouseOut(this)" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;"> 14 把鼠标移动到上面 15 </div> 16 17 <script> 18 function mouseOver(obj) { 19 obj.innerHTML = "谢谢"; 20 } 21 function mouseOut(obj) { 22 obj.innerHTML = "把鼠标移到上面"; 23 } 24 </script> 25 26 </body> 27 </html>
输出结果：略。
（4）onmousedown、onmouseup 以及 onclick 事件
onmousedown, onmouseup 以及 onclick 构成了鼠标点击事件的所有部分。首先当点击鼠标按钮时，会触发 onmousedown 事件，当释放鼠标按钮时，会触发 onmouseup 事件，最后，当完成鼠标点击时，会触发 onclick 事件。
举例1（当指针移动到元素上方时，改变其颜色；当指针移出文本后，会再次改变其颜色）：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 <h1 onmouseover="style.color='red'" onmouseout="style.color='blue'">请把鼠标移动到这段文本上</h1> 13 14 <script> 15 </script> 16 17 </body> 18 </html>
输出结果：
请把鼠标移动到这段文本上
举例2：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <div onmousedown="mouseDown(this)" onmouseup="mouseUp(this)" style="background-color:green;120px;height:20px;padding:40px;color:#ffffff;"> 14 把鼠标移动到上面 15 </div> 16 17 <script> 18 function mouseDown(obj) { 19 obj.style.backgroundColor = "#1ec5e5"; 20 obj.innerHTML = "请释放鼠标按钮"; 21 } 22 function mouseUp(obj) { 23 obj.style.backgroundColor="green"; 24 obj.innerHTML="请按下鼠标按钮" 25 } 26 </script> 27 28 </body> 29 </html>
输出结果：略。
举例3（当用户按下鼠标按钮时，更换一幅图像（图片已经提前准备好））：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 <img id="image1" onmousedown="lightOn()" onmouseup="lightOff()" src="eg_bulboff.gif"> 14 <p>按住鼠标不放可以点亮这盏灯！</p> 15 16 <script> 17 function lightOn() { 18 document.getElementById("image1").src="eg_bulbon.gif"; 19 } 20 function lightOff() { 21 document.getElementById("image1").src="eg_bulboff.gif"; 22 } 23 </script> 24 25 </body> 26 </html>
输出结果：略。
（5）onfocus 事件
当输入字段获得焦点时，改变其背景色。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 13 请输入英文字符：<input type="text" onfocus="myFunction(this)"></input> 14 <p>当输入字段获得焦点时，会触发改变背景颜色的函数。</p> 15 16 <script> 17 function myFunction(id) { 18 id.style.background="yellow"; 19 } 20 </script> 21 22 </body> 23 </html>
输出结果：
请输入英文字符：
当输入字段获得焦点时，会触发改变背景颜色的函数。
6、添加和删除节点（HTML元素）
6.1 创建新的 HTML 元素
如需向 HTML DOM 添加新元素，您必须首先创建该元素（元素节点），然后向一个已存在的元素追加该元素。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 <div id="div1"> 13 <p id="p1">这是一个段落。</p> 14 <p id="p2">这是另一个段落。</p> 15 </div> 16 17 <script> 18 var para = document.createElement("p"); <!--创建新的<p>元素--> 19 var node = document.createTextNode("这是新段落。"); <!--如需向<p>元素添加文本，必须首先创建文本节点--> 20 para.appendChild(node); <!--必须向<p>元素追加这个文本节点--> 21 <!--最后必须向一个已有的元素追加这个新元素--> 22 var element = document.getElementById("div1"); <!--找到一个已有的元素--> 23 element.appendChild(para); <!--向这个已有的元素追加新元素--> 24 25 </script> 26 27 </body> 28 </html>
输出结果：
这是一个段落。
这是另一个段落。
这是新段落。
6.2 删除已有的 HTML 元素
如需删除 HTML 元素，您必须首先获得该元素的父元素：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 <div id="div1"> 13 <p id="p1">这是一个段落。</p> 14 <p id="p2">这是另一个段落。</p> 15 </div> 16 17 <script> 18 var parent = document.getElementById("div1"); <!--获取父元素--> 19 var child = document.getElementById("p1"); 20 parent.removeChild(child); 21 </script> 22 23 </body> 24 </html>
输出结果：
这是另一个段落。
提示：如果能够在不引用父元素的情况下删除某个元素，就太好了。
不过很遗憾。DOM 需要清楚您需要删除的元素，以及它的父元素。
这是常用的解决方案：找到您希望删除的子元素，然后使用其 parentNode 属性来找到父元素：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <!--<meta charset="utf-8">--> 5 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 6 <meta http-equiv="Content-Language" content="zh-cn" /> 7 <title>My test page</title> 8 9 </head> 10 11 <body> 12 <div id="div1"> 13 <p id="p1">这是一个段落。</p> 14 <p id="p2">这是另一个段落。</p> 15 </div> 16 17 <script> 18 var child = document.getElementById("p1"); 19 child.parentNode.removeChild(child); 20 </script> 21 22 </body> 23 </html>
输出结果：
这是另一个段落。