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 ...
随机推荐
- Linux curl 模拟form表单提交信息和文件
Linux curl 模拟form表单提交信息和文件 curl是一个命令行方式下传输数据的开源传输工具,支持多种协议:FTP.HTTP.HTTPS.IMAP.POP3.TELNET等,功能超级强大 ...
- $-------JSP中表达式语言的$特殊字符的作用
JSP 中EL表达式用法详解 EL 全名为Expression Language EL 语法很简单,它最大的特点就是使用上很方便.接下来介绍EL主要的语法结构: ${sessionScope.user ...
- Maven中将所有依赖的jar包全部导出到文件夹
因为我要对Java类的功能在生产环境(服务器端)进行测试,所以需要将jar包导出,然后在服务器端用-Djava.ext.dirs=./lib的方式走一遍, 下面是解决方案: 在pom.xml中加入如下 ...
- 借用smtp.qq.com发邮件
至于sentmail和postfix的配置有多么麻烦学生在这里就不多废话了...反正是配置了N个小时,最终弄的头晕眼花也没弄好... 下面的方法可以让你完全摆脱这两个工具...当然,你要是想做邮件服务 ...
- when case group by 的用法集合
1.用那个以前大家都熟悉的例子,要求是依旧下面的表格求每个大洲的人口总和 国家(countrcoungry) 人口(population) 中国 600 美国 100 加拿大 100 英国 200 法 ...
- 移动ChemDraw结构有什么方法
ChemDraw软件是一款比较常见的化学绘图软件,化学专业的领域的人常常会用到它.本教程主要是针对新手用户,让其了解一些ChemDraw的一些基本操作,以便其能尽快上手早日用到工作中.下面我们就来给大 ...
- Unable to acquire Oracle environment handle 问题的解决
---恢复内容开始--- 转自:http://blog.csdn.net/zhangweiwindow/article/details/6575224 今天重装了一下系统,所以以前工作时配置的pyth ...
- 将list列表中unicode类型的值转换为字符串类型
- asynDBCenter(不断跟新)
GameServer以前访问DBcenter时同步的,这样服务器都要等待DBcenter返回结果,经理在DBcenter和GameServer之间加了一个asynDBCenter,就实现了异步,感觉还 ...
- 常问面试题：C++中sizeof的陷阱及应答
C++中sizeof是经常被问到的一个概念,比如,下面的几个关于sizeof的面试题反复出现在各大IT公司的技术面试当中,我们有必要完全理解并掌握.注:在曾经面试大公司时,我的确被问到过这样的问题. ...