轉自:http://blog.csdn.net/lovesummerforever/article/details/45563239
什麼是DOM?
DOM(Document Object Model,簡稱DOM),文檔對象模型。
DOM是w3c的標準。DOM定義了訪問HTML和XML文檔的標準:W3C文檔對象模型(DOM)是中立於平臺和語言的接口,它允許程序和腳本動態地訪問和更新文檔的內容、結構和樣式。
Document:即文檔,我們創建一個頁面並加載到WEB瀏覽器的時候,DOM模型根據該頁面的內容創建一個文檔文件。
Object:即文件,新建頁面成爲文檔對象,對象關聯特徵稱爲文檔屬性,訪問對象函數稱對象方法。
Model:即模型。在頁面中通過樹狀模型展示頁面的元素和內容。
例如如下html代碼
-
<span style="font-family:Microsoft YaHei;font-size:14px;"> <!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>
-
<title>DOM樹狀文檔</title>
-
<script type="text/javascript" src="Jscript/jquery-1.8.2.min.js"></script>
-
<style>
-
body{font-size:13px}
-
table,div,p,ul{width:280px;border:solid 1px #666;
-
margin:10px 0px 10px 0px;
-
padding:0px;background-color:#eee}
-
</style>
-
</head>
-
<body>
-
<table>
-
<tr><td>Td1</td></tr>
-
<tr><td>Td2</td></tr>
-
</table>
-
<div>Div</div>
-
<p>P</p>
-
<div><span>Span</span></div>
-
<ul>
-
<li>Li1</li>
-
<li>Li2</li>
-
</ul>
-
</body>
-
</html>
-
</span>
其對應的樹狀模型如下圖
jquery操作DOM
如下圖所示
(圖片看不全,請右拉下方滾動條,謝謝)
上圖中主要是針對jQuery操作元素屬性,jquery操作元素CSS,jquery操作頁面節點三方面來說的。孔子說“學而時習之,不亦說乎”,學到的東西有機會付諸於實踐,這不是一件值得高興的事情嗎?實踐是檢驗真理的唯一標準,還是在實踐中使用,這樣才能得到。
PS:w3c jquery--http://www.w3school.com.cn/jquery/