你的位置:首页 > 网页设计

[网页设计]HTML DOM 教程


HTML DOM

  • DOM 教程
  • DOM 简介
  • DOM 节点
  • DOM 方法
  • DOM 属性
  • DOM 访问
  • DOM 修改
  • DOM 内容
  • DOM 元素
  • DOM 事件
  • DOM 导航

一,HTML DOM 简介

DOM即文档对象模型(Document Object Model)。

DOM 定义了访问 HTML 和

HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。DOM 将 HTML 文档表达为树结构。如下图所示:

二,HTML DOM 节点

在 HTML DOM 中,所有事物都是节点。DOM 是被视为节点树的 HTML。

通过 HTML DOM,树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素(节点)均可被修改,也可以创建或删除节点。

根据 W3C 的 HTML DOM 标准,HTML 文档中的所有内容都是节点:

  • 整个文档是一个文档节点
  • 每个 HTML 元素是元素节点
  • HTML 元素内的文本是文本节点
  • 每个 HTML 属性是属性节点
  • 注释是注释节点

节点父、子和同胞

节点树中的节点彼此拥有层级关系。

父(parent)、子(child)和同胞(sibling)等术语用于描述这些关系。父节点拥有子节点。同级的子节点被称为同胞(兄弟或姐妹)。

  • 在节点树中,顶端节点被称为根(root)
  • 每个节点都有父节点、除了根(它没有父节点)
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

下面的图片展示了节点树的一部分,以及节点之间的关系:

请看下面的html片段:

<html> <head>  <title>DOM 教程</title> </head> <body>  <h1>DOM 第一课</h1>  <p>Hello world!</p> </body></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> 元素的最后一个子节点

在本例中:<title>DOM 教程</title>,元素节点 <title>,包含值为 "DOM 教程" 的文本节点。可通过节点的 innerHTML 属性来访问文本节点的值。

 

三,HTML DOM 方法

方法是我们可以在节点(HTML 元素)上执行的动作。

编程接口

可通过 JavaScript (以及其他编程语言)对 HTML DOM 进行访问。所有 HTML 元素被定义为对象,而编程接口则是对象方法和对象属性。方法是您能够执行的动作(比如添加或修改元素)。属性是您能够获取或设置的值(比如节点的名称或内容)。

一些常用的 HTML DOM 方法:

方法描述
getElementById()返回带有指定 ID 的元素。
getElementsByTagName()返回包含带有指定标签名称的所有元素的节点列表(集合/节点数组)。
getElementsByClassName()返回包含带有指定类名的所有元素的节点列表。
appendChild()把新的子节点添加到指定节点。
removeChild()删除子节点。
replaceChild()替换子节点。
insertBefore()在指定的子节点前面插入新的子节点。
createAttribute()创建属性节点。
createElement()创建元素节点。
createTextNode()创建文本节点。
getAttribute()返回指定的属性值。
setAttribute()把指定属性设置或修改为指定的值。

一些常用的 HTML DOM 属性:

  • innerHTML - 节点(元素)的文本值
  • parentNode - 节点(元素)的父节点
  • childNodes - 节点(元素)的子节点
  • attributes - 节点(元素)的属性节点

 简单举例如下:
<!DOCTYPE html><html><body><p id="intro">Hello World!</p><p>本例演示 <b>getElementById</b> 方法!</p><script>x=document.getElementById("intro");document.write("<p>来自 intro 段落的文本:" + x.innerHTML + "</p>");</script></body></html>

 


 

四,HTML DOM 属性

 

属性是节点(HTML 元素)的值,能够获取或设置。

获取或替换元素内容的最简单方法是使用 innerHTML 属性。innerHTML 属性可用于获取或改变任意 HTML 元素,包括 <html> 和 <body>。

下面的代码获取 id="intro" 的 <p> 元素的 innerHTML:

<html><body><p id="intro">Hello World!</p><script>var txt=document.getElementById("intro").innerHTML;document.write(txt);</script></body></html>

除了 innerHTML 属性,您也可以使用 childNodes 和 nodeValue 属性来获取元素的内容。举例如下:

<!DOCTYPE html><html><body><p id="intro">Hello World!</p><script>txt=document.getElementById("intro").childNodes[0].nodeValue;document.write(txt);</script></body></html>

nodeName 属性

nodeName 属性规定节点的名称。

  • nodeName 是只读的
  • 元素节点的 nodeName 与标签名相同
  • 属性节点的 nodeName 与属性名相同
  • 文本节点的 nodeName 始终是 #text
  • 文档节点的 nodeName 始终是 #document

注释:nodeName 始终包含 HTML 元素的大写字母标签名。

nodeValue 属性

nodeValue 属性规定节点的值。

  • 元素节点的 nodeValue 是 undefined 或 null
  • 文本节点的 nodeValue 是文本本身
  • 属性节点的 nodeValue 是属性值

 
 

五,HTML DOM 访问

访问 HTML DOM - 查找 HTML 元素。

访问 HTML 元素(节点)

访问 HTML 元素等同于访问节点

