DOM简介
什么是DOM？
DOM 是 Document Object Model（文档对象模型）的缩写。
W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。
W3C DOM 标准被分为 3 个不同的部分：
核心 DOM - 针对任何结构化文档的标准模型
XML DOM - 针对 XML 文档的标准模型
HTML DOM - 针对 HTML 文档的标准模型
什么是 HTML DOM？
HTML DOM 是：
HTML 的标准对象模型
HTML 的标准编程接口
W3C 标准
HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。
HTML DOM树
HTML DOM 将 HTML 文档视作树结构。这种结构被称为节点树。
通过 HTML DOM，树中的所有节点均可通过 JavaScript 进行访问。所有 HTML 元素（节点）均可被修改，也可以创建或删除节点。
请看下面的 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>元素的最后一个子节点
方法&属性
常见 DOM 对象方法
| 方法 | 描述 |
|---|---|
| getElementById() | 返回带有指定 ID 的元素。 |
| getElementsByTagName() | 返回包含带有指定标签名称的所有元素的节点列表（集合/节点数组）。 |
| getElementsByClassName() | 返回包含带有指定类名的所有元素的节点列表。 |
| appendChild() | 把新的子节点添加到指定节点。 |
| removeChild() | 删除子节点。 |
| replaceChild() | 替换子节点。 |
| insertBefore() | 在指定的子节点前面插入新的子节点。 |
| createAttribute() | 创建属性节点。 |
| createElement() | 创建元素节点。 |
| createTextNode() | 创建文本节点。 |
| getAttribute() | 返回指定的属性值。 |
| setAttribute() | 把指定属性设置或修改为指定的值。 |
一些常用的 HTML DOM 属性：
innerHTML - 节点（元素）的文本值
parentNode - 节点（元素）的父节点
childNodes - 节点（元素）的子节点
attributes - 节点（元素）的属性节点
访问 HTML 元素（节点）
访问 HTML 元素等同于访问节点
您能够以不同的方式来访问 HTML 元素：
通过使用 getElementById() 方法
通过使用 getElementsByTagName() 方法
通过使用 getElementsByClassName() 方法
<!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[0].innerHTML);
</script>
</body>
</html>
修改 HTML 元素
修改 HTML DOM 意味着许多不同的方面：
改变 HTML 内容
改变 CSS 样式
改变 HTML 属性
创建新的 HTML 元素
删除已有的 HTML 元素
改变事件（处理程序）
<!DOCTYPE html>
<html>
<body>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="New text!";
</script>
<p>上面的段落被一段脚本改变了。</p>
</body>
</html>
添加、删除和替换 HTML 元素。
<!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>
事件
HTML DOM 允许 JavaScript 对 HTML 事件作出反应。。
HTML 事件的例子：
当用户点击鼠标时
当网页已加载时
当图片已加载时
当鼠标移动到元素上时
当输入字段被改变时
当 HTML 表单被提交时
当用户触发按键时
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<p>点击按钮来执行 <b>displayDate()</b> 函数。</p>
<button id="myBtn">试一试</button>
<script>
document.getElementById("myBtn").onclick=function(){displayDate()};
function displayDate()
{
document.getElementById("demo").innerHTML=Date();
}
</script>
<p id="demo"></p>
</body>
</html>
DOM简介的更多相关文章
- HTML DOM简介
HTML DOM简介 1.当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model),HTML DOM模型被创建为对象的树.如下所示: 2.通过可编程的对象模型,Ja ...
- Dom 简介
HTML DOM 简介 DOM 教程 DOM 节点 HTML DOM 定义了访问和操作 HTML 文档的标准. 您应该具备的基础知识 在您继续学习之前,您需要对以下内容拥有基本的了解: HTML CS ...
- BOM DOM 简介
BOM和DOM简介 BOM,Browser Object Model ,浏览器对象模型. BOM主要提供了访问和操作浏览器各组件的方式. 浏览器组件: window(浏览器窗口) locati ...
- Javascript学习笔记2.1 Javascript与DOM简介
DOM(文档对象模型)简介 DOM(文档对象模型)针对HTML和XML文档的一个API. DOM可以将任何HTML或XML文档描绘成由多层节点构成的树形结构,它是中立于平台和语言的接口,允许程序和脚本 ...
- javascript总结18:javascript DOM简介
1 HTML DOM 使 JavaScript 有能力对 HTML 事件做出反应.在事件发生时,执行JavaScript 方法,做出交互. 2 格式: onclick=JavaScript脚本 3 H ...
- DOM简介及节点、属性、查找节点的方法
DOM(Document Object Modle) 操作文档的编程接口DOM定义了表示和修改文档的方法,不能修改css样式表,在js中使用DOM方法改变元素的css样式,实质上是在元素上添加行间样式 ...
- 26 JavaScript HTML DOM简介&方法&文档
HTML DOM: Document Object Model 文档对象模型.是HTML的标准对象模型和编程接口.(JavaScript只是可以操作HTML DOM的语言之一) 定义了HTML元素 ...
- JS DOM简介
1. 概述 文档对象模型(Document Object Model,简称 DOM),是W3C组织推荐的处理可扩展标记语言(HTML或者XML)的标准编程接口.W3C 已经定义了一系列的 DOM 接口 ...
- DOM文档对象模型简介
DOM简介 DOM是W3C(万维网联盟)的标准 "W3C文档对象模型DOM是中立于平台和语言的接口,它允许程序和脚本动态地访问和更新文档的内容.结构.样式".W3C DOM ...
随机推荐
- Win10下安装MySQL总卡在write configuration的解决办法
先说结论 删除 C:\ProgramData 下的MySQL文件夹!!! 折腾过程 反复安装卸载,安装版.绿色版,都不行,清理注册表,清理安装文件夹,还是不行!!! 最后找到并删除 C:\Prog ...
- linux 下简单的ftp客户端程序
该ftp的客服端是在linux下面写,涉及的东西也比较简单,如前ftp的简单介绍,知道ftp主要的工作流程架构,套接字的创建,还有就是字符串和字符的处理.使用的函数都是比较简单平常易见的,写的时候感觉 ...
- 【BZOJ】1692 & 1640: [Usaco2007 Dec]队列变换（后缀数组+贪心）
http://www.lydsy.com/JudgeOnline/problem.php?id=1692 http://www.lydsy.com/JudgeOnline/problem.php?id ...
- 【POJ】1094 Sorting It All Out（拓扑排序）
http://poj.org/problem?id=1094 原来拓扑序可以这样做,原来一直sb的用白书上说的dfs............ 拓扑序只要每次将入度为0的点加入栈,然后每次拓展维护入度即 ...
- Loadrunner如何遍历一个页面中的url并进行访问?
最近在网上到一个关于loadrunner遍历一个页面中的url并进行访问的脚本,就把它用我们自己的项目实践了一下,发现有一点不完善. 原始版本: Action(){char temp[64];int ...
- MathType中空格个数怎么显示
在使用Word文档的时候很时候用原软件自带的公式编辑器不是很好用,也不方法.MathType就是来解决这个问题的,但是一些用户在使用过程中发现不会看究竟输了多少空格,只能估摸大概.下面本MathTyp ...
- Sqlite - constraint failed[0x1555]: UNIQUE constraint failed
执行插入操作时,出现异常constraint failed[0x1555]: UNIQUE constraint failed 意思是:sqlite 唯一约束失败 定位于某个表字段上,该字段是表的主键 ...
- Matplotlib植入PyQt5 + QT5的UI呈现
实现matplotlib图形通过PyQt5+Qt5在GUI中呈现步骤: 第一步,通过matplotlib.backends.backend_qt5agg类来连接PyQt5: import matplo ...
- C语言的代码内存布局详解
一个程序本质上都是由 BSS 段.data段.text段三个组成的.这样的概念在当前的计算机程序设计中是很重要的一个基本概念,而且在嵌入式系统的设计中也非常重要,牵涉到嵌入式系统运行时的内存大小分配, ...
- 系统之间通讯方式—SOAP（web service）
[web service 简介] 是一种新的web应用程序分支,是自包含.自描述.模块化的应用,可以发布.定位.通过web调用.web service是一个应用组件,它逻辑性的为其他应用程序提供数据与 ...