文档对象模型Document Object Model

DOM（Document Object Model，文档对象模型）是一个通过和JavaScript进行内容交互的API。

Javascript和DOM一般常常作为一个总体，由于Javascript通常都是用来进行DOM操作和交互的。

主要内容来自：http://net.tutsplus.com/tutorials/javascript-ajax/javascript-and-the-dom-series-lesson-1/

关于DOM。有些知识须要注意：

1. window对象作为全局对象，也就是说你能够通过window来訪问全局对象。

  1. 属性在对象以下以变量的形式存放，在页面上创建的全部全局对象都会变成window对象的属性。
  2. 方法在对象以下以函数的形式存放。由于左右的函数都存放在window对象以下。所以他们也能够称为方法。

2. DOM为web文档创建带有层级的结果。这些层级是通过node节点组成，这里有几种DOM node类型，最重要的是Element, Text, Document。

  1. Element节点在页面里展示的是一个元素，所以假设你有段落元素(<p>)。你能够通过这个DOM节点来訪问。
  2. Text节点在页面里展示的全部文本相关的元素，所以假设你的段落有文本在里面的话，你能够直接通过DOM的Text节点来訪问这个文本
  3. Document节点代表是整个文档。它是DOM的根节点。

3. 每一个引擎对DOM标准的实现有一些轻微的不同。比如。Firefox浏览器使用的Gecko引擎有着非常好的实现（虽然没有全然遵守W3C规范），但IE浏览器使用的Trident引擎的实现却不完整并且还有bug，给开发人言带来了非常多问题。

假设你正在使用Firefox。我推荐你马上下载Firebug插件，对于你了解DOM结构很实用。

Web上的JavaScript

Script元素

当你在站点页面上使用JavaScript的时候。须要使用SCRIPT元素：

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

    <html xmlns="http://www.w3.org/1999/xhtml" lang="en">

        <head>

                <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

                <title>JavaScript!</title>

        </head>

        <body>

            <script type="text/javascript">

            // <![CDATA[  

            // ]]>

            </script>

        </body>

    </html>

上述代码。严格来说SCRIPT的TYPE属性应该设置为application/javascript，可是因为IE不支持这个，所以平时我们不得不写成text/javascript或者直接去掉type。另外你也能够看到在SCRIPT元素里的凝视行// <![CDATA[ 是用来告诉支持XHTML的浏览器。这里面的代码是字符数据而不是XHTML标签。比方假设你在里面的数据使用了<或>，浏览器就不会再解析成XHTML标签了。

Defer属性

不论什么在SCRIPT元素里声明的代码在页面载入的时候都会执行，唯一一个例外是给SCRIPT元素加上一个defer属性。defer属性告诉浏览器载入完HTML文档以后再执行JS代码，但这个属性仅仅能在IE下使用。

连接外部脚本

假设你想了解外部脚本，仅仅须要简单地在SCRIPT上使用SRC属性即可了。使用单独的JS文件的优点是能够缓存。并且也不须要操心CDATA方面的问题：

<script type="text/javascript" src="my-script.js"></script>

JavaScript必备

在我们继续DOM之前。我们来复习一下JavaScript的核心必备知识，假设你还不了解。也没关系。我们在这一章节将略微花点时间来回想一下。

JavaScript有几种数据类型：Number, String, Boolean, Object, Undefined and Null。

单行凝视使用双斜杠//，双斜杠后面的全部文字都会被凝视掉，多行注意使用/*和*/括住。

Number

在JavaScript里全部的Number都是浮点型的。当声明一个数字变量的时候，记得不要使用不论什么引號。

// 注：使用var类声明变量

var leftSide = 100;

var topSide = 50;

var areaOfRectangle = leftSide * topSide; // = 5000

String

JavaScript里声明字符串特别简单，和其他语言一样。在JS里使用单引號或双引號都能够。

var firstPart = 'Hello';

var secondPart = 'World!';

var allOfIt = firstPart + ' ' + secondPart; // Hello World!

// +符合是字符连接符。也用于数字相加

Boolean

布尔类型用于条件推断，布尔类型是仅仅有2个值：true和false。不论什么使用逻辑操作符的比較都会返回布尔值。

5 === (3 + 2); // = true

// 你也能够将布尔值赋给一个变量

var veryTired = true;

// 这样使用

if (veryTired) {

    // 运行代码

}

===也是比較操作符，不仅比較数值，还比較类型。

Function

函数是特殊的对象。

