|
|
转载请注明麦博网:http://www.micblogs.cn/Articles/232.aspx
注意：这是一个系列的文章，该文章属于<AJAX从入门到精通>系列中的第二篇。
本系列的其他文章，读者可以通过该地址查看：
玩转AJAX之一:揭开AJAX的神秘面纱：http://www.micblogs.cn/Articles/224.aspx
本篇文章将与大家一起学习DOM相关知识，作者假设阅读该文章的读者有一定HTML相关知识。
一、轻描HTML：
HTML全称（HyperText Mark-up Language），中文意思就是超文本标记语言，它是有一系列已经成了规范的标记（标签）组成一个HTML文件。HTML文件的结构由头（head）和主体(body)两大部分。[示例2-1]
<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文件，可以画出这样一棵树。[图2-1]
从图中，我们可以清楚的看到，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属性设置新的文本值。
下一遍文章将一起学习JavaScript中重要的对象XMLHttpRequest对象，使用AJAX技术必备知识。
|
|
发表于 2009-3-6 14:09:37
发表于 2009-3-6 17:30:48
过来蛮看下
