1.简介:DOM是一套对文档的内容进行抽象和概念化的方法。在现实世界里,人们对"世界对象模型"一定不会陌生,当人们用"房子","汽车"等这一类专用名字来描述生活中的事物时,我们百分之百不会理解错,因为人们对这些名字有相同的认识,比如我说"我的车停在了地下车库里",你肯定不会理解成"手机放在了家里"。(这是从客观存在的事物角度去描述DOM).

我们的"世界对象模型"不仅可以描述客观存在的事物,还可以用来描述抽象概念,例如,假设有个人向我问路,而我给出的答案是"右边第二栋房子",这个答案有没有意义,将取决于听到的那个人,是否理解"右边"和"第二栋"的含义,如果他不会数数或者分不清左右,则不管他是否理解这两个词的含义,我说的将不会对他有任何的帮助。在现实世界里,正是应为大家对抽象的世界模型有着基本的共识,人们才能用非常简单的话,表达出非常复杂的含义,具体到这边的例子,你可以相当有把握的断定,其他人对"第二"和"右边"的理解和我完全一样。

而网页也是根据我们的现实世界模型所研发出来的,早期的JavaScript版本向程序员提供了查询和操控Web文档某些实际内容(主要是图像和表单)的手段,因为JavaScript预先定义了"images"和"forms"等术语,我们才能像相面这样在Javascript脚本里引用"文档的第三个图像"或文档名为details的表单.

document.image[2];
document.forms['details'];

2.DOM中的"D"="文档"

如果没有document(文档),DOM也就无从谈起。当创建了一个网页并把它加载到Web浏览器中时,DOM就在幕后悄然而生。他把你编写的网页转换成一个文档对象。

3.DOM中的"O"="对象"

这个在我前面的随笔中已有介绍：http://www.cnblogs.com/GreenLeaves/p/5685524.html

4.DOM中的"M"="模型"

当创建一个网页并把它加载到浏览器中,DOM生成,然后他把你编写的网页转换成一个文档对象(document),而M就是我们所说的"Model"(模型)————>来自于生成的文档对象,但说他是Map也未尝不可.DOM代表着加载到浏览器窗口到当前网页,浏览器提供了网页的Map(或者说模型)，而我们就可以通过JavaScript去控制它；

事实上,DOM把一份文档表示为一棵树,一个家谱树。并使用parent(父)、child(子)、sibling(兄弟)等记号来表明各个成员之间的关系；

家谱树模型非常适合用一份(X)HTML语言编写；

如下图是一份最基本的网页：

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
   <h1>h1</h1>
   <p>i am a p tag</p>
   <ul>
   <li>li_1</li>
   <li>li_2</li>
   <li>li_3</li>
   </ul>
</body>
</html>

这份文档可以用下面的模型图来表示:

根据上面的模型图来看文档从html标签开始,所以根元素是html，不管从那个角度看html代表整个文档。接下来深入一层我们发现有<head>和<body>两个分支,他们是兄弟关系,他又有共同的父元素<html>，但又有各自的子元素，所以他们本身又是其他一些元素的父元素。以此类推,其他元素也是一样。利用这种简单的家谱关系记号,我们可以把各元素之间的关系简明清晰的表达出来。这就是一颗简单的家谱树。

5.但是与使用"家谱树"这个术语相比,把文档称为"节点树"更准确,而且要更专业。

节点这个词是网络术语,他表示网络中的一个连接点。一个网络就是由一些节点构成的集合。在DOM中有许多类型的不同节点。接下来我们先看看其中的三种:元素节点、文本节点、属性节点。

5.1 元素节点

元素节点:html文档里面的html标签，<html></html>本身也是,只是他是根元素。

5.2 文本节点

文本节点:文本节点就是元素节点里面的文本内容,可以说在整个互联网上,内容就是一切.而里面的内容就是文本节点如<P>i am a asp.net developer</P>,<p></p>标签里面的内容i am a asp.net developer就是文本节点；

5.3 属性节点

属性节点: 属性节点是用来对元素做出更具体的描述。例如,几乎所有的元素都有一个title属性，而我们可以利用这个属性对包含在元素里的东西做出准确的描述,还有id,class都是常见的一些属性节点；

