DOM分為3個方面,即DOM Core,HTML-DOM,CSS-DOM.
1,DOM Core並不專屬於JavaScript,任何一種支持DOM的程序設計語言都可以使用它.
JavaScript中的getElementById(),getElementsByTagName()...等方法.
例如:使用DOM Core來獲取表單對象的方法:
document.getElementsByTagName("form");
2,HTML-DOM.
在使用JavaScript和DOM為HTML文件編寫腳本的時候.有許多專屬於HTML-DOM的屬性.HTML-DOM的出現甚至比DOM Core還要早,它提供了一些更簡明的記號來描述各種HTML元素的屬性.
例如:使用HTML-DOM來獲取表單對象的方法:
document.forms //HTML-DOM提供了一個forms對象.
3,CSS-DOM
CSS-DOM是針對CSS的操作.在JavaScript中CSS-DOM技術的主要作用是獲取和設置style對象的各種屬性.
例如:設置某元素style對象字體顏色的方法:element.style.color="red";
下面學習的是:jQuery中的DOM操作:
先構建出一棵DOM樹:
代碼如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>jQuery中的DOM操作</title>
</head>
<body>
<p title="選擇你最喜歡的水果">你最喜歡的水果是?</p>
<ul>
<li title="蘋果">蘋果</li>
<li title="橘子">橘子</li>
<li title="菠蘿">菠蘿</li>
</ul>
</body>
</html>
接下來的操作都是圍繞這個DOM樹而展開的.