在开始之前先说一点，DOM是非常容易理解的，但是大家说的太官方，让人很是难于理解，我们就用非常简单的语言翻译一遍。加深对DOM的理解，从而对它有一个全面的认识。
什么是DOM
DOM的全称是DocumentObjectModel，即文档对象模型，它允许脚本控制Web页面、窗口和文档。
如果没有DOM，JavaScript将是另外一种脚本语言；而有了DOM，它将成为制作动态页面的强有力工具。DOM不是JavaScript语言的一部分，而是内置在浏览器中的一个应用程序接口。当然，我们可以简单的理解为一种用于HTML和XML文档的编程接口。它给文档提供了一种结构化的表示方法，可以改变文档的内容和呈现方式。
DOM（文档对象模型）是一组用来描述脚本怎样与结构化文档进行交互和访问的web标准。他的功能是把浏览器支持的文档（包括HTMLXMLXHTML）当作一个对象来解析。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>
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是独立于语言的标准，这意味着任何支持DOM的编程语言都可以用来操纵文档。 DOM的主要特点在于它将文档视为一个节点树，每个HTML元素或XML标签都对应树中的一个节点。这个树状结构以DOM树的形式表现，其中树的根...
4. **Documents、Declarations和Namespaces**：讲解了如何处理XML文档中的声明和命名空间问题。 5. **生成X-DOM**：展示了如何使用LINQ查询来生成新的XML文档。 通过以上几个方面的详细介绍，我们可以看出LINQ不仅...
《JavaScript+DOM编程艺术》是一本深受欢迎的IT图书，主要针对JavaScript和DOM（文档对象模型）的编程技术进行深入浅出的讲解。作者通过简洁明快的写作风格，使得复杂的Web前端开发概念变得通俗易懂，适合初学者及有...
这个“Jquery学习-实例 通俗易懂”的资源显然是为了帮助初学者快速掌握jQuery的核心概念和实用技巧。接下来，我们将深入探讨jQuery的相关知识点。 一、jQuery选择器 jQuery的选择器是其强大功能的基础，它使得选取...
在“wufeihua.xml.rar”这个压缩包中，包含了一个名为“wufeihua.xml.pdf”的文件，这很可能是一个关于XML的详细讲解资料，以简单易懂的方式介绍了XML的基本概念和用法。 XML的“eXtensible”意味着它可以被扩展，...
在“XML课件”中，可能会讲解到XML的命名规则：元素和属性的名字必须遵循一定的命名规范，例如不能以数字开头，且不能包含空格和某些特殊字符。同时，XML要求文档的语法是正确的，即所有打开的标签必须有相应的关闭...
的方式讲解了jQuery 的核心组件 包括jQuery 的选择符 事件 动画 DOM 操作 Ajax 支持等 第7 章 ， 、 、 、 、 。 和第8 章介绍了jQuery UI jQuery Mobile 及利用jQuery 强大的扩展能力开发自定义插件 随后的几章...
本书前6章以通俗易懂的方式讲解了jQuery的核心组件，包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加...
本书前6章以通俗易懂的方式讲解了jQuery的核心组件，包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加...
vue.js中文社区文档上的说明已经就比较通俗易懂了，其实我们可以这么理解，ref和$refs其实就是用来获取/操作DOM元素的；类似于jquey中的$(“.xxx”)； 那么我们如何使用ref和$refs呢？ ref可以直接加在HTML标签上，...
的方式讲解了jQuery 的核心组件，包括jQuery 的选择符、事件、动画、DOM 操作、Ajax 支持等。第7 章 和第8 章介绍了jQuery UI、jQuery Mobile 及利用jQuery 强大的扩展能力开发自定义插件。随后的几章更 加深入地...
本书前6章以通俗易懂的方式讲解了jQuery的核心组件，包括jQuery的选择符、事件、动画、DOM操作、Ajax支持等。第7章和第8章介绍了jQuery UI、jQuery Mobile及利用jQuery强大的扩展能力开发自定义插件。随后的几章更加...
5. **事件与DOM操作**：在Web开发中，JavaScript常用于处理用户交互，书中可能详细讲解了事件模型和DOM（文档对象模型）的操作，如事件监听、元素选择与修改等。 6. **异步编程**：JavaScript的非阻塞特性使得异步...
在AJAX的实现过程中，书里讲解了如何使用DOM（Document Object Model）来操作网页元素，这是AJAX更新页面内容的关键。DOM是一个结构化的表示HTML或XML文档的树形模型，通过DOM，JavaScript可以动态地修改网页内容。...
这本书以通俗易懂的方式讲解了jQuery的核心概念和技术，让读者能够从零开始轻松上手。 在jQuery的学习过程中，首先需要理解的是jQuery的选择器，这是jQuery的基础。通过选择器，我们可以精准地定位到页面中的DOM...
以通俗易懂的方式全面讲解JavaScript技术，以知识讲解＋实战案例的方式帮您快速入门！ 课程内容包括： 1.JavaScript简介 2.JavaScript基本用法 3.变量和数据类型 4.运算符 5.数据类型转换 6.选择结构、循环...
本课程从零开始，以通俗易懂的方式讲解JavaScript技术，手把手教你掌握每一个知识点。 课程内容包括： 1.JavaScript简介 2.JavaScript引用方式 3.JavaScript核心语法（变量、数据类型、运算符、选择结构、循环...