f(sixleaves) = sixleaves

重剑无锋 大巧不工

  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  95 随笔 :: 0 文章 :: 7 评论 :: 0 Trackbacks
理论知识:
介绍一下DOM,所谓的DOM用英文来说就是DOCUMENT OBJECT MODEL,即文档-对象-模型。什么意思呢。其实每一个网页,就是一份HTML文档,而HTML文档是可以看成一棵树的,这棵树称为节点树,顾名思义,它是由节点(Node)构成的。
而每一个节点其实对应的又是一个对象,既然是对象,就可以拥有属性,拥有方法。在进一步想,在编程中,创建对象要分配内存,所以一份HTML文档,其背后是浏览器创建了一个DOM的节点树,这些节点的关系通过指针实现,而每个节点即每个对象
在内存中都占有一定空间。
一颗节点树:

所以我要介绍下什么是节点:
           先来看下这张图:
           Node是一个类,代表着节点类,其下有Document类,Element类。这两个类是学习DOM的重点。
           1.Document类代在浏览器中有个Document对象,就是document,它是全局性的。如果你看第一张图,
           会发现,document在整个文档的根节点,。
           2.Element类,代表的是元素节点,元素节点包括HTML元素节点中所有的元素都是元素节点。
           3.Document于Element中的HTMLDocument、HTMLElement是不一样的,Document和Element代表的是HTML/XML
              文档,而Element代表的是这些文档的元素,而HTMLDocument、HTMLElement是进一步的细分,他们代表的是
              HTML文档。

重点知识:
          前面介绍的理论知识是为了这步做铺垫的,我们通过上面可以知道,其实HTML文档相当于一份初始配置文档,当第一次加载时,浏览器把它创建为DOM节点树保存在内存中,而这以后显示在浏览器上的东西,都是通过读取DOM节点树来实现的。
          所以我们就要学习DOM节点树提供给我们定位,获取节点的接口,主要是通过Document对象的实例document中的三个方法。为什么是document对象呢?因为作为一棵树,它是根节点,通过根节点我们可以搜索到所有节点(学过数据结构的
          应该很容易理解)。
          1.所以我们通过document中提供的三个方法:getElementById("XXX");getElementsByTag("XXX");getElementsByClassName("XXX");最后一个是HTML5中新提供的接口。前面两个,分别是通过Id属性,和标签获取
          指定的元素或者元素集合。
          2.既然获得了节点,我们可以通过节点这个对象所提供的方法来操作节点,说得形象点,我们获取节点后,可以和节点对话,我们可以向节点发送消息,而消息会激发节点对象相应的动作,具体的,我们可以发送getAttribute("XXX");消息来获取节点对象属性的值
          我们还可以发送消息setAttribute(key,value);来设置指定节点属性为key的值为value。
           

2014.07.09
03:43
于福州


posted on 2014-07-09 03:33 swp 阅读(160) 评论(0)  编辑 收藏 引用 所属分类: Web

只有注册用户登录后才能发表评论。
网站导航: 博客园   IT新闻   BlogJava   知识库   博问   管理