在开始之前先说一点，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. python mac环境搭建

    安装 virtualenv $ sudo pip install virtualenv 然后建立一个测试目录: $ mkdir testvirtual $ cd testvirtual 就可以成功创建 ...

  2. Lucene——索引的创建、删除、修改

    package cn.tz.lucene; import java.io.File; import java.util.ArrayList; import java.util.List; import ...

  3. 实现多线程的另一种方式-Callable

    package com.mldn.thread; import java.util.concurrent.ExecutionException; import java.util.concurrent ...

  4. Tasker to answer incoming call by pressing power button

    nowadays, the smartphone is getting bigger in size, eg. samsung galaxy note and note 2, sorta big in ...

  5. Clever Little Box 电缆组件 USB A 插座 至 USB B 插头

    http://china.rs-online.com/web/p/usb-cable-assemblies/7244156/ 产品详细信息 USB3.0适配器 superspeed USB将提供10x ...

  6. 快速重启 Quick Boot plus

    Quick Boot(快速启动)可方便快速地重启/关闭您的设备,或将您的设备重启到恢复/引导模式,增强版还实现了热启动和Tasker/Locale插件集成功能.快速重启汉化版 Quick Boot p ...

  7. 轨至轨运算放大器 rail to rail

    http://www.360doc.com/content/10/1102/16/2285160_66006645.shtml Rail to rail: 轨至轨,指器件的输入输出电压范围可以达到电源 ...

  8. what is a process?

    A process is a program in execution. A process is more than the program code, which is sometimes kno ...

  9. oracle之表空间(tablespace)、方案(schema)、段(segment)、区(extent)、块(block)

    数据文件和日志文件是数据库中最关键的文件.它们是数据存储的地方.每一个数据库至少有一个与之相关的数据文件,通常情况下不仅仅一个,有非常多.数据在数据文件里是怎样组织的?要了解这些内容我们首先必须理解什 ...

  10. 四种更新UI的方法

    笔记:   // 使用handler.post(Runnable)更新UI public void updateUI_Fun1() { new Thread() { public void run() ...