// 使用function操作符来声明新函数

function myFunctionName(arg1, arg2) {

    // 函数代码

}

// 你也能够声明匿名函数

function (arg1, arg2) {

    // Function code goes here.

}

// 执行函数非常easy。直接在函数名称后面加上小括号就能够了

// 或者也能够带上參数

myFunctionName(); // 无參

myFunctionName('foo', 'bar'); // 有參数

// 也能够使用自调用  

(function () {

    // 这里自调用函数

})();

Array

数组也是特殊的对象，它包括了一批值（或对象）。訪问这些数据的话须要使用数字索引：

// 2种方式声明数组

// 字面量:

var fruit = ['apple', 'lemon', 'banana'];

// Array构造函数:

var fruit = new Array('apple', 'lemon', 'banana');

fruit[0]; // 訪问第1个项(apple)

fruit[1]; // 訪问第2个项(lemon)

fruit[2]; // 訪问第3个项(banana)

Object

一个对象是一个key-value的集合。和数组相似，唯一的不同是你能够为每一个数据定义一个名称。

// 2种类型定义Object对象

// 字面量（大括号）

var profile = {

    name: 'Bob',

    age: 99,

    job: 'Freelance Hitman'

};

// 使用Object构造函数

var profile = new Object();

profile.name = 'Bob';

profile.age = 99;

profile.job = 'Freelance Hitman';

IF/Else语句

JS里使用最多的语句莫过于条件语句了：

var legalDrinkingAge = 21;

var yourAge = 29;  

