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 个不同的部分: 核心 ...
随机推荐
- SVN-让项目不包括Bin和Obj
方案一: 方案二: 方法三: 添加自定义文件夹或者文件的过滤 eg:.svn .git .vs obj bin *.o *.lo *.la *.al .libs *.so *.so.[0-9]* * ...
- ViewPager+RadioGroup实现标题栏切换,Fragment切换
1.说明: 在使用RadioGroup做标题栏切换的时候,跟ViewPager的滑动有冲突,最后查看了源码+断点调试解决了一些碰到的问题,写一篇博客总结一下,有同样需求的朋友可以借鉴一下,自己以后有用 ...
- Notes:indexedDB使用
indexedDB是浏览器端保存结构化数据的一种数据库,类似于mysql,oracle等数据库,但indexedDB使用对象存储数据,而不是用表. indexedDB是全局的宿主对象,使用window ...
- IDDD 实现领域驱动设计－一个简单的 CQRS 示例
上一篇:<IDDD 实现领域驱动设计-CQRS(命令查询职责分离)和 EDA(事件驱动架构)> 学习架构知识,需要有一些功底和经验,要不然你会和我一样吃力,CQRS.EDA.ES.Saga ...
- ios UIWebView 在开发中加载文件
UIWebView 在实际应用中加载文件的时候,有两种情况, 1. 实行在线预览 , 2. 下载到本地,再查看 如果是第一种情况: NSURL *url = [NSURL URLWithString: ...
- 【PHP面向对象(OOP)编程入门教程】17.克隆对象__clone()方法
有的时候我们需要在一个项目里面,使用两个或多个一样的对象,如果你使用“new”关键字重新创建对象的话,再赋值上相同的属性,这样做比较烦琐而且也容易出错,所以要根据一个对象完全克隆出一个一模一样的对象, ...
- Android之圆形头像裁切
PS:今天项目测试组发现,百度地图定位的数据坐标位置是正确的,但是显示的数据是错误的.最后查来查去发现,那个商厦在百度地图上根本就没有那条数据,这让我如何显示,当初就推崇使用高德地图定位,上面的数据量 ...
- 30 个惊艳的 Bootstrap 扩展插件
Bootstrap 是快速开发Web应用程序的前端工具包.它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等. Boo ...
- github上传项目（使用git）、删除项目、添加协作者
一.注册github账号 github网址https://github.com/ 下一步 然后,你的邮箱会收到一封邮件,进行邮箱验证就行了 二.创建github仓库 登录你的github,在首页的右方 ...
- 基于OBS的插件开发总结
一.介绍 OBS(Open Broadcaster Software)是一个广泛使用的视频录制直播软件.利用该软件可以实现桌面窗口.游戏.网页.RTMP流.图像等的录制直播.OBS也是一个开放源代码的 ...