Dom技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。[1]

DOM实际上是以面向对象方式描述的文档模型。DOM定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把DOM认为是页面上数据和结构的一个树形表示，不过页面当然可能并不是以这种树的方式具体实现。

通过 JavaScript，您可以重构整个 HTML 文档。您可以添加、移除、改变或重排页面上的项目。

要改变页面的某个东西，JavaScript 就需要获得对 HTML 文档中所有元素进行访问的入口。这个入口，连同对 HTML 元素进行添加、移动、改变或移除的方法和属性，都是通过文档对象模型来获得的（DOM）。

树木和树枝

HTML是一个类似XML的结构，因为元素形成了一个带有子节点的父节点的结构，就像树的分支一样。有一个根元素（html）中包含的分支head和body，每个都有自己的分支机构。因此，DOM也称为DOM树。

通过选择一个元素并改变某些元素来修改DOM是JavaScript中经常做的。要从JavaScript访问DOM，使用该document对象。它由浏览器提供，并允许页面上的代码与内容进行交互。

我们可以通过各种途径获取HTML元素，例如id、标签名、类名、css选择器等，

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style type="text/css">

            /* css 选择器示例 */

            .important {

            }

            #myHeader {

            }

        </style>

    </head>

    <body>

        <!-- id 示例 -->

        <h1 id="myHeader">Hello World!</h1> 

        <!-- 下面是 3 个 h2 标签 -->

        <h2>HeaderOne</h1>

        <h2>HeaderTwo</h2>

        <h2>HeaderTree</h3>

        <!-- class 示例 -->

        <p class="important">Note that this is an important paragraph.</p>

        <!-- JavaScript 代码 -->

        <script type="text/javascript">

            // 获取DOM元素

            var myHeader = document.getElementById('myHeader'); // 单引号

            var headers = document.getElementsByTagName('h2');

            var importants = document.getElementsByClassName('important'); //返回一个DOM元素组成的Arrays

            var myHeader2 = document.querySelector('#myHeader'); // 只返回一个元素

            var importants2 = document.queryAll(.important);

            // 操作DOM元素

        </script>

    </body>

</html>

然后通过JS代码来操作它们，实现动态网页。

内容来源：http://htmldog.com/guides/javascript/intermediate/thedom/

　　　　　　　　　　　　

JavaScript笔记03——文档对象模型（Document Object Model，简称DOM）：获取HTML元素、操作HTML元素的更多相关文章

  1. DOM （文档对象模型(Document Object Model)

    DOM(文档对象模型(Document Object Model) 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上 ...

  2. DOM （文档对象模型(Document Object Model)）

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.在网页上,组织页面(或文档)的对象被组织在一个树形结构中,用来表示文档中对象 ...

  3. 文本对象模型（Document Object Model）

    本文内容: 1. 概述 2. DOM中的节点类型 3. DOM节点的选取 4. 存取元素属性 5.DOM元素的增删 6.小结 ★ 概述 文本对象模型(DOM)是一个能够让程序和脚本动态访问和更新文档内 ...

  4. （3）选择元素——（2）文档对象模型（The Document Object Model）

    One of the most powerful aspects of jQuery is its ability to make selecting elements in the DOM easy ...

  5. Eloquent JavaScript #11# The Document Object Model

    索引 Notes js与html DOM 在DOM树中移动 在DOM中寻找元素 改变Document 创建节点 html元素属性 布局 style CSS选择器 动画 Exercises Build ...

  6. javascript之DOM(Document Object Model) 文档对象模型

    <html> <head> <meta http-equiv="Content-Type" content="text/html; char ...

  7. JS--dom对象：document object model文档对象模型

    dom对象:document object model文档对象模型 文档:超文本标记文档 html xml 对象:提供了属性和方法 模型:使用属性和方法操作超文本标记性文档 可以使用js里面的DOM提 ...

  8. DOM---文档对象模型(Document Object Model)的基本使用

    一.DOM简介 文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口.它是一种与平台和语言无关的应用程序接口(API),它可以动态 ...

  9. Document Object Model

    什么是DOM W3C制定的书写HTML分析器的标准接口规范 全称 Document Object Model 文档对象模型DOM为HTML文档提供的一个API(接口) 可以操作HTML文档 <! ...

随机推荐

  1. jq 获取select text

    var Reply_type_name=$("#Reply_type").find("option:selected").text();

  2. 第一百八十五节，jQuery，Ajax 表单插件

    jQuery,Ajax 表单插件 学习要点: 1.核心方法 2.option 参数 3.工具方法 传统的表单提交,需要多次跳转页面,极大的消耗资源也缺乏良好的用户体验.而这款 form.js 表单的 ...

  3. 杂项收集，包括-发邮件、二维码生成、文件下载、压缩、导出excel

    本篇就最近工作解决的问题做个代码收集.包括以下几个方面:发邮件.二维码生成.文件下载.压缩.导出excel.有一种可用的解决方法就好,不求全面,不求原理. 1.发邮件: 命名空间:System.Net ...

  4. ios代码实现时间设置NSDate

    本文转载至 http://www.baidu.com/link?url=dcQWiL1FD_She6P4RM2IvEeJas0_gtG3LkRNTV5H87X0AyKCHvwYjBz2hdcB2JVp ...

  5. 使用jenkins进行Android的持续集成

    关于持续集成的定义和意义可以参考它的 百度百科 主要意义有以下几点: 减少风险 减少重复过程 任何时间.任何地点生成可部署的软件 增强项目的可见性 建立团队对开发产品的信心 持续集成的实施 持续集成的 ...

  6. iOS学习笔记（十七）——文件操作（NSFileManager）

    iOS的沙盒机制,应用只能访问自己应用目录下的文件.iOS不像android,没有SD卡概念,不能直接访问图像.视频等内容.iOS应用产生的内容,如图像.文件.缓存内容等都必须存储在自己的沙盒内.默认 ...

  7. 转载：HTML/CSS 速写神器：Emmet

    转载在http://bubkoo.com/2014/01/04/emmet-a-toolkit-for-improving-html-css-workflow/ 在前端开发的过程中,一个最繁琐的工作就 ...

  8. Log4j将不同Package的日志输出到不同的文件

    转自:http://www.crazyant.net/1931.html 随着项目规模的越来越大,会不断的引入新的模块,不同的模块都会打印自己的日志,最后就造成日志根本没法查看,比如我自己的项目中,就 ...

  9. mix-in class selectors

    语言特性 | Less 中文网 http://lesscss.cn/features/#mixins-feature Mixins "mix-in" properties from ...

  10. sqlbulk的问题

    今天在bulk的时候遇到一个很“奇怪”的问题 无论怎样修改传入的值,也会报类型转换的错误.后来 在此文中找到了正解 bbs.csdn.net/topics/390430064 SqlBulkCopy不 ...