首页 > 代码库 > HTML DOM
HTML DOM
什么是DOM?
DOM是Document Object Model(文档对象模型)的缩写。
DOM是W3C(万维网联盟)的标准。
DOM定义了访问HTML和XML文档的标准:
“W3C文档对象模型(DOM)是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为3个不同的部分:
- 核心 DOM - 针对任何结构化文档的标准模型
- XML DOM - 针对XML文档的标准模型
- HTML DOM - 针对HTML文档的标准模型
什么是HTML DOM?
HTML DOM是:
- HTML的标准对象模型
- HTML的标准编程接口
- W3C标准
HTML DOM定义了所有HTML元素的对象和属性,以及访问它们的方法。
换言之,HTML DOM是关于如何获取、修改、添加或删除HTML元素的标准。
在HTML DOM中,所有事物都是节点。DOM是被视为节点树的HTML。
HTML DOM节点
DOM节点
根据W3C的HTML DOM标准,HTML文档中的所有内容都是节点:
- 整个文档是一个文档节点
- 每个HTML元素是元素节点
- HTML元素内的文本是文本节点
- 每个HTML属性是属性节点
- 注释是注释节点
HTML DOM节点树
HTML DOM将HTML文档视作树结构。这种结构被称为节点树:
HTML DOM Tree实例
通过HTML DOM,树中的所有节点均可通过JavaScript进行访问。所有HTML元素(节点)均可被修改,也可以创建或删除节点。
节点父、子和同胞
节点树中的节点彼此拥有层级关系。
父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。
- 在节点树中,顶端节点被称为根(root)
- 每个节点都有父节点,除了根(它没有父节点)
- 一个节点可拥有任意数量的子
- 同胞是拥有相同父节点的节点
下面的图片展示了节点树的一部分,以及节点之间的关系:
请看下面的HTML片段:
1 <html>2 <head>3 <title>DOM 教程</title>4 </head>5 <body>6 <h1>DOM 第一课</h1>7 <p>Hello world!</p>8 </body>9 </html>
从上面的HTML中:
- <html>节点没有父节点;它是根节点
- <head>和<body>的父节点是<html>节点
- 文本节点"Hello world!"的父节点是<p>节点
并且:
- <html>节点拥有两个子节点:<head>和<body>
- <head>节点拥有一个子节点:<title>节点
- <title>节点也拥有一个子节点:文本节点"DOM 教程"
- <h1>和<p>节点是同胞节点,同时也是<body>的子节点
并且:
- <head>元素是<html>元素的首个子节点
- <body>元素是<html>元素的最后一个子节点
- <h1>元素是<body>元素的首个子节点
- <p>元素是<body>元素的最后一个子节点
HTML DOM方法
方法是我们在节点(HTML元素)上执行的动作。
编程接口
可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。
所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。
方法是您能够执行的动作(比如添加或修改元素)。
属性是您能够获取或设置的值(比如节点的名称或内容)。
getElementById()方法
getElementById()方法返回带有指定ID的元素:
例:
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p id="intro">Hello World!</p> 6 <p>本例演示 <b>getElementById</b> 方法!</p> 7 8 <script> 9 x=document.getElementById("intro");10 document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>");11 </script>12 13 </body>14 </html>
运行结果:
HTML DOM对象 - 方法和属性
一些常用的 HTML DOM 方法:
- getElementById(id) - 获取带有指定 id 的节点(元素)
- appendChild(node) - 插入新的子节点(元素)
- removeChild(node) - 删除子节点(元素)
一些常用的 HTML DOM 属性:
- innerHTML - 节点(元素)的文本值
- parentNode - 节点(元素)的父节点
- childNodes - 节点(元素)的子节点
- attributes - 节点(元素)的属性节点
现实生活中的对象
某个人是一个对象。
人的方法可能是 eat(), sleep(), work(), play() 等等。
所有人都有这些方法,但会在不同时间执行它们。
一个人的属性包括姓名、身高、体重、年龄、性别等等。
所有人都有这些属性,但它们的值因人而异。
一些DOM对象方法
HTML DOM属性
属性是节点(HTML元素)的值,你能够获取或设置。
innerHTML属性
获取元素内容的最简单方法是使用innerHTML属性。
innerHTML属性对于获取或替换HTML元素的内容很有用。
例子
下面的代码获取 id="intro"的<p>元素的innerHTML:
代码:
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p id="intro">Hello World!</p> 6 7 <script> 8 var txt=document.getElementById("intro").innerHTML; 9 document.write(txt);10 </script>11 12 </body>13 </html>
运行结果:
在上面的例子中,getElementById是一个方法,而innerHTML是属性。
innerHTML 属性可用于获取或改变任意 HTML 元素,包括 <html> 和 <body>。
nodeName属性
nodeName 属性规定节点的名称。
- nodeName是只读的
- 元素节点的nodeName与标签名相同
- 属性节点的nodeName与属性名相同
- 文本节点的nodeName始终是#text
- 文档节点的nodeName始终是#document
注:nodeName始终包含HTML元素的大写字母标签名。
获取文本节点的名称
代码:
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p id="intro">Hello World!</p> 6 7 <script> 8 x=document.getElementById("intro"); 9 document.write(x.firstChild.nodeName);10 </script>11 12 </body>13 </html>
运行结果:
nodeValue属性
nodeValue 属性规定节点的值。
- 元素节点的 nodeValue 是 undefined 或 null
- 文本节点的 nodeValue 是文本本身
- 属性节点的 nodeValue 是属性值
nodeValue实例
代码:
1 <!DOCTYPE html> 2 <html> 3 <body> 4 5 <p id="intro">Hello World!</p> 6 7 <script> 8 x=document.getElementById("intro"); 9 document.write(x.nodeValue);//元素节点的值10 document.write("<br>");//换行11 document.write(x.firstChild.nodeValue);//元素节点下的首个子节点(即文本节点)的值12 </script>13 14 </body>15 </html>
运行结果:
nodeType属性
nodeType属性返回节点的类型。nodeType是只读的。
比较重要的节点类型有:
HTML DOM访问
访问HTML DOM -查找HTML元素。
访问HTML元素(节点)
访问HTML元素等同于访问节点
你能够以不同的方式来访问HTML元素:
- 通过使用 getElementById() 方法
- 通过使用 getElementsByTagName() 方法
- 通过使用 getElementsByClassName() 方法
getElementById()方法
getElementById()方法返回带有指定ID的元素:
语法:
node.getElementById("id");
下面的例子获取id="intro"的元素:
代码:
1 <!DOCTYPE html> <!-- html5标准网页说明 --> 2 <html> 3 <body> 4 5 <p id="intro">Hello getElementById</p> 6 <p>this example is a demo for <b>getElementById</b></p> 7 8 <script> 9 x=document.getElementById("intro");10 document.write("<p>From the text of paragraph intro:"+x.innerHTML+"</p>");11 </script>12 13 </body>14 </html>
运行结果:
getElementsByTagName()方法
getElementsByTagName()返回带有指定标签名的所有元素。
语法:
node.getElementsByTagName("tagname");
下面的例子返回包含文档中所有<p>元素的列表:
1 <!DOCTYPE html> <!-- html5标准网页说明 -->> 2 <html> 3 <body> 4 5 <p>Hello getElementByTagName!</p> 6 <p>DOM is useful!</p> 7 <p>this example is a demo for <b>getElementByTagName</b></p> 8 9 <script>10 x=document.getElementsByTagName("p");11 document.write("the text of first paragraph:"+x[0].innerHTML);12 </script>13 </body>14 </html>
运行结果:
下面的例子返回包含文档中所有<p>元素的列表,并且这些<p>元素应该是id="main"的元素的后代(子、孙等等):
1 <!DOCTYPE html> <!--html5标准网页说明 --> 2 <html> 3 <body> 4 5 <p>Hello GetElementByTagName!</p> 6 7 <div id="main"> 8 <p>DOM is useful!</p> 9 <p>this example is a demo for <b>getElementByTagName</b></p>10 </div>11 12 <script>13 x=document.getElementById("main").getElementsByTagName("p");14 document.write("the text of first paragraph in div:"+x[0].innerHTML);15 </script>16 </body>17 </html>
运行结果:
getElementByClassName()方法
如果您希望查找相同类名的所有HTML元素,请使用这个方法:
1 <!-- 2 @author:CodingMengmeng 3 @theme:Demo for getElementByClassName 4 @time:2017-2-25 13:08:42 5 @blog:http://www.cnblogs.com/codingmengmeng/ 6 --> 7 <!DOCTYPE html> <!-- html5标准网页声明 --> 8 <html> 9 <head>10 <meta charset="utf-8">11 <title>Demo for getElementByClassName</title>12 </head>13 <body>14 15 <div class="exm">the first div element,and the class="exm".</div>16 <div class="exm">the second div element,and the calss="exm".</div>17 <p>click the button to alter the text of the first div(the index value is 0 and class="exm").</p>18 <input type="button" value="click me" onclick="myFunction()"/> 19 20 <p><strong>NOTICE:</strong>Internet Explorer 8 and earlier version than that don‘t support "getElementByClassName()".</p>21 <script>22 //function to change the text of div23 function myFunction()24 {25 var x=document.getElementsByClassName("exm");26 x[0].innerHTML="Hello getElementByClassName!";27 }28 </script>29 </body>30 </html>
点击按钮后的结果:
注:getElementsByClassName() 在 Internet Explorer 5,6,7,8 中无效。
HTML DOM -修改
修改 HTML = 改变元素、属性、样式和事件。
修改HTML元素
- 改变 HTML 内容
- 改变 CSS 样式
- 改变 HTML 属性
- 创建新的 HTML 元素
- 删除已有的 HTML 元素
- 改变事件(处理程序)
改变HTML样式
通过HTML DOM,你能够访问HTML元素的样式对象。
下面的例子改变一个段落的HTML样式:
1 <!-- 2 @author:CodingMengmeng 3 @theme:Demo for changing style by DOM 4 @time:2017-2-25 13:19:32 5 @blog:http://www.cnblogs.com/codingmengmeng/ 6 --> 7 <!DOCTYPE html> 8 <html> 9 <body>10 11 <p id="p1">Hello Style!</p>12 <p id="p2">Hello Style!</p>13 14 <script>15 document.getElementById("p2").style.color="red";16 document.getElementById("p2").style.fontFamily="Arial";17 document.getElementById("p2").style.fontSize="larger";18 </script>19 20 </body>21 </html>
运行结果:
创建新的HTML元素
如需向HTML DOM添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上。
例子:
1 <!-- 2 @author:CodingMengmeng 3 @theme:Demo for creating new html element by DOM 4 @time:2017-2-25 13:28:15 5 @blog:http://www.cnblogs.com/codingmengmeng/ 6 --> 7 8 <!DOCTYPE html> 9 <html>10 <body>11 12 <div id="div">13 <p id="p1">This is a paragraph.</p>14 <p id="p2">This is another paragraph.</p>15 </div>16 17 <script>18 var para=document.createElement("p3");//create a new html element.19 para.style.color="red";20 var node=document.createTextNode("This is a new paragraph.");//create text node21 para.appendChild(node);//add the text node to para22 23 var element=document.getElementById("div");24 element.appendChild(para);//add the para element to div element25 </script>26 </body>27 </html>
运行结果:
上一个例子中的appendChild() 方法,将新元素作为父元素的最后一个子元素进行添加。
如果不希望如此,你可以使用 insertBefore() 方法:
1 <!-- 2 @author:CodingMengmeng 3 @theme:Demo for creating new html element by DOM 4 @time:2017-2-25 13:49:11 5 @blog:http://www.cnblogs.com/codingmengmeng/ 6 --> 7 8 <!DOCTYPE html> 9 <html>10 <body>11 12 <div id="div">13 <p id="p1">This is a paragraph.</p>14 <p id="p2">This is another paragraph.</p>15 </div>16 17 <script>18 var para=document.createElement("p3");//create a new html element.19 para.style.color="red";20 var node=document.createTextNode("This is a new paragraph.");//create text node21 para.appendChild(node);//add the text node to para22 23 var element=document.getElementById("div");24 // element.appendChild(para);//add the para element to div element(to the end)25 var child=document.getElementById("p1");26 element.insertBefore(para,child);//add the para element to div element(before the specified element)27 </script>28 </body>29 </html>
运行结果:
删除已有的HTML元素
如需删除HTML元素,必须清楚该元素的父元素:
1 <!-- 2 @author:CodingMengmeng 3 @theme:Demo for delete the html element by DOM 4 @time:2017-2-25 13:51:50 5 @blog:http://www.cnblogs.com/codingmengmeng/ 6 --> 7 8 <!DOCTYPE html> 9 <html>10 <body>11 <div id="div">12 <p id="p1">This is a paragraph.</p>13 <p id="p2">This is another paragraph.</p>14 <input type="button" value="click me" onclick="myFunction()" />15 </div>16 <script>17 //function to delete a html element18 function myFunction()19 {20 var parent=document.getElementById("div");21 var child=document.getElementById("p1");22 parent.removeChild(child);23 }24 </script>25 26 </body>27 </html>
运行结果:
点击按钮后:
替换HTML元素
如需替换HTML DOM中的元素,请使用replaceChild()方法:
1 <!-- 2 @author:CodingMengmeng 3 @theme:replace the html element by DOM 4 @time:2017-2-25 14:02:57 5 @blog:http://www.cnblogs.com/codingmengmeng/ 6 --> 7 8 <!DOCTYPE html> 9 <html>10 <body>11 <div id="div">12 <p id="p1">This is a paragraph.</p>13 <p id="p2">This is another paragraph.</p>14 <input type="button" value="click me" onclick="myFunction()"/>15 </div>16 17 <script>18 //function to replace a html element19 function myFunction()20 {21 var parent=document.getElementById("div");22 var child=document.getElementById("p1");23 var para=document.createElement("p");24 para.style.color="blue";25 var node=document.createTextNode("This is a new paragraph.");26 para.appendChild(node);27 parent.replaceChild(para,child);28 }29 </script>30 </body>31 </html>
运行结果:
点击按钮后:
HTML DOM - 事件
HTML DOM允许JavaScript对HTML事件作出反应。
如需在用户点击某个元素时执行代码,请把JavaScript代码添加到HTML事件属性中:
onclick=JavaScript
HTML 事件的例子:
- 当用户点击鼠标时
- 当网页已加载时
- 当图片已加载时
- 当鼠标移动到元素上时
- 当输入字段被改变时
- 当 HTML 表单被提交时
- 当用户触发按键时
onload和onunload事件
当用户进入或离开页面时,会触发onload和onunload事件。
onload事件可用户检查访客的浏览器类型和版本,以便基于这些信息来加载不同版本的网页。
onload和onunload事件可用于处理cookies。
实例:
1 <!-- 2 @author:CodingMengmeng 3 @theme:onload检测浏览器是否已启用cookies 4 @time:2017-2-25 14:34:46 5 @blog:http://www.cnblogs.com/codingmengmeng/ 6 --> 7 8 <!DOCTYPE html> 9 <html>10 <body onload="checkCookies()">11 12 <script>13 //function to check cookies14 function checkCookies()15 {16 if(navigator.cookieEnabled==true)17 {18 alert("Cookies are enabled");19 }20 else21 {22 alert("Cookies are not enabled");23 }24 }25 </script>26 <p>弹出的提示框会告诉你浏览器是否已启用Cookies。</p>27 </body>28 </html>
运行结果:
onchange事件
onchange 事件常用于输入字段的验证。
下面的例子展示了如何使用 onchange。当用户改变输入字段的内容时,将调用 upperCase() 函数:
1 <!-- 2 @author:CodingMengmeng 3 @theme:onchange事件用于输入字段的验证 4 @time:2017-2-25 14:44:48 5 blog:http://www.cnblogs.com/codingmengmeng/ 6 --> 7 8 <html> 9 <body>10 <p>Please input your English name:<input type="text" id="fname" onchange="myFunction()"/></p>11 <p>当你离开输入框时,被触发的函数会把输入的文本转换为大写字母。</p>12 <script>13 function myFunction()14 {15 var x=document.getElementById("fname");16 x.value=x.value.toUpperCase();17 }18 </script>19 </body>20 </html>
运行结果:
离开输入框后,变为:
HTML DOM总结
本文粗略地记录了如何使用HTML DOM来增强网站的动态交互性,为自己涉足Java Web领域迈出一小步。
HTML DOM