1.HTML DOM 简介
HTML 文档对象模型（HTML Document Object Model）定义了访问和处理 HTML 文档的标准方法。
HTML DOM 把 HTML 文档呈现为带有元素、属性和文本的树结构（节点树）。
(1)什么是 DOM？
通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。
这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
(2)DOM 被分为不同的部分（核心、XML及HTML）和级别（DOM Level 1/2/3）：
Core DOM:定义了一套标准的针对任何结构化文档的对象
XML DOM:定义了一套标准的针对 XML 文档的对象
HTML DOM:定义了一套标准的针对 HTML 文档的对象。
2.HTML DOM 节点
HTML 文档中的每个成分都是一个节点。
(1)节点
根据 DOM，HTML 文档中的每个成分都是一个节点。
DOM 是这样规定的：
整个文档是一个文档节点
每个 HTML 标签是一个元素节点
包含在 HTML 元素中的文本是文本节点
每一个 HTML 属性是一个属性节点
注释属于注释节点
(2)Node 层次
节点彼此都有等级关系。
HTML 文档中的所有节点组成了一个文档树（或节点树）。
HTML 文档中的每个元素、属性、文本等都代表着树中的一个节点。
树起始于文档节点，并由此继续伸出枝条，直到处于这棵树最低级别的所有文本节点为止。
(3)HTML DOM 节点树
一棵节点树中的所有节点彼此都是有关系的。
请看下面这个HTML文档：
<html>
<head>
<title>DOM Tutorial</title>
</head>
<body>
<h1>DOM Lesson one</h1>
<p>Hello world!</p>
</body>
</html>
上面所有的节点彼此间都存在关系。
父节点:除文档节点之外的每个节点都有父节点。
子节点：大部分元素节点都有子节点。
同辈（同级节点）：当节点分享同一个父节点时，它们就是同辈（同级节点）。
后代：节点也可以拥有后代，后代指某个节点的所有子节点，或者这些子节点的子节点。
先辈：节点也可以拥有先辈。先辈是某个节点的父节点，或者父节点的父节点。
3.HTML DOM 访问节点
通过 DOM，您可访问 HTML 文档中的每个节点。
(1)查找并访问节点
你可通过若干种方法来查找您希望操作的元素：
通过使用 getElementById() 和 getElementsByTagName() 方法
通过使用一个元素节点的 parentNode、firstChild 以及 lastChild 属性
(2)getElementById() 和 getElementsByTagName()
这两种方法会忽略文档的结构。
1)getElementById()
可通过指定的 ID 来返回元素：
语法:
document.getElementById("ID");
注释：getElementById() 无法工作在 XML 中。在 XML 文档中，您必须通过拥有类型 id 的属性来进行搜索，而此类型必须在 XML DTD 中进行声明。
2)getElementsByTagName()
使用指定的标签名返回所有的元素
语法:
document.getElementsByTagName("标签名称");
或者：document.getElementById('ID').getElementsByTagName("标签名称");
3)节点列表（nodeList)
当我们使用节点列表时，通常要把此列表保存在一个变量中，就像这样：
var x=document.getElementsByTagName("p");
现在，变量 x 包含着页面中所有 <p>段落元素的一个列表，并且我们可以通过它们的索引号来访问这些 <p> 元素。
注意：索引号从 0 开始。
1)您可以通过使用 length 属性来循环遍历节点列表：
var x=document.getElementsByTagName("p");
for (var i=0;i<x.length;i++){
// do something with each paragraph
}
2)您也可以通过索引号来访问某个具体的元素。
要访问第三个 <p> 元素，您可以这么写：
var y=x[2];
(3)parentNode、firstChild以及lastChild
这三个属性 parentNode、firstChild 以及 lastChild 可遵循文档的结构，在文档中进行“短距离的旅行”。
请看下面这个 HTML 片段：
<table>
<tr>
<td>John</td>
<td>Doe</td>
<td>Alaska</td>
</tr>
</table>
firstChild:第一个 <td> 是 <tr> 元素的首个子元素（firstChild）。
lastChild:最后一个 <td> 是 <tr>元素的最后一个子元素。
parentNode:<tr> 是每个 <td>元 素的父节点（parentNode）。
1)对 firstChild 最普遍的用法是访问某个元素的文本：
var x=[a paragraph];
var text=x.firstChild.nodeValue;
2)parentNode 属性常被用来改变文档的结构。假设您希望从文档中删除带有 id 为 "maindiv" 的节点：
var x=document.getElementById("maindiv");
x.parentNode.removeChild(x);
首先，您需要找到带有指定 id 的节点，然后移至其父节点并执行 removeChild() 方法。
(4)根节点
有两种特殊的文档属性可用来访问根节点：
document.documentElement:返回存在于 XML 以及 HTML 文档中的文档根节点。
document.body:对 HTML 页面的特殊扩展，提供了对 <body> 标签的直接访问。
4.HTML DOM 节点信息
nodeName、nodeValue 以及 nodeType 包含有关于节点的信息。
每个节点都拥有包含着关于节点某些信息的属性。这些属性是：
nodeName（节点名称）
nodeValue（节点值）
nodeType（节点类型）
(1)nodeName
nodeName 属性含有某个节点的名称。
元素节点的 nodeName 是标签名称
属性节点的 nodeName 是属性名称
文本节点的 nodeName 永远是 #text
文档节点的 nodeName 永远是 #document
注释：nodeName 所包含的 XML 元素的标签名称永远是大写的
(2)nodeValue
对于文本节点，nodeValue 属性包含文本。
对于属性节点，nodeValue 属性包含属性值。
nodeValue 属性对于文档节点和元素节点是不可用的。
(3)nodeType
nodeType 属性可返回节点的类型。
最重要的节点类型是：
元素类型 节点类型
元素 1
属性 2
文本 3
注释 8
文档 9
5.一个 HTML DOM 实例
当一个用户在文档中点击时，HTML 文档的背景颜色如何被改变
<html>
<head>
<script type="text/javascript">
function ChangeColor(){
document.body.bgColor="yellow"
}
</script>
</head>
<body onclick="ChangeColor()">
Click on this document!
</body>
</html>
6.参考
BOM
Window JavaScript 层级中的顶层对象，表示浏览器窗口。
Navigator 包含客户端浏览器的信息。
Screen 包含客户端显示屏的信息。
History 包含了浏览器窗口访问过的 URL。
Location 包含了当前 URL 的信息。
HTML DOM 对象
对象 描述
Document 代表整个 HTML 文档，可被用来访问页面中的所有元素
Anchor 代表 <a> 元素
Area 代表图像映射中的 <area> 元素
Base 代表 <base> 元素
Body 代表 <body> 元素
Button 代表 <button> 元素
Event 代表某个事件的状态
Form 代表 <form> 元素
Frame 代表 <frame> 元素
Frameset 代表 <frameset> 元素
Iframe 代表 <iframe> 元素
Image 代表 <img> 元素
Input button 代表 HTML 表单中的一个按钮
Input checkbox 代表 HTML 表单中的复选框
Input file 代表 HTML 表单中的文件上传
Input hidden 代表 HTML 表单中的隐藏域
Input password 代表 HTML 表单中的密码域
Input radio 代表 HTML 表单中的单选按钮
Input reset 代表 HTML 表单中的重置按钮
Input submit 代表 HTML 表单中的确认按钮
Input text 代表 HTML 表单中的文本输入域（文本框）
Link 代表 <link> 元素
Meta 代表 <meta> 元素
Object 代表 <Object> 元素
Option 代表 <option> 元素
Select 代表 HTML 表单中的选择列表
Style 代表单独的样式声明
Table 代表 <table> 元素
TableData 代表 <td> 元素
TableRow 代表 <tr> 元素
Textarea 代表 <textarea> 元素
分享到：
相关推荐
HTML DOM（Document Object Model）是万维网联盟（W3C）制定的一种标准，它提供了一种结构化的表示HTML或XHTML文档的树型接口。DOM允许编程者和脚本语言（如JavaScript）来动态更新、添加、删除以及改变任何元素和...
HTML DOM（Document Object Model）是Web开发中的一个关键概念，它是一种标准，允许程序员和脚本语言（如JavaScript）以结构化的方式访问和操作HTML或XML文档。DOM将网页视为一个树形结构，其中每个节点代表文档的一...
《前端开源库——htmldom：Node.js中的HTML处理利器》 在当今互联网技术日新月异的时代，前端开发人员面临着各种挑战，其中一项便是如何有效地处理和操作HTML文档。在此背景下，`htmldom`应运而生，它是一个专门为...
要使用Simple HTML DOM，首先需要下载库文件，这里我们有一个名为`simplehtmldom_1_5`的文件，通常是一个包含`simple_html_dom.php`的压缩包。将其解压并引入到PHP项目中，即可开始使用。 5. **使用示例** - 加载...
在压缩包文件"htmldom-master"中，可能包含了这个库的源代码和示例，你可以通过阅读和学习这些代码来深入了解如何在实际项目中应用"htmldom"。在使用前，你需要通过Composer安装这个库，然后在Laravel4的项目中引入...
HTML DOM（Document Object Model）是HTML和XML文档的结构模型，它将网页内容表示为一个树形结构，允许编程语言如C#与HTML交互。在.NET框架中，使用HtmlAgilityPack这个开源库可以方便地对HTML进行DOM解析。...
在Web前端开发中，JavaScript与HTML DOM（Document Object Model）的交互是至关重要的。这篇教程——"JavaScript学习手册十四：HTML DOM-文档元素的操作（二）"深入探讨了如何使用JavaScript来操纵HTML文档中的元素...
htmlDOM方法手册htmlDOM方法手册
HTML DOM（文档对象模型）是Web开发中用于访问和操作HTML或XML文档的标准接口。它将HTML页面结构转化为一个可编程的对象模型，使得开发者可以通过JavaScript或其他脚本语言对页面进行动态更新和交互。在这个模型中，...
HTML DOM（Document Object Model）树则是解析和操作HTML文档的一种标准模型。在这个项目中，开发者使用C++实现了一个DOM树，允许对HTML文档进行半结构化的处理。下面我们将深入探讨这个主题。 首先，C++ HTML DOM...
HTML、JavaScript、jQuery、CSS以及HTML DOM是构建现代网页和应用程序的基础技术。这些技术的参考手册提供了详尽的文档和指南，帮助开发者更好地理解和运用它们。 HTML（HyperText Markup Language）是网页内容的...
标题“HtmlDom.rar_HTML dom_PHP HTMLdom”指出这个压缩包文件包含与HTML DOM和PHP中处理DOM相关的资源。文件“HtmlDom.chm”很可能是一个帮助文件，提供了关于PHP HTML DOM操作的详细指南。 PHP HTML DOM的核心是`...
资源名称：HTML DOM 参考手册资源截图： 资源太大，传百度网盘了，链接在附件中，有需要的同学自取。
simple_html_dom中文解析手册
php simple html dom
HTML DOM的W3C官方教程，是从w3c的网站上整站下载后转换成chm格式的文档
HTML DOM DOM 首页 DOM 简介 DOM 节点 DOM 节点树 DOM 节点访问 DOM 节点信息 DOM How To DOM 参考 DOM 总结 DOM 实例 DOM 实例 DOM 对象 DOM Window DOM Navigator DOM Screen DOM History DOM ...
HTML DOM（Document Object Model）教程是web开发中的一个重要学习资源，尤其对于那些频繁使用JavaScript进行动态网页编程的开发者来说，掌握DOM技术至关重要。DOM是一种标准，它定义了如何表示HTML或XML文档，并...
**DOM4J与HTML DOM详解** DOM4J和HTML DOM是两种不同的XML处理技术，它们在解析、操作和构建XML文档时发挥着重要作用。这里，我们深入探讨这两个库及其相关资源。 1. **DOM4J** - **定义**：DOM4J是一个Java库，...
PHP Simple HTML DOM Parser - v1.9.1 - 2019-10-21 https://sourceforge.net/projects/simplehtmldom/ PHP处理html简单好工具