概念扫盲

DOM

DOM是 Document Object Model（文档对象模型）的缩写，是W3C（万维网联盟）的标准。
DOM 定义了访问 HTML 和 XML 文档的标准：
“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
W3C DOM 标准被分为 3 个不同的部分：

  • 核心 DOM - 针对任何结构化文档的标准模型
  • XML DOM - 针对 XML 文档的标准模型
  • HTML DOM - 针对 HTML 文档的标准模型

这篇文章主要讲HTML DOM

HTML DOM

HTML DOM 是：

  • HTML 的标准对象模型
  • HTML 的标准编程接口
  • W3C 标准

HTML DOM 定义了所有 HTML 元素的对象和属性，以及访问它们的方法。
换言之，HTML DOM 是关于如何获取、修改、添加或删除 HTML 元素的标准。

JavaScript DOM

前面讲过，DOM定义了访问HTML和XML文档的标准：“W3C 文档对象模型 （DOM） 是中立于平台和语言的接口，它允许程序和脚本动态地访问和更新文档的内容、结构和样式。”
注意粗体字部分，DOM是中立于平台和语言的接口，也就是任意平台、任意语言中，都有相应的DOM接口。但在我们这篇文章中，我们主要的还是采用浏览器平台、JavaScript语言中的DOM接口来做阐述，这也是目前使用最频繁的接口了。
只是想提醒大家，不要以偏概全，认为只有JavaScript中的DOM才是真正的DOM。下文中，我们说的DOM接口也全部是JavaScript DOM和HTML DOM中的内容。
学习这部分需要大家对HTML、CSS、JS有基础的认识和了解。
 

DOM树

简单的DOM树

我们之前说过一句话，也希望大家记住这句话：“有嵌套的地方就有父子关系。”
HTML中允许嵌套，并且允许多重嵌套，多种父子关系就形成了一棵树，我们叫它DOM树。
我们先来看一份简单的HTML代码：
<html>

	<head>

		<title>文档标题</title>

	</head>

	<body>

		<a href="#">我的链接</a>

        <h1>我的标题</h1>

	</body>

</html>
它的DOM树是这样的：

节点关系

基本的节点关系有父子、同胞，衍生出来的有祖先—后代。父节点我们用parent表示，子节点用child，同胞用sibling。
  • 在节点树中，顶端节点被称为根（root）
  • 每个节点都有父节点、除了根（它没有父节点）
  • 一个节点可拥有任意数量的子
  • 同胞是拥有相同父节点的节点

我们将刚才的DOM树截取掉一部分，

这样就比较清楚了。

节点类型

文档的不同组成部分有不同的节点类型，共有12种，具体如下：
节点类型值 节点类型 描述 子节点
1 Element 代表元素 Element, Text, Comment, ProcessingInstruction, CDATASection, EntityReference
2 Attr 代表属性 Text, EntityReference
3 Text 代表元素或属性中的文本内容。 None
4 CDATASection 代表文档中的 CDATA 部分（不会由解析器解析的文本）。 None
5 EntityReference 代表实体引用。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
6 Entity 代表实体。 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
7 ProcessingInstruction 代表处理指令。 None
8 Comment 代表注释。 None
9 Document 代表整个文档（DOM 树的根节点）。 Element, ProcessingInstruction, Comment, DocumentType
10 DocumentType 向为文档定义的实体提供接口 None
11 DocumentFragment 代表轻量级的 Document 对象，能够容纳文档的某个部分 Element, ProcessingInstruction, Comment, Text, CDATASection, EntityReference
12 Notation 代表 DTD 中声明的符号。 None
其中，常用的是类型有Element，Attr，Text，Document等几种。节点类型可以通过以下语句来获得：
node.nodeType

获取到的将是对应的节点类型值，注意这个值以字符串形式返回。

不同的节点类型的nodeName 和nodeValue返回值如下：
节点类型 nodeName 返回 nodeValue 返回
1 Element 元素名 null
2 Attr 属性名称 属性值
3 Text #text 节点的内容
4 CDATASection #cdata-section 节点的内容
5 EntityReference 实体引用名称 null
6 Entity 实体名称 null
7 ProcessingInstruction target 节点的内容
8 Comment #comment 注释文本
9 Document #document null
10 DocumentType 文档类型名称 null
11 DocumentFragment #document 片段 null
12 Notation 符号名称 null

JavaScript DOM接口

获取DOM node

传统方法

