文档对象模型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 相关文章推荐
修改发贴的编辑功能
Mar 07 Javascript
javascript中加号(+)操作符的一些神奇作用
Jun 06 Javascript
js和jq使用submit方法无法提交表单的快速解决方法
May 17 Javascript
JSONP原理及简单实现
Jun 08 Javascript
jquery中关于bind()方法的使用技巧分享
Mar 30 jQuery
javascript高仿热血传奇游戏实现代码
Feb 22 Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 jQuery
vuejs router history 配置到iis的方法
Sep 20 Javascript
微信小程序授权登录及解密unionId出错的方法
Sep 26 Javascript
在js代码拼接dom对象到页面上的模板总结
Oct 21 Javascript
每个 JavaScript 工程师都应懂的33个概念
Oct 22 Javascript
Vue使用Ref跨层级获取组件的步骤
Jan 25 Vue.js
原生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 设计模式系列之 specification规格模式
2016/01/10 PHP
php面向对象之反射功能与用法分析
2017/03/29 PHP
php操作redis常见方法示例【key与value操作】
2020/04/14 PHP
js调试工具 Javascript Debug Toolkit 2.0.0版本发布
2008/12/02 Javascript
JavaScript 学习笔记 Black.Caffeine 09.11.28
2009/11/30 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
JS判断浏览器是否支持某一个CSS3属性的方法
2014/10/17 Javascript
JavaScript事件 &quot;事件对象&quot;的注意要点
2016/01/14 Javascript
Javascript highcharts 饼图显示数量和百分比实例代码
2016/12/06 Javascript
Angular 2 利用Router事件和Title实现动态页面标题的方法
2017/08/23 Javascript
Angular将填入表单的数据渲染到表格的方法
2017/09/22 Javascript
微信小程序 导入图标实现过程详解
2019/10/11 Javascript
Element InputNumber计数器的使用方法
2020/07/27 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
2020/07/30 Javascript
python实现猜数字游戏(无重复数字)示例分享
2014/03/29 Python
Python3使用requests发闪存的方法
2016/05/11 Python
Python使用selenium实现网页用户名 密码 验证码自动登录功能
2018/05/16 Python
Python3.6+selenium2.53.6自动化测试_读取excel文件的方法
2019/09/06 Python
手把手教你Python yLab的绘制折线图的画法
2019/10/23 Python
Python轻量级web框架bottle使用方法解析
2020/06/13 Python
基于opencv的selenium滑动验证码的实现
2020/07/24 Python
Python+OpenCV图像处理——实现直线检测
2020/10/23 Python
用python发送微信消息
2020/12/21 Python
写给爸爸的道歉信
2014/01/15 职场文书
微笑服务标语
2014/06/24 职场文书
妈妈活动方案
2014/08/15 职场文书
领导干部民主生活会自我剖析材料范文
2014/09/20 职场文书
声乐专业大学生职业生涯规划书:理想的未来需要自己去打造
2014/09/20 职场文书
2014国庆黄金周超市促销活动方案
2014/09/21 职场文书
师德师风个人自我剖析材料
2014/09/27 职场文书
工艺技术员岗位职责
2015/02/04 职场文书
pytorch 如何把图像数据集进行划分成train,test和val
2021/05/31 Python
IDEA使用SpringAssistant插件创建SpringCloud项目
2021/06/23 Java/Android
MySQL的全局锁和表级锁的具体使用
2021/08/23 MySQL
一文搞懂MySQL索引页结构
2022/02/28 MySQL
详解SQL的窗口函数
2022/04/21 Oracle