- jQuery開發(fā)指南
- 車云月
- 1502字
- 2019-12-12 17:25:41
1.6 DOM對象和jQuery對象
DOM是英文Document Object Model（文檔對象模型）的首字母縮寫。如果沒有document，DOM就無從談起，因此只有類似(X)HTML、XML等屬于文檔類型的語言，才具有DOM。每一個(X)HTML頁面都具有一個DOM，每一個DOM都可以表示成一棵樹，這是理解DOM模型的關(guān)鍵。
1.6.1 DOM模型
下面構(gòu)建一個基本的網(wǎng)頁，網(wǎng)頁代碼如示例4所示。
示例4：
結(jié)構(gòu)代碼：
初始化后的效果如圖1.6所示。
圖1.6 DOM模型
在DOM里存在許多不同類型的節(jié)點，有些DOM節(jié)點還包含其他類型的節(jié)點。DOM里的節(jié)點通常分為3種類型，即元素節(jié)點、文本節(jié)點和屬性節(jié)點。
1．元素節(jié)點
在圖1.6所示的簡單網(wǎng)頁中，使用了<h2>、<p>和<ul>等元素。如把網(wǎng)頁比作一幢建筑，那么元素就是這座建筑的磚塊，這些元素在文檔中的布局形成了文檔的結(jié)構(gòu)。在DOM樹中，<html>元素是根元素，其他元素都是其子元素。
2．文本節(jié)點
網(wǎng)頁的核心價值是傳遞和展現(xiàn)信息，如果頁面對應(yīng)的HTML DOM僅僅包括<head>、<body>、<div>、<ul>和<li>等元素節(jié)點，那么這個網(wǎng)頁是沒有任何實際意義的，因為它沒有內(nèi)容、沒有信息。
在HTML DOM中，內(nèi)容是由文本節(jié)點提供的，文本節(jié)點就是HTML中的文字內(nèi)容。在示例代碼中，<p>元素中包含的文本“你最喜歡的顏色是什么？”和<strong>元素中包含的“我最喜歡的顏色是紅色，你呢？”等都是文本節(jié)點。
在HTML DOM文檔中，文本節(jié)點總包含在元素節(jié)點內(nèi)部，但并非所有元素節(jié)點都包含文本節(jié)點。例如，顏色列表中的<ul>元素的內(nèi)部就不包含文本內(nèi)容，包含文本內(nèi)容的是它的子節(jié)點<li>元素。
3．屬性節(jié)點
屬性節(jié)點的作用是對元素做出更具體的描述。在上面的示例中，<p>元素的title屬性和<img>元素的src和alt屬性就是屬性節(jié)點，開發(fā)人員可以利用屬性節(jié)點對包含在元素里的內(nèi)容做出準確的描述。
屬性節(jié)點都是元素節(jié)點的子節(jié)點，相應(yīng)的，屬性總被放在元素節(jié)點的起始標簽內(nèi)。不是所有元素節(jié)點都必須包含屬性節(jié)點，如元素節(jié)點<h2>中就沒有包含屬性節(jié)點，僅包含了文本節(jié)點“DOM模型示例”。
1.6.2 DOM對象
在JavaScript中，可以使用getElementsByTagName()或者getElementById()來獲取元素節(jié)點，通過該方式得到的DOM元素就是DOM對象，DOM對象可以使用JavaScript中的方法。代碼如下：
1.6.3 jQuery對象
jQuery對象就是通過jQuery包裝DOM對象后產(chǎn)生的對象，它能夠使用jQuery中的方法。例如：
這段代碼等同于如下代碼：
在jQuery對象中無法直接使用DOM對象的任何方法，例如，$("#id").innerHTML和$("#id").checked之類的寫法都是錯誤的，可以使用$("#id").html()和$("#id").attr("checked")之類的jQuery方法來代替。同樣，DOM對象也不能使用jQuery里的方法，例如document.getElementById("id").html()也會報錯，只能使用document.getElementById("id").innerHTML語句。
1.6.4 jQuery對象與DOM對象的相互轉(zhuǎn)換
在使用jQuery的開發(fā)過程中，jQuery對象和DOM對象互相轉(zhuǎn)換是常用的方式。jQuery對象轉(zhuǎn)換為DOM對象的主要原因是：DOM對象包含了一些jQuery對象沒有包含的元素，要使用這些元素就必須進行轉(zhuǎn)換。總之，jQuery對象的成員要豐富得多，通常開發(fā)者會把DOM對象轉(zhuǎn)換成jQuery對象。
在討論jQuery對象和DOM對象的相互轉(zhuǎn)換之前，先約定定義變量的風(fēng)格，如果獲取的對象是jQuery對象，那么在變量前面加上$，例如：
如果獲取的對象是DOM對象，則定義如下：
下面看看在實際應(yīng)用中是如何進行jQuery對象與DOM對象的相互轉(zhuǎn)換的。
1．jQuery對象轉(zhuǎn)換成DOM對象
jQuery提供了兩種方法將一個jQuery對象轉(zhuǎn)換成一個DOM對象，即[index]和get(index)。
（1）jQuery對象是一個類似數(shù)組的對象，可以通過[index]的方法得到相應(yīng)的DOM對象。
代碼如下所示：
（2）通過get(index)方法得到相應(yīng)的DOM對象。
代碼如下所示：
jQuery對象轉(zhuǎn)換成DOM對象在實際開發(fā)中并不多見，除非希望使用DOM對象特有的成員，如outerHTML屬性，通過該屬性可以輸出相應(yīng)的DOM元素的完整的HTML代碼，而jQuery并沒有直接提供該功能。
2．DOM對象轉(zhuǎn)換成jQuery對象
對于一個DOM對象，只需要用$()函數(shù)將DOM對象包裝起來，就可以獲得一個jQuery對象，其方式為$(DOM對象)。
jQuery代碼如下所示：
轉(zhuǎn)換后，可以任意使用jQuery中的方法。
在實際開發(fā)中，將DOM對象轉(zhuǎn)換為jQuery對象多見于jQuery事件方法的調(diào)用中。在后續(xù)內(nèi)容中將會接觸到更多的關(guān)于DOM對象轉(zhuǎn)換為jQuery對象的應(yīng)用場景。
DOM對象只能使用DOM中的方法，jQuery對象不可以直接使用DOM中的方法。
- TypeScript Blueprints
- PaaS程序設(shè)計
- Interactive Data Visualization with Python
- PostgreSQL技術(shù)內(nèi)幕：事務(wù)處理深度探索
- Learning Elixir
- Python Deep Learning
- Apache Spark Graph Processing
- Banana Pi Cookbook
- WordPress 4.0 Site Blueprints（Second Edition）
- 區(qū)塊鏈技術(shù)與應(yīng)用
- 快樂編程：青少年思維訓(xùn)練
- SCRATCH編程課：我的游戲我做主
- Java Web入門很輕松（微課超值版）
- Computer Vision with Python 3
- JavaWeb入門經(jīng)典