if ( yourAge >= legalDrinkingAge ) {

    alert('You can drink.');

} else {

    alert('Sorry, you cannot drink.');

JavaScript操作符

建议你訪问这个页面来查看全部的JS操作符。这里我只给出一些样例：

// 加减乘除

var someMaths = 2 + 3 + 4 - 10 * 100 / 2;  

// 等于

if ( 2 == (5 - 3 ) { /* 代码 */ } // == 比較是否相等

// 不等于

if ( 2 != (5 - 3 ) { /* 代码 */ }   

// 严格等于（推荐）

2 === 2 // 取代 2 == 2

2 !== 3 // 取代 2 != 3  

// 赋值:

var numberOfFruit = 9;

numberOfFruit -= 2; // 等价于 "numberOfFruit = numberOfFruit - 2"

numberOfFruit += 2; // 等价于 "numberOfFruit = numberOfFruit + 2"

Loop循环

Loop循环在是遍历数组或者对象的全部成员的时候很方便，JavaScript里使用最多的是FOR和WHILE语句。

var envatoTutSites = ['NETTUTS', 'PSDTUTS', 'AUDIOTUTS', 'AETUTS', 'VECTORTUTS'];

// WHILE循环

var counter = 0;

var lengthOfArray = envatoTutSites.length;

while (counter < lengthOfArray) {

    alert(envatoTutSites[counter]);

    counter++; // 等价于counter += 1;

}

// FOR循环

// i仅仅是用于迭代，能够随意取名

for (var i = 0, length = envatoTutSites.length; i < length; i++) {

    alert(envatoTutSites[i]);

}

DOM正文

訪问DOM节点

我们来个样例，一个HTML里包括一段文本和一个无序的列表。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en">

    <head>

            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

            <title>JavaScript!</title>

    </head>

    <body>  

        <p id="intro">My first paragraph...</p>  

        <ul>

            <li>List item 1</li>

            <li>List item 1</li>

            <li>List item 1</li>

            <li>List item 1</li>

            <li>List item 1</li>

        </ul>  

        <script type="text/javascript">

        // <![CDATA[  

        // ]]>

</script>  

    </body>

</html>

上面样例里，我们使用getElementById DOM方法来訪问p段落，在SCRIPT里加入例如以下代码：

var introParagraph = document.getElementById('intro');

// 如今有了该DOM节点，这个DOM节点展示的是该信息段落

变量introParagraph如今已经引用到该DOM节点上了。我们能够对该节点做非常多事情，比方查询内容和属性，或者其他不论什么操作，甚至能够删除它。克隆它，或者将它移到到DOM树的其他节点上。

文档上的不论什么内容，我们都能够使用JavaScript和DOM API来訪问，所以类似地，我们也能够訪问上面的无序列表，唯一的问题是该元素没有ID属性，假设ID的话就能够使用同样的方式，或者使用例如以下getElementsByTagName方式：

var allUnorderedLists = document.getElementsByTagName('ul');

// 'getElementsByTagName'返回的是一个节点集合

// - 和数组有点相似

getElementsByTagName

getElementsByTagName方法返回的是一个节点集合，和数组类似也有length属性。重要的一个特性是他是live的——假设你在该元素里加入一个新的li元素，这个集合就会自己主动更新，介于他和数组类型。所以能够和訪问数组一样的方法来訪问，所以从0開始：

// 訪问无序列表: [0]索引

var unorderedList = document.getElementsByTagName('ul')[0];

// 获取全部的li集合:

var allListItems = unorderedList.getElementsByTagName('li');

// 循环遍历

for (var i = 0, length = allListItems.length; i < length; i++) {

    // 弹出该节点的text内容

    alert(allListItems[i].firstChild.data);

}

下面图例更清晰地展示了DOM获取的知识：

DOM穿梭

“穿梭”这个词主要是用来描写叙述通过DOM查找节点。DOM API提供了大量的节点属性让我们来往上或者往下查询节点。

全部的节点都有这些属性，都是能够用于訪问相关的node节点：

  1. Node.childNodes: 訪问一个单元素下全部的直接子节点元素，能够是一个可循环的类数组对象。该节点集合能够保护不同的类型的子节点（比方text节点或其它元素节点）。
  2. Node.firstChild: 与‘childNodes’数组的第一个项(‘Element.childNodes[0]‘)是相同的效果。不过快捷方式。
  3. Node.lastChild: 与‘childNodes’数组的最后一个项(‘Element.childNodes[Element.childNodes.length-1]‘)是相同的效果，不过快捷方式。shortcut.
  4. Node.parentNode: 訪问当前节点的父节点，父节点只能有一个，祖节点能够用‘Node.parentNode.parentNode’的形式来訪问。
  5. Node.nextSibling: 訪问DOM树上与当前节点同级别的下一个节点。
  6. Node.previousSibling: 訪问DOM树上与当前节点同级别的上一个节点。

通过这张图，理解起来就简单多了。但有个很重要的知识点：那就是元素之间不能有空格，假设ul和li之间有空格的话，就会被觉得是内容为空的text node节点，这样ul.childNodes[0]就不是第一个li元素了。对应地，<p>的下一个节点也不是<ul>，由于<p>和<ul>之间有一个空行的节点，一般遇到这样的情况须要遍历全部的子节点然后推断nodeType类型。1是元素，2是属性，3是text节点，具体的type类型能够通过此地址：

    Node.ELEMENT_NODE == 1

    Node.ATTRIBUTE_NODE == 2

    Node.TEXT_NODE == 3

    Node.CDATA_SECTION_NODE == 4

    Node.ENTITY_REFERENCE_NODE == 5

    Node.ENTITY_NODE == 6

    Node.PROCESSING_INSTRUCTION_NODE == 7

    Node.COMMENT_NODE == 8

    Node.DOCUMENT_NODE == 9

    Node.DOCUMENT_TYPE_NODE == 10

    Node.DOCUMENT_FRAGMENT_NODE == 11

    Node.NOTATION_NODE == 12

总结

原生的DOM方法和属性足够我们日常的应用了，本章节我们仅仅列举了一些样例。下一章节我们列举很多其它的样例。还会包含浏览器事件模型。

深入理解JavaScript系列（23）：JavaScript与DOM（上）——也适用于新手的更多相关文章

  1. javaScript系列 [06]-javaScript和this

    在javaScript系列 [01]-javaScript函数基础这篇文章中我已经简单介绍了JavaScript语言在函数使用中this的指向问题,虽然篇幅不长,但其实最重要的部分已经讲清楚了,这篇文 ...

  2. javaScript系列 [03]-javaScript原型对象

    [03]-javaScript原型对象 引用: javaScript是一门基于原型的语言,它允许对象通过原型链引用另一个对象来构建对象中的复杂性,JavaScript使用原型链这种机制来实现动态代理. ...

  3. （一）我的Javascript系列：Javascript的面向对象旅程（上）

    今宵酒醒何处,杨柳岸,晓风残月 导引 我的JavaScript系列文章是我自己对JavaScript语言的感悟所撰写的系列文章.现在还没有写完.目前一共出了下面的系列: (三)我的JavaScript ...

  4. javaScript系列 [05]-javaScript和JSON

    本文输出和JSON有关的以下内容❐ JSON和javaScript❐ JSON的语法介绍❐ JSON的数据类型❐ JSON和XMLHTTPRequest❐ JSON的序列化和反序列化处理 1.1 JS ...

  5. （五）我的JavaScript系列：JavaScript的糟粕

    泪眼问花花不语,乱红飞过秋千去. JavaScript的糟粕 JavaScript语言是一门集精华与糟粕于一体的语言.在JavaScript: the good parts中,便集中讨论了关于精华与糟 ...

  6. javascript系列-Class1.JavaScript基础

    欢迎加入前端交流群来py:749539640 转载请标明出处!   JavaScript概述        一个页面分成三个部分,结构,样式,行为.               HTML代表了页面的结 ...

  7. 深入理解JavaScript系列：JavaScript的构成

    此篇文章不是干货类型,也算不上概念阐述,就是简单的进行一个思路上的整理. 要了解一样东西或者完成一件事情,首要的就是先要搞清楚他是什么.作为一个前端开发人员,JavaScript应该算作是最核心之一的 ...

  8. javaScript系列 [04]-javaScript的原型链

    [04]-javaScript的原型链 本文旨在花很少的篇幅讲清楚JavaScript语言中的原型链结构,很多朋友认为JavaScript中的原型链复杂难懂,其实不然,它们就像树上的一串猴子. 1.1 ...

  9. javaScript系列 [02]-javaScript对象探析

    [02]-javaScript对象探析 题记:多年前,以非常偶然的方式关注了微信公众号“面向对象”,本以为这个公众号主要以分享面向对象编程的干货为主,不料其乃实实在在的猿圈相亲平台.通过查看公开资料, ...

  10. javaScript系列 [01]-javaScript函数基础

    [01]-javaScript函数基础 1.1 函数的创建和结构 函数的定义:函数是JavaScript的基础模块单元,包含一组语句,用于代码复用.信息隐蔽和组合调用. 函数的创建:在javaScri ...

随机推荐

  1. 洛谷P2045 方格取数加强版(费用流)

    题意 题目链接 Sol 这题能想到费用流就不难做了 从S向(1, 1)连费用为0,流量为K的边 从(n, n)向T连费用为0,流量为K的边 对于每个点我们可以拆点限流,同时为了保证每个点只被经过一次, ...

  2. 在JavaScript文件中用jQuery方法实现日期时间选择功能

    JavaScript Document $(document).ready(function(e) { 在文本框里面显示当前日期 var date = new Date(); var nian = d ...

  3. Android应用程序进程启动过程（前篇）

    在此前我讲过Android系统的启动流程,系统启动后,我们就比较关心应用程序是如何启动的,这一篇我们来一起学习Android7.0 应用程序进程启动过程,需要注意的是“应用程序进程启动过程”,而不是应 ...

  4. 回归JavaScript基础（十）

    主题:创建对象 原型模式 JavaScript中的每个对象都有一个prototype属性(原型属性),这个属性是一个指针,指向一个对象,而这个对象可以由一些属性和方法组成.被指向的对象,可以是多个对象 ...

  5. 十个强大的DevOps基础设施自动化工具，不容错过

    Devops基础设施自动化的工具 有许多工具用于基础设施自动化.使用哪个工具决定于体系结构和基础设施的需求.下面我们列出了一些伟大的工具,用于不同类别配置管理.编制.持续集成.监控等. 1.Chef ...

  6. INCLUDE COMMON FILES IN HTML USING JQUERY

    Simple example for including common files in HTML. JQuery load() function is used for including comm ...

  7. Google搜索引擎

    一.基本搜索 逻辑符 与(空格).或(OR).非(-). ""全匹配搜索 加入双引号表示完全匹配搜索 *通配符 二.高级搜索 intitle:只搜索网页标题(即html的title ...

  8. firefox（火狐）和Chrome（google）浏览器清空缓存操作的方法指引

    摘要说明: 1.系统做升级更新,更新了css和js 2.系统更新有,因为缓存问题,有客户反馈新增功能不能使用 3.所以要清空缓存,提供火狐和谷歌浏览器清空缓存的操作指引 4.附:代码层面的清空缓存方案 ...

  9. 微软撤回sharepoint 2013 sp1

    微软撤回sharepoint 2013 sp1, 现在已经不能下载32bits和64bits. 以下是我们发现的问题(未必一定和SP1有关) - Search SSA managed metadata ...

  10. November 13th, 2017 Week 46th Monday

    Don't undermine your worth by comparing yourself with others. 别拿自己和他人比较,这只会降低你原有的价值. Honestly, I don ...