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. mysql binlog 混合模式 出现的基于sql的数据不一致,主要是now()这类函数导致

  2. sshuttle基于VPN的透明代理,安全连接

    sshuttle基于VPN的透明代理, 通过 ssh 创建一条从你电脑连接到任何远程服务器的 VPN 连 sudo sshuttle -r username@sshserver 0.0.0.0/0 - ...

  3. 《windows程序设计》学习_4：文本输出，加滚动条

    //总行数 #define NUMLINES ((int) (sizeof sysmetrics / sizeof sysmetrics [0])) struct { int Index ; TCHA ...

  4. 深入Blocks分析

    1.简介 从iOS4开始,苹果引入了这个C语言的扩充功能"Blocks",在一些特定的场景下也是一把利刃.我前面一篇博客中初步介绍了Blocks这个东西,主要是语法的介绍(< ...

  5. poj1547---结构数组

    题意:老师发给每个学生的橡皮泥相同,找出谁抢了谁的橡皮泥 思路:结构数组存储每个学生的橡皮总量,和名字 /* 结构数组存储用户信息--只放名称和体积 while输入循环复用长宽高变量 for循环求所有 ...

  6. [LeetCode][Python]Longest Substring Without Repeating Characters

    # -*- coding: utf8 -*-'''__author__ = 'dabay.wang@gmail.com'https://oj.leetcode.com/problems/longest ...

  7. 关于jquery的each的操作；

    <!doctype html> <html> <head> <meta charset="UTF-8"> <title> ...

  8. 微信获取用户数据后台写法，author2.0认证

    /* 微信授权接口 */ //1.设置路由 router.get('/wechat/userinfo', function(req, res) { var cb = req.query.cb; //设 ...

  9. Android4.0设置界面改动总结（三）

    Android4.0设置界面改动总结大概介绍了一下设置改tab风格,事实上原理非常easy,理解两个基本的函数就可以: ①.invalidateHeaders(),调用此函数将又一次调用onBuild ...

  10. Objective C 链式调用

    起因 某日使用DKChainableAnimationKit的时候发现可以如下写代码: view.animation.rotate(180).anchorTopLeft.thenAfter(1.0). ...