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 个不同的部分: 核心 ...
随机推荐
- Birt报表存储过程多选参数的设置
Birt对存储过程的操作是很简单的一行语句,只需要在Data Set中写上类似这样 {call CAMPAIGN_REAL_TIME_MONITOR(?,?)} 如下图 本报表是存在两个参数,一个允许 ...
- 【资源】108个大数据文档PDF开放下载-整理后打包下载
本博客所有文章分类的总目录:http://www.cnblogs.com/asxinyu/p/4288836.html 本博客其他.NET开源项目文章目录:h ...
- ksoap调用webservice
Web service是一个平台独立的,低耦合的,自包含的.基于可编程的web的应用程序,可使用开放的XML(标准通用标记语言下的一个子集)标准来描述.发布.发现.协调和配置这些应用程序,用于开发分布 ...
- 近期博客内容的规划（关于Swift语言）
因为最近事情比较多,有一段时间没有发表博客了.前一段时间,利用空余时间翻译了一本关于Swif的书籍,过一段时间就会出版吧.通过翻译此书,英语水平没提高多少,不过Swift算是系统的学习了一下. 在翻译 ...
- 编写atoi库函数
看到很多面试书和博客都提到编写atoi函数,在很多面试中面试官都会要求应聘者当场写出atoi函数的实现代码,但基本很少人能写的完全正确,倒不是这道题有多么高深的算法,有多么复杂的数据结构,只因为这道题 ...
- IOS-Foundation框架结构
这些东西,等用的时候查资料就行,用的多了,自然就记住了,大概过一下 发现一个不错的 ios 学习博客:http://www.cnblogs.com/kenshincui,非常好,推荐看看.FOunda ...
- 重温Servlet学习笔记--编码问题
在说编码问题之前,首先先了解一下常见的字符编码: ISO-8859-1: 拉丁编码,不支持中文 gbk,gb2312,gb18030:系统默认编码,是中国的国标码 utf-8: 支持几乎所有语言的编 ...
- WebGIS中一种根据网格索引判断点面关系的方法
文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 判断点面关系的算法有很多,在我之前的博文中有一篇专门对其进行 ...
- 百度eCharts体验
前言 从昨天开始给项目里添加一些图表对比功能,上一个项目里使用的是Highcharts,本打算继续用Highcharts做的,昨天试了下做出来的效果不太好,主要也是因为看的多了没什么新鲜感了,于是便尝 ...
- SQL Server SQL性能优化之--pivot行列转换减少扫描计数优化查询语句
原文出处:http://www.cnblogs.com/wy123/p/5933734.html 先看常用的一种表结构设计方式: 那么可能会遇到一种典型的查询方式,主子表关联,查询子表中的某些(或者全 ...