HTML DOM 教程
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 个不同的部分: 核心 ...
随机推荐
- DB的IO统计
对数据的IO操作,都是写入到数据库文件中,sys.dm_io_virtual_file_stats Returns I/O statistics for data and log files. sys ...
- OpenCascade Eigenvalues and Eigenvectors of Square Matrix
OpenCascade Eigenvalues and Eigenvectors of Square Matrix eryar@163.com Abstract. OpenCascade use th ...
- Minor【 PHP框架】4.服务容器与服务提供者
框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...
- .cn根服务器被攻击之后
如果是互联网行业的人员应该知道,8月25日凌晨,大批的“.cn”域名的网站都无法访问,当然包括weibo.cn等大型网站.个人比较奇怪的一件事情是,微博PC网页版是:www.weibo.com,而mo ...
- 哪些HTML5特性值得期待
首先大家可以看一下<HTML5程序设计(第二版)>最后一章关于HTML5未来展望.地址:http://www.ituring.com.cn/article/1690?q=html5%E6% ...
- 从零开始编写自己的C#框架（9）——数据库设计与创建
对于千万级与百万级数据库设计是有所区别的,由于本项目是基于中小型软件开发框架来设计,记录量相对会比较少,所以数据库设计时考虑的角度是:与开发相结合:空间换性能:空间换开发效率:减少null异常.... ...
- geotrellis使用（三）geotrellis数据处理过程分析
之前简单介绍了geotrellis的工作过程以及一个简单的demo,最近在此demo的基础上实现了SRTM DEM数据的实时分析以及高程实时处理,下面我就以我实现的上述功能为例,简单介绍一下geotr ...
- “英雄之旅”见闻和小结----angular2系列（三)
前言: 本系列在前面两篇文章,介绍了Zone.js和angular2的基础概念.而后对于ng2的学习,还是由官方的 Tour of Heroes 开始. 以下内容经过提炼和个人理解,当然也会有不正确的 ...
- JAVA中关于锁机制
本文转自 http://blog.csdn.net/yangzhijun_cau/article/details/6432216 一段synchronized的代码被一个线程执行之前,他要先拿到执行这 ...
- DIB位图（Bitmap）的读取和保存
设备无关位图(Device Independent Bitmap)是可以保存在磁盘的位图文件,可以从磁盘读取到内存或者从内存保存到磁盘上.它的文件结构是标准化的,可以在Windows/Linux/Un ...