文档对象模型DOM通俗讲解


Posted in Javascript onNovember 01, 2013

在开始之前先说一点,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定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把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>

DOM操作Checkbox实例
<!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>

单机按钮显示效果:
文档对象模型DOM通俗讲解 
Javascript 相关文章推荐
FireFox中textNode分片的问题
Apr 10 Javascript
js触发select onchange事件的小技巧
Aug 05 Javascript
JavaScript中指定函数名称的相关方法
Jun 04 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
require.js配合插件text.js实现最简单的单页应用程序
Jul 12 Javascript
利用纯JS实现像素逐渐显示的方法示例
Aug 14 Javascript
JS实现分页浏览横向图片(类轮播)实例代码
Nov 06 Javascript
将Sublime Text 3 添加到右键中的简单方法
Dec 12 Javascript
微信小程序 select 下拉框组件功能
Sep 09 Javascript
Node.js API详解之 tty功能与用法实例分析
Apr 27 Javascript
nuxt 实现在其它js文件中使用store的方式
Nov 05 Javascript
JavaScript实现移动小精灵的案例代码
Dec 12 Javascript
原生js ActiveXObject获取execl里面的值
Nov 01 #Javascript
框架页面高度自动刷新的Javascript脚本
Nov 01 #Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 #Javascript
JS实现拖动示例代码
Nov 01 #Javascript
多种方法实现JS动态添加事件
Nov 01 #Javascript
基于jquery插件实现常见的幻灯片效果
Nov 01 #Javascript
jQuery Mobile 导航栏代码
Nov 01 #Javascript
You might like
PHP遍历并打印指定目录下所有文件实例
2014/02/10 PHP
PHP开发中常用的十个代码样例
2016/02/02 PHP
Laravel中encrypt和decrypt的实现方法
2017/09/24 PHP
innerText和innerHTML 一些问题分析
2009/05/18 Javascript
JQuery扩展插件Validate—6 radio、checkbox、select的验证
2011/09/05 Javascript
js 连接数据库如何操作数据库中的数据
2012/11/23 Javascript
PHP+jQuery实现随意拖动层并即时保存拖动位置
2015/04/30 Javascript
jquery Deferred 快速解决异步回调的问题
2016/04/05 Javascript
bootstrap读书笔记之CSS组件(上)
2016/10/17 Javascript
微信小程序图表插件(wx-charts)实例代码
2017/01/17 Javascript
详解vue-cli项目中的proxyTable跨域问题小结
2018/02/09 Javascript
聊聊Vue 中 title 的动态修改问题
2019/06/11 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
微信小程序自定义纯净模态框(弹出框)的实例代码
2020/03/09 Javascript
JS监听组合按键思路及实现过程
2020/04/17 Javascript
js+audio实现音乐播放器
2020/09/13 Javascript
微信小程序实现自定义底部导航
2020/11/18 Javascript
17个Python小技巧分享
2015/01/23 Python
Python中每次处理一个字符的5种方法
2015/05/21 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Python3 无重复字符的最长子串的实现
2019/10/08 Python
python getopt模块使用实例解析
2019/12/18 Python
python破解同事的压缩包密码
2020/10/14 Python
python在linux环境下安装skimage的示例代码
2020/10/14 Python
详解三种方式实现平滑滚动页面到顶部的功能
2019/04/23 HTML / CSS
C#中类(class)与结构(struct)的异同
2013/11/03 面试题
学生学习总结的自我评价
2013/10/22 职场文书
班主任新年寄语
2014/04/04 职场文书
关于热爱祖国的演讲稿
2014/05/04 职场文书
5s标语大全
2014/06/23 职场文书
医学专业毕业生推荐信
2014/07/12 职场文书
2014财务年度工作总结
2014/11/11 职场文书
2015年收银员个人工作总结
2015/04/01 职场文书
教师节校长致辞
2015/07/31 职场文书
2016年助残日旅游活动总结
2016/04/01 职场文书
创业计划书之网吧
2019/10/10 职场文书