蜜果私塾：DOM，黑色艺术的终结者（1）
——缘起与元素的选取
文：阿蜜果
日期：2011-10-31
版权所有，转载请注明出处
1、 缘起
1.1 DOM
DOM（Document Object Model，文档对象模型）可以以一种独立于平台和语言的方式访问和修改一个文档的内容和结构。换句话说，这是表示和处理一个HTML或XML文档的常用方法。
有一点很重要，DOM的设计是以对象管理组织（OMG）的规约为基础的，因此可以用于任何编程语言。最初人们把它认为是一种让JavaScript在浏览器间可移植的方法，不过DOM的应用已经远远超出这个范围。DOM技术使得用户页面可以动态地变化，如可以动态地显示或隐藏一个元素，改变它们的属性，增加一个元素等，Dom技术使得页面的交互性大大地增强。
（1）DOM中的“D”
此处的“D”即“Document”，当创建了一个网页并把它加载到Web浏览器中时，DOM就在幕后悄然而生，它将根据编写的网页文档创建一个文档对象。
（2）DOM中的“O”
此处的“O”即“对象”，“对象”是一个独立的数据集合，与某个特定对象相关联的变量被称为该对象的属性，可通过某个特别对象去调用的函数被称为这个对象的方法。
JavaScript语言中的对象可以分为三种类型：
l 用户定义对象（user-defined object）：由程序员自行创建的对象；
l 内建对象（native object）：内建在JavaScript语言的对象，如Array、Math和Date等；
l 宿主对象（host object）：由浏览器提供的对象，例如window对象（对应浏览器窗口本身）。
（3）DOM中的“M”
DOM将一个文档表示为一个家谱树，家谱树的典型用法是表示一个人类家族的谱系并使用父、子、兄弟等记号来表示家族成员之间的关系。它可以将一些相对复杂的关系使用简明地表示出来：一个特定的家族成员既是某些成员的父辈，又是另一位成员的子辈，同时还是另一位成员的兄弟。家谱树也非常适合用来表示一份用HTML语言编写的文档。
一般的HTML文档的根元素为html，有两个子节点head和body，这两者又有各自的子孙节点，例如head常见的子节点有meta和title，而meta和title由互为兄弟节点。
1.2 DHTML
DHTML（Dynamic HTML，动态的HTML）是相对传统的静态的HTML而言的一种制作网页的概念。它其实并不是一门新的语言，它只是HTML、CSS和客户端脚本JavaScript的一种集成。DHTML不是一种技术、标准或规范，只是一种将目前已有的网页技术、语言标准整合运用，制作出能在下载后仍然能实时变换页面元素效果的网页设计概念。
DHTML背后的含义是：
l 利用HTML将元素标记为各种元素；
l 利用CSS设计将各有关元素的排版样式并确定它们在窗口中的显示位置；
l 利用JavaScript实时的操控和改变各有关样式。
从理论上来说，利用DHTML，可以将复杂的动画结果变成为非常容易。例如，在如下的实例中，首先使用HTML定义一个id为textdiv的页面元素：
<div id=”textdiv”>这是一个测试元素</div> 接着可以利用CSS定义该元素的位置样式：
#textdiv {
}{
position: absolute;
left: 50px;
top:100px;
} 接着可以通过JavaScript脚本改变textdiv元素的left、top属性的值，从而使得该div在页面上随意移动。
理论上来说，DHTML如此简单，但是浏览器操作元素的方式各异，因此在实际编码过程中会遇到很多困难。
1.3 浏览器的差异性
Netscape公司的 DOM使用了其专有的元素，这些元素称为层（layer）。这些层都有唯一的ID，JavaScript代码需要类似这样使用它们：
document.layers[‘textdiv’];
而在微软公司的DOM中如此使用：
document.all[‘textdiv’];
如果要获得该元素的left属性的值，在Netscape Navigator 4浏览器中必须这样做：
var xpos = document.layers[‘textdiv’].left;
在IE 4中，所用的编码如下：
var xpos = document. all[‘textdiv’].leftpos;
类似这样的差异性很多，使开发人员陷入难堪的境地：很多JavaScript代码需要在检测到不同的浏览器类型后，进行不同的编码，非常繁琐。除了在JavaScript实现方面的差异以外，Netscape Navigator和IE浏览器对CSS的支持方面也各不相同，有不少程序员把编写那些同时工作在这两种浏览器环境下的样式表和脚本视为“黑色艺术”。
1.4 呼唤标准的制定
技术界的绝大多数标准都不是无中生有的，而且当在浏览器的制造商们为了压倒对手而以DOM为武器展开一场营销大战的同时，W3C推出了一个标准化的DOM。各大浏览器制造商抛弃彼此的敌意，与W3C携手制定标准，并在新推出的版本中对标准提供了良好的支持。
使用标准的DOM后，可以使用document.getElementById(‘元素ID’)来取代document.layers[‘元素ID’]或document.all[‘元素ID]获得页面的某个元素，若要获得前面的textdiv对象的left属性的值，可以使用如下 JavaScript语句：
var xpos = document.getElementById(‘textdiv’).left;
通过W3C推出的标准化的DOM，可以让任何一种程序设计语言对使用任何一种标记语言编写出来的任何一份文档进行操控。
2、 元素的选取
2.1 使用getElementById()方法
该方法返回一个与给定id元素值的元素节点相对应的对象，在使用该方法时，请注意大小写。不过必须注意这个id必须是唯一的，如果定义了多个同样的id，通过这个方法获取到的将是第一个被定义的元素。
如下JavaScript代码将第一个id为textdiv的元素置为不可见，并打印该方法返回的类型：
<html>
<head>
<title>getElementById方法测试</title>
</head>
<body>
<div id="textdiv">测试1</div>
<div id="textdiv">测试2</div>
<script type="text/javascript">
document.getElementById("textdiv").style.display = "none";
alert(typeof document.getElementById("textdiv"));
</script>
</body>
<html>
测试可发现，页面上只显示“测试2”的文本，“测试1”的文本被隐藏，弹出窗口提示“object”。
2.2 使用getElementsByTagName()方法
该方法返回一个对象数组，每个对象分别对应着文档里着给定标签的一个元素。该方法只有一个参数，它的参数是HTML标签的名字：
element.getElementsByTagName(tag);
因为该方法返回的是数组对象，所以可以用length属性得到数组元素的个数。例如如下语句打印名字为li的元素的个数：
alert(document.getElementsByTagName(“li”).length);
getElementsByTagName()方法允许我们把一个通配符当作它的参数，表示文档中的每个元素都将在这个函数返回数组中占有一席之地。如下代码打印文档中有多少个节点：
alert(document. getElementsByTagName(“*”).length);
如下代码测试getElementsByTagName方法的使用：
<html>
<head>
<title>getElementsByTagName测试</title>
</head>
<body>
<ul id="test">
<li>Amigo</li>
<li>阿蜜果</li>
<li>谢星星</li>
</ul>
<script type="text/javascript">
alert(typeof document.getElementsByTagName("li"));
var items = document.getElementsByTagName("li");
alert(items.length);
for (var i = 0; i < items.length; i++) {
alert(items[i].firstChild.nodeValue);
}
</script>
</body>
<html>
多次弹出的窗口的值如下：
3、 参考文档
（1）《DOM_百度百科》：
http://baike.baidu.com/view/14806.htm
（2）《dhtml_百度百科》
http://baike.baidu.com/view/8389.htm
（3）《JavaScript DOM编程艺术》 [英] Jeremy Keith 著，杨涛、王晓云等译，人民邮电出版社出版
posted on 2011-10-31 13:51
阿蜜果 阅读(2440)
评论(5) 编辑 收藏 所属分类:
Javascript