获取DOM节点的传统方法有三种，分别是getElementById, getElementsByTagName, getElementsByName。
getElementById属于document对象的方法，传入参数为节点的id值，返回该id对应的节点。由于id是独一无二的，所以返回值只有一个节点。如果文档中有多个同名id，不同浏览器处理结果可能不同，例如谷歌浏览器是以最后一个为准。例如：
<html>

    <head>

        <title>文档标题</title>

    </head>

    <body>

        <form action="get" id="target-form">

            <input type="text" name="target-input" value="123" />      

        </form>

    </body>

    <script type="text/javascript">

        var a = document.getElementById("target-form"); // form对应的节点

    </script>

</html>

切记不要丢了前面的document，否则会报错。

getElementsByName和getElementById很相似，都是document对象里的方法，不同的是传入的参数为节点的name。由于文档中允许存在同个name值的节点，例如<input type="radio" />，又例如多个表单中的同名表单项。所以返回对象是一个nodelist，你也可以把它当成一个数组。
我们还是用上面的例子，把js部分修改一下：
var a = document.getElementsByName("target-input")[0]; // input对应的节点

getElementsByTagName和前面两个分别有相同之处，又有不同之处。它不仅仅是document对象的方法，还是所有元素节点的方法。它传入的参数是标签名，返回的是nodelist，因为明显同个文档中可以有多个相同标签。

<html>

    <head>

        <title>文档标题</title>

    </head>

    <body>

        <form action="get" id="target-form">

            <input type="text" name="target-input" value="123" />

        </form>

    </body>

    <script type="text/javascript">

        var a = document.getElementById("target-form").getElementsByTagName("input")[0]; // input对应的节点

    </script>

</html>

可能有些人会问，我还看到了getElementsByClassName方法啊。其实，这方法只是部分浏览器产商定下的方法，很实用，但并非W3C标准里的方法，至少IE8及以下是不能用的。

新的方法

HTML5中，新支持了两个节点获取方法，那就是querySelector和querySelectorAll方法，两者都是document或元素节点的方法。它们的参数一样，都是字符串，且以CSS选择器的形式体现，不同的是，querySelector返回首次匹配的节点，而querySelectorAll返回nodeList，查找原则为深度优先和先序遍历。
<html>

    <head>

        <title>文档标题</title>

    </head>

    <body>

        <form action="get" id="target-form">

            <input type="text" name="target-input" value="123" />

            <input type="text" name="target-input2" value="123" />

        </form>

    </body>

    <script type="text/javascript">

        var a = document.querySelector("#target-form").querySelectorAll("input"); // 包含两个input的数组

    </script>

</html>

获取及操纵属性值

我们终究是要利用这些接口来做点什么的，例如，我们想获取上文那例子里面输入框的值。我们可以这么写：
var a = document.getElementById("target-form").getElementsByTagName("input")[0].value;

如果我们要设定输入框的值，也类似：

 document.getElementById("target-form").getElementsByTagName("input")[0].value = “12345”;

但这样好像没什么用，我们换种用法，更使用一点。我们经常看到有一种效果，点击按钮，某个东西消失了，再点击，又出现了。我们来模拟一下：

<!DOCTYPE html>

<html>

    <head>

        <meta charset="utf-8">

        <title>文档标题</title>

    </head>

    <body>

        <p>点击按钮此句消失</p>

        <button id="btn">消失</button>

    </body>

    <script type="text/javascript">

        var btn = document.getElementById("btn"),

            p = document.getElementsByTagName("p")[0];

        btn.onclick = function() {

            if(p.style.display == "none") {

                p.style.display = "";

                this.innerText = "消失";

            } else {

                p.style.display = "none";

                this.innerText = "显示";

            }

        }

    </script>

</html>

在这里，我们操作的是元素节点p里面的属性节点style，修改其display属性，从而达到修改CSS的目的。

DOM 事件

在上例中我们看到了一个点击事件，这就是事件中的一种。关于DOM事件我们在另一篇文章中有详细讲到，详情请点击观看JavaScript事件。