Javascript之Dom学习的更多相关文章

  1. JavaScript HTML DOM学习记录

    HTML DOM (文档对象模型) 当网页被加载时,浏览器会创建页面的文档对象模型(Document Object Model). HTML DOM 模型被构造为对象的树. HTML DOM 树 通过 ...

  2. Javascript and DOM学习

    1.输出 document.write.(); 2.alert警告 3.confirm消息对话框:当用户点击"确定"按钮时,返回true,取消时,返回false 4.prompt提 ...

  3. JavaScript DOM学习总结（一）

    DOM 什么是DOM?简单地说DOM是一套对文档内容进行抽象和概念化的方法.   W3C给出的DOM定义是这样的:"一个与系统平台和编程语言无关的接口,程序和脚本以通过这个接口动态的访问和修 ...

  4. Javascript中DOM技术的的简单学习

    第十四课DOM技术概述1:DOM概述 文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法.DOM 将HTML文档呈现为带有元素.属性和文本的树结构(节 ...

  5. JavaScript学习笔记(2)——JavaScript和DOM的关系

    文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展标志语言的标准编程接口.DOM实际上是以面向对象方式描述的文档模型.DOM定义了表示和修改文档所需的 ...

  6. 1.2（JavaScript学习笔记）JavaScript HTML DOM

    一.DOM DOM全称为document object model(文档对象模型). 此处的文档指当前HTML文档,对象指HTML标签. 当网页被加载时,浏览器会创建页面的文档对象模型. 下面结合具体 ...

  7. Python学习-前台开发-JavaScript、Dom和jQuery

    JavaScript JavaScript是一门编程语言,浏览器内置了JavaScript语言的解释器,所以在浏览器上按照JavaScript语言的规则编写相应代码之,浏览器可以解释并做出相应的处理. ...

  8. Javascript提升阶段学习

    JavaScript1:javascript简介 JavaScript是一种脚本语言,能实现网页内容的交互显示,当用户在客户端显示该网页时,浏览器就会执行JavaScript程序,用户通过交互的操作来 ...

  9. 前端之JavaScript第一天学习(1)-JavaScript 简介

    javaScript 是世界上最流行的编程语言. 这门语言可用于 HTML 和 web,更可广泛用于服务器.PC.笔记本电脑.平板电脑和智能手机等设备. JavaScript 是脚本语言 JavaSc ...

随机推荐

  1. FLAG_ACTIVITY_NEW_TASK和SingleInstance的设计思路（多task的应用）

    这部分的想法都是基于以下两点: 1.Activity可能被复用,可能是复用Activity的功能,还可能是复用Activity的状态: 2.Task的作用:target,同一个task中的Activi ...

  2. 主计划MPS禁止改写项目编号（PROJECT）

    应用 Oracle   Manufacturing Planning 层 Level Function 函数名 Funcgtion Name MRPFSDMS-253 表单名 Form Name MR ...

  3. 一个大小为N的数组，里面是N个整数，怎样去除重复的数

    题目:一个大小为N的数组,里面是N个整数,怎样去除重复的数字: 要求时间复杂度为O(n),空间复杂度为O(1). 需要除掉重复的整数的数组,注意这里我没有处理负数情况,其实负数情况只要先用0快排分一下 ...

  4. [Leetcode][Python]31: Next Permutation

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com' 31: Next Permutationhttps://oj.leetcode ...

  5. 数学题(找规律)-hdu-4371-Minimum palindrome

    题目链接: http://acm.hdu.edu.cn/showproblem.php?pid=4731 题目大意: 给一个n表示有n种字母(全部小写),给一个m,求一个由不超过n种字母组成的m个小写 ...

  6. 赵雅智_BroadcastReceiver

    BroadcastReceiver  用于接收程序(包含用户开放的程序和系统内建程序)所发出的Broadcast intent 耗电量 开机启动 窃取别人短信 窃取别人电话 开发: 创建须要启动的Br ...

  7. Zookeeper 编程

    ZooKeeper编程(一) 杂记 ZooKeeper的用途:distributed coordination;maintaining configuration information, namin ...

  8. 使用window.postMessage实现跨域通信

    JavaScript由于同源策略的限制,跨域通信一直是棘手的问题.当然解决方案也有很多: document.domain+iframe的设置,应用于主域相同而子域不同: 利用iframe和locati ...

  9. Jar包下载地址

    Download Apache log4j 1.2.17下载: http://logging.apache.org/log4j/1.2/download.html jsoup http://jsoup ...

  10. Unity StrangeIoc框架 （一）

    最近想项目中需要使用这个架构  因此 上网看了很多资料摸索   但是对于初学者来说大多数的资料不是那么容易理解 而且文档也是英文的阅读起来有点吃力  所以记录一下自己阅读的过程  方便以后翻阅和跟我一 ...