专栏首页GreenLeavesJavascript之Dom学习

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 条评论
登录 后参与评论

相关文章

  • oracle 层次化查询(生成菜单树等)

    1、简介:Oracle层次化查询是Oracle特有的功能实现,主要用于返回一个数据集,这个数据集存在树的关系(数据集中存在一个Pid记录着当前数据集某一条记录的...

    郑小超.
  • JavaScript之面向对象学习六原型模式创建对象的问题,组合使用构造函数模式和原型模式创建对象

    一、仔细分析前面的原型模式创建对象的方法,发现原型模式创建对象,也存在一些问题,如下: 1、它省略了为构造函数传递初始化参数这个环节,结果所有实例在默认的情况下...

    郑小超.
  • HTML技术简介

    1.DHTML:"Dynamic HTML"动态HTML技术的简称。DHTML并不是一项新技术,而是HTML,CSS,JavaScript技术组合的术语。DHT...

    郑小超.
  • JS-DOM对象知识点汇总(慕课)

    xing.org1^
  • 学爬虫利器XPath,看这一篇就够了

    XPath,全称 XML Path Language,即 XML 路径语言,它是一门在XML文档中查找信息的语言。XPath 最初设计是用来搜寻XML文档的,但...

    皇上得了花柳病
  • Python3网络爬虫实战-28、解析库

    上一节我们实现了一个最基本的爬虫,但提取页面信息时我们使用的是正则表达式,用过之后我们会发现构造一个正则表达式还是比较的繁琐的,而且万一有一点地方写错了就可能会...

    py3study
  • (mysql)找不到请求的 .Net Framework Data Provider。可能没有安装

    在C:\WINDOWS\Microsoft.NET\Framework\v4.0.30319\CONFIG中machine.config(xml文件)中有一个字...

    yaphetsfang
  • 利用Nginx负载均衡的访问SpringBoot服务,还有如何利用Nginx实现404,500等错误页面的拦截

    今天给大家讲一些如何利用Nginx负载均衡的访问SpringBoot服务,还有如何利用Nginx实现404,500等错误页面的拦截。 首先第一步就是下载Ngin...

    林老师带你学编程
  • 学爬虫利器Xpath,看这一篇就够了(建议收藏)

    上一篇文章主要给大家介绍了Xpath的基础知识,大家看完之后有没有收获呢?按照计划,今天就结合示例给大家介绍如何使用Xpath?

    stormwen
  • Ubantu下实现Tomcat+memcached+nginx多实例部署

    http://my.oschina.net/u/136848/blog/283599

    用户2603479

扫码关注云+社区

领取腾讯云代金券