HTML DOM

一，HTML DOM 简介

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

DOM 定义了访问 HTML 和 XML 文档的标准：“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”

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[].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[].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[].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=;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>

HTML DOM 教程的更多相关文章

HTML DOM 教程Part1
2015-05-08 摘自W3C School HTML DOM HTML DOM 定义了访问和操作HTML文档的标准方法.HTML DOM 把 HTML 文档呈现为带有元素.属性和文本的树结构(节点 ...
JS 学习（三）DOM
HTML DOM(文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).HTML DOM 模型被构造为对象的树. HTML DOM树: Java ...
JavaScript强化教程——JavaScript 总结
本教程中我们向您讲授了如何向 html 页面添加 JavaScript,使得网站的动态性和交互性更强. 你已经学习了如何创建对事件的响应,验证表单,以及如何根据不同的情况运行不同的脚本. 你也学到了如 ...
W3Cschool菜鸟教程离线版下载链接
请在电脑上打开以下链接进行下载w3cschool 离线版(chm):http://pan.baidu.com/s/1bniwRCV(最新,2014年10月21日更新)w3cschool 离线版(htm ...
HTML,javaScript,DOM详解
HTML DOM 教程 DOM 教程 DOM 简介 HTML DOM 定义了访问和操作 HTML 文档的标准方法. DOM 将 HTML 文档表达为树结构. HTML DOM 树 HTML DOM 简 ...
DOM基础总结
一.简介 1.什么是DOM 文档对象模型(Document Object Model,DOM)是一种用于HTML和XML文档的编程接口.它给文档提供了一种结构化的表示方法,可以改变文档的内容和呈现方式 ...
JavaScript HTML DOM 元素(节点)
JavaScript HTML DOM 元素(节点) 创建新的 HTML 元素创建新的 HTML 元素如需向 HTML DOM 添加新元素,您必须首先创建该元素(元素节点),然后向一个已存在的元素 ...
PHP XML DOM
PHP XML DOM 内建的 DOM 解析器使在 PHP 中处理 XML 文档成为可能. DOM 是什么? W3C DOM 提供了针对 HTML 和 XML 文档的标准对象集,以及用于访问和操作这些 ...
DOM和jQuery
一.DOM 在学习DOM之前你应该已经具备了以下三个知识点的应用:HTML CSS javascript DOM 是 W3C(万维网联盟)的标准. W3C DOM 标准被分为 3 个不同的部分: 核心 ...

随机推荐

Javascript学习记录——原生JS实现旋转木马特效
昨天学习到了JS特效部分,然后老师讲了旋转木马特效的实现,如上图.不过只是讲了通过点击箭头实现图片的切换,对于点击图片本身以及二者联动却是没有讲解. 本着一颗追求完美的心,今天花费了一个中午终于将整个 ...
Android开发-之五大布局
在html中大家都知道布局是什么意思了,简单来说就是将页面划分模块,比如html中的div.table等.那么Android中也是这样的.Android五大布局让界面更加美化,开发起来也更加方便.当然 ...
Sql Server系列：数据控制语句
数据控制语句用来设置.更改用户或角色的权限,包括GRANT.DENY.REVOKE等语句. GRANT用来对用户授予权限,REVOKE可用于删除已授权的权限,DENY用于防止主体通过GRANT获得特定 ...
斐讯Fir302b救砖教程
首先本人是路由器小白,不算是硬件改装高手,昨天收到了微信活动中的斐讯Fir302b,大概当时得奖的有300人,所以最近肯定很大一批朋友手里有这样的一款路由. 上网查了一下,此款路由可以刷基于tomat ...
flat network 原理与配置 - 每天5分钟玩转 OpenStack（86）
flat network 是不带 tag 的网络,要求宿主机的物理网卡直接与 linux bridge 连接,这意味着: 每个 flat network 都会独占一个物理网卡. 上图中 eth1 桥接 ...
数据可视化-EChart2.0使用总结1
图表是企业级Web开发必不可少的一个功能点.也是“数据可视化的一个具体呈现”.今天看到阮一峰翻译的“数据可视化:基本图表”一文,同时梳理一下公司现在项目使用的EChart2.0类库.阮一峰的文章同时也 ...
EasyUI+MVC+EF简单用户管理Demo（问题及解决）
写在前面 iframe-src EntityFramework版本 connectionStrings View.Action.页面跳转 EasyUI中DataGrid绑定新增.修改和删除数据效果 ...
关于JqueryEasyUI集合Kindeditor
写在前面上一篇<初试JqueryEasyUI(附Demo)>: 在上一篇说过,下面要试下easyui集合编辑器,关于编辑器网上有很多,ckeditor.ueditor.kindedito ...
安装nginx
[yum安装nginx] yum clean all(这步不执行会出现no more mirrors to try错误) cd /etc/yum.repos.d/ vi nginx.repo 填写 [ ...
C语言实现控制台中光标随意移动
开始准备学习下C,新手哦~~ 今天弄了个控制台程序,光标可以随意在DOS下移动~~ 先放一张效果图,不过很丑,大家能不能看懂,哈哈,就是 I Love You. 代码注释都有,其实好多东西我都是从其他 ...

HTML DOM 教程