Javascript之Dom学习

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都是常见的一些属性节点;

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏逍遥剑客的游戏开发

UE4中程序驱动的LookAt动画

43680
来自专栏恰童鞋骚年

使用Unity3D的设计思想实现一个简单的C#赛车游戏场景

最近看了看一个C#游戏开发的公开课,在该公开课中使用面向对象思想与Unity3D游戏开发思想结合的方式,对一个简单的赛车游戏场景进行了实现。原本在C#中很方便地...

14830
来自专栏数据小魔方

R语言可视化——图表排版之一页多图

昨天跟大家分享了关于图表嵌套的函数用法,今天跟大家分享在多图情况下如何正确的进行图表的版面布局。 这里要分享的图表版面设计其实就是指,在做了很多图的情况下,如何...

46130
来自专栏葡萄城控件技术团队

WPF/Silverlight Layout 系统概述——Measure

前言 在WPF/Silverlight当中,如果已经存在的Element无法满足你特殊的需求,你可能想自定义Element,那么就有可能会面临重写Measure...

20380
来自专栏郭霖

Android属性动画完全解析(下),Interpolator和ViewPropertyAnimator的用法

大家好,欢迎继续回到Android属性动画完全解析。在上一篇文章当中我们学习了属性动画的一些进阶技巧,包括ValueAnimator和ObjectAnimato...

31770
来自专栏一“技”之长

Cocos2d-x-v3动作体系 原

        cocos2d-x-v3版本v2的版本有的很大的改动,最直观的是在一些函数的改动和类名的改动上,首先以CC开头的类,都不再使用CC。在我个人的理...

8110
来自专栏菩提树下的杨过

Flash/Flex学习笔记(24):粒子效果

粒子爆炸: 仍然要用到以前的小球类,不过稍加改造 package { import flash.display.Sprite; //小球 类 publi...

20250
来自专栏Android机动车

使用三阶贝塞尔曲线实现直播中点赞效果

CSDN: http://blog.csdn.net/jiashuai94

21030
来自专栏javascript趣味编程

3.1.3 绘制三维Contour图的思路

2007年秋,开始接触数值计算,看到Contour图形,我觉得很神奇,很好看。强烈的好奇心驱使下,零零碎碎看了相关文献,都看不懂。大约2009年深秋,我读到的最...

12900
来自专栏有趣的Python和你

Python数据分析之方差分析

设某苗圃对一花木种子制定了5种不同的处理方法,每种方法处理了6粒种子进行育苗试验。一年后观察苗高获得资料如下表。已知除处理方法不同外,其他育苗条件相同且苗高的分...

22120

扫码关注云+社区

领取腾讯云代金券