JavaScript快速入门（六）——DOM的更多相关文章

  1. JavaScript快速入门（四）——JavaScript函数

    函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)——JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...

  2. JavaScript快速入门-DOM对象

    一.概述 1.什么是 DOM? DOM 是 W3C(万维网联盟)的标准.DOM 定义了访问 HTML 和 XML 文档的标准: "W3C 文档对象模型(DOM)是中立于平台和语言的接口,它允 ...

  3. Javascript快速入门(上篇)

    Javascript的熟练之路,小弟来了. JavaScript简介:JavaScript一种直译式脚本语言,是一种动态类型.弱类型.基于原型的语言,内置支持类型.它的解释器被称为JavaScript ...

  4. JavaScript快速入门-BOM对象

    一.什么是BOM      概念 BOM(Browser Object Model)即浏览器对象模型.BOM提供了独立于内容,而与浏览器窗口进行交互的对象:      核心 由于BOM主要用于管理窗口 ...

  5. javascript快速入门21--DOM总结

    跨浏览器开发 市场上的浏览器种类多的不计其数,它们的解释引擎各不相同,期待所有浏览器都一致的支持JavaScript,CSS,DOM,那要等到不知什么时候,然而开发者不能干等着那天.历史上已经有不少方 ...

  6. Web开发初探之JavaScript 快速入门

    本文改编和学习自 A JavaScript Primer For Meteor 和 MDN Web教程 前文 Web开发初探 概述 本文以介绍 JavaScript 为主,初学者掌握本文的内容后,将能 ...

  7. javascript快速入门

    这个在w3school在线文档讲解的很详细,还能在线练习. 所以我只写一些入门的东西和最常用的总结以及注意事项: JavaScript 是脚本语言 一般被人们称为JS,Jquery就是对js语言的封装 ...

  8. Javascript快速入门(下篇)

    Javascript, cheer up. Ajax:其通过在Web页面与服务器之间建立一个额外的处理层,这个处理层就被称为Ajax引擎,它解释来自用户的请求,在后台以异步的方式处理服务器通信,其结构 ...

  9. JavaScript快速入门（一）——JavaScript概览

    JavaScript是什么? JavaScript的诞生 在1995年前后,当时世界上的主流带宽为28.8Kbps,现在世界平均下载带宽为21.9Mbps(数据来源于http://www.netind ...

随机推荐

  1. ORACLE存储过程笔记2

    ORACLE存储过程笔记2 运算符和表达式     关系运算 =等于<>,!=不等于<小于>大于<=小于等于>=大于等于       一般运算   +加-减*乘/除 ...

  2. CPU保护模式深入探秘

    原文链接为:http://www.chinaunix.net/old_jh/23/483510.html 保护方式的体系结构 主要问题:          保护方式的寄存器模型          保护 ...

  3. 限制QLineEdit的数值输入范围（一共4种限制器：QDoubleValidator, QIntValidator, QRegExpValidator, 和QRegularExpressionValidator）

    在使用QLineEdit输入数值时,经常遇到限制其范围的需要,比如角太阳高度角范围为[-90,90],经度值范围[-180,180],方位角范围[0,360].Qt提供了QIntValidator和Q ...

  4. [转]PostgreSQL 中文资料汇总

    原文链接:http://francs3.blog.163.com/blog/static/405767272014017341219/ --1 中文社区网站  PostgreSQL 中文社区官网: h ...

  5. [转]apache下htaccess不起作用,linux,windows详解

    可能出现下面这三种的错误可能性: 第一种:启用 rewrite 和 .htaccess 设置 rewrite设置:找到apache的配置文件httpd.conf文件,找到:#LoadModule re ...

  6. JVM-- 先行发生原则

    本文中需要的基础知识:指令重排 线程中两个非常重要的问题就是:原子性与可见性. 而下面的先行发生原则就是用来解决可见性问题的. 先行发生原则--是判断是否存在数据竞争.线程是否安全的主要依据. 先行发 ...

  7. 扩展 Windows Azure 运营能力 – 巴西

    今天早些时候,在巴西圣保罗的一个活动上,我宣布了我们将在巴西设立一个 Windows Azure 区域数据中心的计划.我们希望该区域中心可以在 2014 年年初上线,并且我们很高兴地宣布将在未来 4 ...

  8. c++ 静态成员遇到的坑总结

    新标签页http://74.55.154.136/ c++ 静态成员遇到的坑总结 - linuxfloat - 博客园 c++ 静态成员遇到的坑总结   1.对于类静态变量的初始化,用下面方法. // ...

  9. 第14周 项目三-OOP版电子词典

    做一个简单的电子词典.在文件dictionary.txt中,保存的是英汉对比的一个词典,词汇量近8000个,英文.中文释义与词性间用'\t'隔开. (1)编程序,由用户输入英文词.显示词性和中文释义. ...

  10. 向架构师进军---&gt;系统架构设计基础知识

    假设你对项目管理.系统架构有兴趣,请加微信订阅号“softjg”,增加这个PM.架构师的大家庭 在解说系统架构设计之前,有必要补充一下架构相关的概念,因此本博文主要讲述架构.架构师和架构设计等相关的概 ...