您能够以不同的方式来访问 HTML 元素:

  • 通过使用 getElementById() 方法:返回带有指定 ID 的元素;
  • 通过使用 getElementsByTagName() 方法:返回带有指定标签名的所有元素;
  • 通过使用 getElementsByClassName() 方法:返回带有相同类名的所有 HTML 元素。

getElementsByTagName() 方法举例:

<!DOCTYPE html><html><body><p>Hello World!</p><div id="main"><p>DOM 很有用!</p><p>本例演示 <b>getElementsByTagName</b> 方法。</p></div><script>x=document.getElementById("main").getElementsByTagName("p");document.write("div 中的第一段的文本: " + x[0].innerHTML);</script></body></html>

 

 

六,HTML DOM - 修改

修改 HTML DOM 意味着许多不同的方面(改变元素、属性、样式和事件):

  • 改变 HTML 内容
  • 改变 HTML 属性
  • 创建新的 HTML 元素
  • 删除已有的 HTML 元素
  • 改变 CSS 样式
  • 改变事件(处理程序)

改变 CSS 样式举例:



<html><body><p id="p2">Hello world!</p><script>document.getElementById("p2").style.color="blue";</script></body></html>

创建新的 HTML 元素(如需向 HTML DOM 添加新元素,您首先必须创建该元素(元素节点),然后把它追加到已有的元素上)。

 appendChild()方法,向节点的子节点末尾添加新的子节点,举例如下:

<!DOCTYPE html><html><body><div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p></div><script>var para=document.createElement("p");var node=document.createTextNode("This is new.");para.appendChild(node);var element=document.getElementById("div1");element.appendChild(para);</script></body></html>

  insertBefore()方法,在已有子节点前插入一个新的子节点,举例如下:

<p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p></div><script>var para=document.createElement("p");var node=document.createTextNode("This is new.");para.appendChild(node);var element=document.getElementById("div1");var child=document.getElementById("p1");element.insertBefore(para,child);</script>

 

使用事件

HTML DOM 允许您在事件发生时执行代码。

当 HTML 元素”有事情发生“时,浏览器就会生成事件:

  • 在元素上点击
  • 加载页面
  • 改变输入字段

举例:改变 <body> 元素的背景色(下面2段代码效果相同)

<html><body><input type="button" onclick="document.body.style.backgroundColor='lavender';"value="Change background color" /></body></html>

<html><body><script>function ChangeBackground(){document.body.style.backgroundColor="lavender";}</script><input type="button" onclick="ChangeBackground()"value="Change background color" /></body></html>

 

改变 <p> 元素的文本,举例如下:

<html><body><p id="p1">Hello world!</p><script>function ChangeText(){document.getElementById("p1").innerHTML="New text!";}</script><input type="button" onclick="ChangeText()" value="Change text"></body></html>

 



 如需删除 HTML 元素,您必须清楚该元素的父元素,举例如下:

<div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p></div><script>var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.removeChild(child);</script>

或者:

<div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p></div><script>var child=document.getElementById("p1");
child.parentNode.removeChild(child);
</script>

 

如需替换 HTML DOM 中的元素,请使用 replaceChild() 方法,语法为node.replaceChild(newnode,oldnode),举例如下:

<div id="div1"><p id="p1">This is a paragraph.</p><p id="p2">This is another paragraph.</p></div><script>var para=document.createElement("p");var node=document.createTextNode("This is new.");para.appendChild(node);var parent=document.getElementById("div1");var child=document.getElementById("p1");parent.replaceChild(para,child);</script>

 

七,HTML DOM - 导航

通过 HTML DOM,您能够使用节点关系在节点树中导航。

HTML DOM 节点列表

getElementsByTagName() 方法返回节点列表。节点列表是一个节点数组。下面的代码选取文档中的所有 <p> 节点,举例如下:

<!DOCTYPE html><html><body><p>Hello World!</p><p>DOM 很有用!</p><script>x=document.getElementsByTagName("p");document.write("第二段的 innerHTML 是: " + x[1].innerHTML);</script></body></html>

HTML DOM 节点列表长度

length 属性定义节点列表中节点的数量。可以使用 length 属性来循环节点列表,举例如下:

<!DOCTYPE html><html><body><p>Hello World!</p><p>DOM 很有用!</p><p>本例演示 <b>length</b> 属性。</p><script>x=document.getElementsByTagName("p");for (i=0;i<x.length;i++) {  document.write(x[i].innerHTML); document.write("<br>"); }</script></body></html>

导航节点关系

 能够使用三个节点属性:parentNode、firstChild 以及 lastChild ,在文档结构中进行导航。举例如下:

<!DOCTYPE html><html><body><p id="intro">Hello World!</p><script>x=document.getElementById("intro");document.write(x.firstChild.nodeValue);</script></body></html>

 

DOM 根节点

这里有两个特殊的属性,可以访问全部文档:

  • document.documentElement - 全部文档
  • document.body - 文档的主体

 举例如下:

<!DOCTYPE html><html><body><p>Hello World!</p><div><p>DOM 很有用!</p><p>本例演示 <b>document.body</b> 属性。</p></div><script>alert(document.body.innerHTML);</script></body></html>