f(sixleaves) = sixleaves

重剑无锋 大巧不工
  C++博客 :: 首页 :: 新随笔 :: 联系 :: 聚合  :: 管理 ::
  95 随笔 :: 0 文章 :: 7 评论 :: 0 Trackbacks
JS(02)-DOM介绍
理论知识：
介绍一下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 阅读(149) 评论(0)  编辑 收藏 引用 所属分类: Web

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