文档对象模型DOM通俗讲解
在开始之前先说一点，DOM是非常容易理解的，但是大家说的太官方，让人很是难于理解，我们就用非常简单的语言翻译一遍。加深对DOM的理解，从而对它有一个全面的认识。
什么是DOM
DOM的全称是Document Object Model，即文档对象模型，它允许脚本控制Web页面、窗口和文档。
如果没有DOM，JavaScript将是另外一种脚本语言；而有了DOM，它将成为制作动态页面的强有力工具。DOM不是JavaScript语言的一部分，而是内置在浏览器中的一个应用程序接口。当然，我们可以简单的理解为一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
DOM（文档对象模型）是一组用来描述脚本怎样与结构化文档进行交互和访问的web标准。他的功能是把浏览器支持的文档（包括HTML XML XHTML）当作一个对象来解析。DOM实际上是一个操作文档里面所包含的内容的一个编程的API，允许开发人员从文档中读取、搜索、修改、增加和删除数据。DOM是与平台和语言无关的，也就是说只要是支持DOM的平台和编程语言，你都可以用来编写文档。
DOM定义了一系列对象、方法和属性，用于访问、操作和创建文档中的内容、结构、样式以及行为。每一个网页元素（一个HTML标签）都对应着一个对象（object，所谓“对象”，用白话说就是“东西”。）。网页上的标签是一层层嵌套的，最外面的一层是<HTML>，文档对象模型也这样一层层嵌套着，但是通常被理解成一棵树的形状。树根是window或document对象，相当于最外层的标签的外围，也就是整个文档。树根之下（这棵树的图通常是倒着画，就好像遗传谱系或者家谱那样。树根就是唯一的共同祖先）是子一级的对象，子对象也有它自己的子对象，除了根对象以外，所有的对象都有自己的父对象，同一对象的子对象之间就是兄弟的关系。如果大家没有见过家谱，应该知道一个公司的组织架构。 
DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。通过JavaScript，可以重构整个 HTML 文档。可以添加、移除、改变或重排页面上的项目。
要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。
DOM和JavaScript
我们用JavaScript对网页进行的所有操作都是通过DOM进行的。如何访问DOM中的对象？
先是父对象名，后面接着是子对象名，使用圆点隔开。
代码如下:
<span style="font-size:18px">window.document.write("hi!how are you!")</span>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>DOM操作checkbox</title>
<script type="text/javascript">
//当html页面加载完后;执行以下函数
window.onload = function() {
document.getElementById("btn").onclick = function() {
var inputs = document.getElementsByTagName("input");
for ( var i = 0; i < inputs.length; i++) {
if (inputs[i].type = "checkbox") {
if (inputs[i].value % 2 != 0) {
inputs[i].checked = true;
}
}
}
}
}
</script>
</head>
<body>
<input type="checkbox" value="1" />
<input type="checkbox" value="2" />
<input type="checkbox" value="3" />
<input type="checkbox" value="4" />
<input type="checkbox" value="5" />
<input type="checkbox" value="6" />
<input type="checkbox" value="7" />
<input type="checkbox" value="8" />
<input type="checkbox" value="9" />
<input type="checkbox" value="10" />
<button id="btn">选中奇数</button>
</body>
</html>
单机按钮显示效果：
相关推荐
-
js DOM模型操作
DOM模型中的节点:元素节点.文本节点.属性节点 例:<a href="http://www.cnblogs.com/shuz">私のdotnet小屋</a> (1)a是元素节点 (2)"私のdotnet小屋"是文本节点 (3)href="http://www.cnblogs.com/shuz"是属性节点 DOM节点的属性 属性 类型 说明 nodeName String 节点名称,根据节点的类型而定义 nodeValue
-
什么是DOM(Document Object Model)文档对象模型
D:document 文档 浏览器加载的页面 DOM O:object 对象 页面及页面中的任何元素都是对象 M:module 模型 页面中的元素的组织形式 DOM被W3C组织设计为一种平台无关.语言无关的API,程序或脚本通过其动态访问.修改文档的内容.样式.结构. DOM是web 浏览器的运行规范,javascript借助DOM成就了其web标准语言的地位,在web领域实现了所谓"一次编写到处运行"的目标. 文档对象模型(Document Object Model,DOM)是一种用
-
DOM基础教程之模型中的模型节点
<html>位于网页的顶端 它没有父辈,称之为根节点 1.元素节点(element node) 可以说,整个DOM模型都是由元素节点(element node)组成 比如文本段落元素"<p>",无序清单的名称"<ul>",元素节点包含其他元素. 2.文本节点(text node) 例如<h2>中的文本"标题1",<li>中的文字内容,这些具体文本在DOM称为(text node) 3.属
-
关于javascript DOM事件模型的两件事
事件捕捉(Event Capture)的实现问题 W3C DOM Level2的事件模型规范中,事件在DOM树中的传播过程(从根节点到目标节点)被分为了两个阶段:捕捉(Capture)和冒泡(Bubbling).下面这个图能大概的说明整个过程: (from W3C) 如果想创建一个捕捉事件,在支持W3C 事件模型的浏览器中,将addEventListener的第三个参数设为true就好了.例如: 复制代码 代码如下: document.getElementById('foo').addEvent
-
文档对象模型DOM通俗讲解
在开始之前先说一点,DOM是非常容易理解的,但是大家说的太官方,让人很是难于理解,我们就用非常简单的语言翻译一遍.加深对DOM的理解,从而对它有一个全面的认识. 什么是DOM DOM的全称是Document Object Model,即文档对象模型,它允许脚本控制Web页面.窗口和文档. 如果没有DOM,JavaScript将是另外一种脚本语言:而有了DOM,它将成为制作动态页面的强有力工具.DOM不是JavaScript语言的一部分,而是内置在浏览器中的一个应用程序接口.当然,我们可以简单的理
-
JavaScript文档对象模型DOM
目录 一.JavaScript 能够改变页面中的所有 HTML 元素 1.通过 id 找到 HTML 元素 2.通过标签名查找 HTML 元素 3.通过类名找到 HTML 元素 4.JavaScript 能够改变页面中的所有 HTML 属性 5.JavaScript 能够改变页面中的所有 CSS 样式 6.JavaScript 能够对页面中的所有事件做出反应 前言: 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model).通过可编程的对象模型,JavaScr
-
python编写暴力破解zip文档程序的实例讲解
编写暴力破解Zip文件要从学习zipfile库的使用方法入手,首先打开Python解释器,用help('zipfile')命令来了解这个库并重点看一下ZipFile类中的extractall()这个方法 ZipFile extractall() 让我们来写一个脚本测试一下Zip文件库的用法,首先创建一个有密码的压缩文件,这里设置密码为awd,文件名为evil.zip,要解压这个zip文件,实例化一个新的ZipFile类,使用extractall()方法,在可选参数pwd上填上密码 运行后你会发现
-
JavaScript 高级篇之DOM文档,简单封装及调用、动态添加、删除样式（六）
http://www.cnblogs.com/TomXu/archive/2012/02/16/2351331.html , 在回来看这里文章,你一定会有更深刻的认识.因为我在这里介绍概念上的东西比较少,看下面的例子,对初学的朋友可能会有些吃力! 1.DOM的架构 复制代码 代码如下: <html> <head> <title>document</title> </head> <body> <h1>CSS Demo<
-
PHP使用DOM和simplexml读取xml文档的方法示例
本文实例讲述了PHP使用DOM和simplexml读取xml文档的方法.分享给大家供大家参考,具体如下: 实例 用DOM获取下列xml文档中所有金庸小说的书名,该xml文档所在位置为 ./books.xml: <?xml version="1.0" encoding="utf-8"?> <root> <book> <title>天龙八部</title> <author>金庸</autho
-
处理及遍历XML文档DOM元素属性及方法整理
用于处理XML文档的DOM元素属性 复制代码 代码如下: childNodes:返回当前元素所有子元素的数组: firstChild:返回当前元素的第一个下级子元素: lastChild:返回当前元素的最后一个子元素: nextSibling:返回紧跟在当前元素后面的元素: noedValue:指定表示元素值的读/写属性: parentNode:返回元素的父节点: previousSibling:返回紧邻当前元素之前的元素: 用于遍历XML文档的DOM元素方法 复制代码 代码如下: getEle
-
PHP基于DOM创建xml文档的方法示例
本文实例讲述了PHP基于DOM创建xml文档的方法.分享给大家供大家参考,具体如下: DOM创建xml文档 用dom创建如下文档: <booklist> <book id="1"> <title>天龙八部</title> <author>金庸</author> <content> <![CDATA[ 天龙八部是金庸写的一本武侠小说,非常好看! ]]> </content> <
-
Java编程中更新XML文档的常用方法
本文简要的讨论了Java语言编程中更新XML文档的四种常用方法,并且分析这四种方法的优劣.其次,本文还对如何控制Java程序输出的XML文档的格式做了展开论述. JAXP是Java API for XML Processing的英文字头缩写,中文含义是:用于XML文档处理的使用Java语言编写的编程接口.JAXP支持DOM.SAX.XSLT等标准.为了增强JAXP使用上的灵活性,开发者特别为JAXP设计了一个Pluggability Layer,在Pluggability Layer的支持之下,
-
使用NOPI读取Word、Excel文档内容
使用NOPI读取Excel的例子很多,读取Word的例子不多. Excel的解析方式有多中,可以使用ODBC查询,把Excel作为一个数据集对待.也可以使用文档结构模型的方式进行解析,即解析Workbook(工作簿).Sheet.Row.Column. Word的解析比较复杂,因为Word的文档结构模型定义较为复杂.解析Word或者Excel,关键是理解Word.Excel的文档对象模型. Word.Excel文档对象模型的解析,可以通过COM接口调用,此类方式使用较广.(可以录制宏代码,然后替