在开始之前先说一点，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中的对象？

先是父对象名，后面接着是子对象名，使用圆点隔开。

window.document.write("hi!how are you!")

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的更多相关文章

  1. 简单通俗讲解 android 内存泄漏

    在柠檬班社区看到老师一篇android 内存泄漏写的通俗易懂,绝对是小白能看懂的! 原文:http://www.lemfix.com/topics/2 平常会听到程序员说"内存泄漏" ...

  2. 网络编程懒人入门(九)：通俗讲解，有了IP地址，为何还要用MAC地址？

    1.前言 标题虽然是为了解释有了 IP 地址,为什么还要用 MAC 地址,但是本文的重点在于理解为什么要有 IP 这样的东西.本文对读者的定位是知道 MAC 地址是什么,IP 地址是什么. (本文同步 ...

  3. 通俗讲解：PoW共识机制与以太坊的关系、Ghost协议 及 PoS共识机制的变种---Casper

    作者:林冠宏 / 指尖下的幽灵 掘金:https://juejin.im/user/587f0dfe128fe100570ce2d8 博客:http://www.cnblogs.com/linguan ...

  4. Hadoop平台K-Means聚类算法分布式实现+MapReduce通俗讲解

        Hadoop平台K-Means聚类算法分布式实现+MapReduce通俗讲解 在Hadoop分布式环境下实现K-Means聚类算法的伪代码如下: 输入:参数0--存储样本数据的文本文件inpu ...

  5. 5.7 Maven通俗讲解

    好的东西只适合ctry+c+v 原文地址:https://blog.csdn.net/shuzhe66/article/details/45009175 Maven通俗讲解 也许是本人不才,初识Mav ...

  6. CSS(8)---通俗讲解定位(position)

    CSS(8)---通俗讲解定位(position) CSS有三种基本的定位机制: 普通流.浮动.定位.前面两个之前已经讲过,详见博客: 1.CSS(5)---通俗讲解盒子模型 2.CSS(6)---通 ...

  7. 实现一个简单的虚拟DOM

    现在的流行框架,无论React还是Vue,都采用虚拟DOM. 好处就是,当我们数据变化时,无需像Backbone那样整体重新渲染,而是局部刷新变化部分,如下组件模版: <ul class=&qu ...

  8. OSI七层模式简单通俗理解

    OSI七层模式简单通俗理解 这个模型学了好多次,总是记不住.今天又看了一遍,发现用历史推演的角度去看问题会更有逻辑,更好记.本文不一定严谨,可能有错漏,主要是抛砖引玉,帮助记性不好的人.总体来说,OS ...

  9. 验分享：CSS浮动(float,clear)通俗讲解

    经验分享:CSS浮动(float,clear)通俗讲解 很早以前就接触过CSS,但对于浮动始终非常迷惑,可能是自身理解能力差,也可能是没能遇到一篇通俗的教程. 前些天小菜终于搞懂了浮动的基本原理,迫不 ...

随机推荐

  1. 装了wamp之后，80端口被占用解决办法

    1.如果装了IIS,那么把IIS停掉. 2.如果装了sqlserver,那么在cmd里面执行命令:services.msc,进入服务里面,把SQL Server Reporting Services ...

  2. golang 实现轻量web框架

    经常看到很多同学在打算使用go做开发的时候会问用什么http框架比较好.其实go的 http package 非常强大,对于一般的 http rest api 开发,完全可以不用框架就可以实现想要的功 ...

  3. LINUX mysql 源码安装

    一.下载编译安装 #cd /usr/local/src/ #wget http://mysql.byungsoo.net/Downloads/MySQL-5.1/mysql-5.1.38.tar.gz ...

  4. HTML5 Canvas,WebGL,CSS Shaders,GLSL的暧昧关系

    一.前面的所以然 技术的发展日新月异,说不定回家钓几天鱼,就出来个新东西了.新事物新技术发展的初期,你无法预见其未来之趋势,生命诚可贵,没有必要花过多时间深入研究这些新东西,不过,知道了大概,了解个全 ...

  5. linux普通用户获取管理员权限

    原文:http://www.cnblogs.com/likwo/p/3435404.html 测试环境:CentOS 5.5 1.添加用户,首先用adduser命令添加一个普通用户,命令如下: #ad ...

  6. Oracle数据库--解决单张表中数据量巨大(大数据、数据量上百万级别，后查询，更新数据等耗时剧增)

    版权声明:本文为博主原创文章,未经博主允许不得转载. https://blog.csdn.net/QQ578473688/article/details/54561397 思路1:采用备份表 备份表中 ...

  7. CSDN积分规则具体解释--【叶子】

    前记:在CSDN的社区支持板块,常常看到有人提问,为什么有积分却不能下载,此类问题层出不穷,而论坛的各种积分制度说明又非常分散,不便于寻找,为了方便新注冊用户高速了解论坛的积分规则,也为了降低社区支持 ...

  8. PHP 7.0 5.6 下安裝 phpLDAPadmin 发生错误的修正方法

    在稍具規模的網路環境中, 網管時常選用 LDAP 來進行帳號的統整管理, 一方面提供管理便利度, 另一方面使用者也不必因為不同系統而記憶不同帳號, phpLDAPadmin 是一套常見的 LDAP 管 ...

  9. 关于mysql的wait_timeout参数 设置不生效的问题

    关于wait_timeout 有一次去online set wait_timeout 的时候发现改了不生效,如下: mysql> show variables like 'wait_timeou ...

  10. Android事件分发机制源码分析

    Android事件分发机制源码分析 Android事件分发机制源码分析 Part1事件来源以及传递顺序 Activity分发事件源码 PhoneWindow分发事件源码 小结 Part2ViewGro ...