`

玩转AJAX之二:认识DOM

    博客分类：
  • Ajax
Ajax浏览器HTMLWebJavaScript 
阅读更多

一、轻描HTML：

HTML全称（HyperText Mark-up Language），中文意思就是超文本标记语言，它是有一系列已经成了规范的标记（标签）组成一个HTML文件。HTML文件的结构由头（head）和主体(body)两大部分。

<html>
  <head>
   <title>AJAX入门到精通之二：剖析DOM</title>
  </head>
  <body>
     <h1>DOM示例2-1</h1>
     <p>轻描html</p>
     <div>
          <p id="xk">作者：星空</p>
          <p>www.micblogs.cn</p>
     </div>
  </body>
</html>

 

二、认识HTML树视图：

当我们创建了一个网页（HTML文件）并把它加载到WEB浏览器的时候，浏览器就把它转换成了一棵树，针对上面的HTML文件，可以画出这样一棵树。

 

 

 

 

从图中，我们可以清楚的看到，HTML是根元素（跟节点），它有2个孩子head和body，title就是head的孩子.......依次类推。

三、认识DOM

DOM全称（Document Object Model）文档对象模型。根据W3C DOM规范（http://www.w3.org/DOM/）。大家看DOM的全称后，应该就想到了必须要有D（Document），否则DOM无从谈起，在WEB浏览器加载HTML文件（网页）的时候，这时我们的DOM也悄悄的产生了。这时我们的D、O、M就全部有了。
D：文档。具体形式就是HTML文件。
O：对象。具体形式就是WEB浏览器加载HTML文件后把每个节点看作是对象，如上图中的每个框框（标记），并能让用户使用JS代码操作这些对象。
M：模型。具体形式就是WEB浏览器转换成了树的结构。

四、DOM中的节点

在DOM中每项都是一个节点（DOM节点），DOM节点有特定的类型，例如：文本节点、元素节点、属性节点。

五、小小的示例

讲了这么么多理论上的东西，估计大家都看的很闷了，也许稍微懂点的读者看了我以上的文字也被弄的头大吧。希望这小小的示例能加深大家对DOM的理解。
    1、HTML文件（就拿上面的文件结构）
    2、JavaScript代码（DOM的操作代码是写在这JS里的）

document.getElementById("xk").innerText="DOM文档对象模型";

 

上面的代码的意思就是通过文档对象document的一个方法getElementById()查找元素节点中ID为"XK"的元素，并通过innerText属性设置新的文本值。


 

  • 大小: 5.4 KB
分享到：
| innerText，innerHTML,outerHTML的用法以 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics