JavaScript之DOM物件——升學就業幫Java知識分享

由升學就業幫發表于歷史2021-07-03

1. DOM物件認識

1.1 什麼是DOM物件

DOM模型的全稱是：Document Object Model，即：文件物件模型，它定義了操作文件物件的介面。

WEB頁面的HTML文件，document就是根節點，其它的子物件就是子結點。

DOM模型在AJAX開發中的作用

在ajax中，DOM模型其實是最核心的結構，是所有ajax開發的基礎架構．如果沒有DOM模型，就沒有辦法在客戶端改變頁面的內容，所有的區域性重新整理，非同步請求也就無從實現。熟練掌握DOM模型的相關技術，才算真正掌握了ajax開發精髓。

1.2 瀏覽器裝載和顯示頁面的過程

1。下載原始碼

2。透過頁面原始碼載入相關內容到記憶體，也就是根據HTML原始碼在記憶體中構建相關DOM物件。

3。根據DOM物件的相關屬性，來進行顯示。

1.3 DOM節點分類node

1.3.1 節點的概念

在DOM模型中，整個文件就是由層次不同的多個節點組成，可以說結點代表了全部內容。

1.3.2 節點的型別

元素結點、文字結點和屬性結點

hello DOM！

文字節點和屬性結點都看作元素結點的子結點

我們一般所說的結點指的就是元素結點。

1.3.3 節點的基本屬性

nodeName：元素結點返回結點型別（即，標記名稱）；屬性結點返回屬性名稱，文字節點返回“#text”。

nodeType：元素節點返回1，屬性節點返回2，文字節點返回3

nodeValue：元素節點返回null，屬性節點返回屬性值，文字結點返回文字值。

1.4 DOM節點關係

瀏覽器在解析文件之前會將文件讀取到記憶體形成DOM樹，樹形節點存在相關層級關係，常用關係如下所示：

根節點

（root）：所有節點的頂層節點

父子節點

（parent-child）：元素作為父級，和元素作為子級

兄弟節點

（Sibling）：和

元素就是兄弟關係；和 <h1> 元素並不是兄弟關係</p><p><strong>葉子節點</strong></p><p>：沒有任何子節點的節點</p><p><strong>空節點</strong></p><p>：沒有任何內容的節點</p><p><strong>2. DOM物件的獲取</strong></p><p><strong>2.1 獲取元素節點物件</strong></p><div class="base-box"></div><p>1。使用document。getElementById（）引用指定id的結點</p><p>// 需求：點選按鈕實現透過id獲取p節點以及節點的資訊function getNodeById（） { var pNode = document。getElementById（“p”）； console。log（pNode）； console。log（“nodeName： ” + pNode。nodeName + “，nodeValue： ” + pNode。nodeValue + “，nodeType： ” + pNode。nodeType）；}</p><div class="base-box"></div><p>2。使用document。getElementsByClassName（“hello”）將所有class屬性為”hello”的元素結點放到一個數組中返回</p><p>function getNodeByClassName（） { var pNodes = document。getElementsByClassName（“hello”）； for （var i = 0； i < pNodes。length； i++） { var pNode = pNodes［i］； console。log（pNode）； console。log（“nodeName： ” + pNode。nodeName + “，nodeValue： ” + pNode。nodeValue + “，nodeType： ” + pNode。nodeType）； }}</p><div class="base-box"></div><p>3。使用document。getElementsByTagName（“a”），將所有<a>元素結點放到一個數組中返回。</p><p>function getNodeByTagName（） {var aNodes = document。getElementsByTagName（“a”）； for （var i = 0； i < aNodes。length； i++） { var aNode = aNodes［i］； console。log（aNode）； console。log（“nodeName： ” + aNode。nodeName + “，nodeValue： ” + aNode。nodeValue + “，nodeType： ” + aNode。nodeType）； }}</p><div class="base-box"></div><p>4。使用document。getElementsByName（“gender”），將所有name屬性為”gender”的元素結點放到一個數組中返回。</p><p>function getNodeByName（） { var radios = document。getElementsByName（“gender”）； for （let i = 0； i < radios。length； i++） { var radio = radios［i］； console。log（radio）； console。log（“nodeName： ” + radio。nodeName + “，nodeValue： ” + radio。nodeValue + “，nodeType： ” + radio。nodeType）； }}</p><div class="base-box"></div><p><strong>2.2 間接獲得元素物件</strong></p><p>間接引用節點</p><p>1。引用子結點</p><p>每個結點都有一個</p><p><strong>childNodes</strong></p><p>集合屬性，型別是陣列物件，表示該結點的所有子結點的集合。這些子結點按照它在文件中出現的順序排列，因此可以透過索引來依次訪問各個子結點。</p><p><strong>firstChild</strong></p><p>：獲取第一個子節點</p><p><strong>lastChild</strong></p><p>：獲取最後一個子節點</p><div class="base-box"></div><p>2。引用父節點</p><p>DOM模型中，除了根結點，每個結點都僅有一個父節點，可以用</p><p><strong>parentNode</strong></p><p>屬性來引用。</p><p>3。引用兄弟結點</p><p><strong>element.nextSibling;</strong></p><p>//引用下一個兄弟結點</p><p>element。</p><p><strong>previousSibling</strong></p><p>； //引用上一個兄弟結點</p><p>如果該結點沒有相應的兄弟結點，則屬性返回null。</p><div class="base-box"></div><p>案例：根據以下HTML結構，實現DOM節點相關操作：</p><p><div id=“parent”><p id=“p1”>白日依山盡</p> <p id=“p2”>黃河入海流</p> <p id=“p3”>欲窮千里目</p> <p id=“p4”>更上一層樓</p></div><button onclick=“getNodeByParent（）；”>透過父節點獲取子節點</button><button onclick=“”>透過子節點獲取父節點</button><button onclick=“”>透過節點獲取兄弟節點</button></p><p>1。透過父節點獲取子節點</p><p>function getNodeByParent（） {// 1。獲取父節點 var parentNode = document。getElementById（“parent”）； // 2。透過父節點獲取所有子節點 var childNodes = parentNode。childNodes； console。log（“chiledNodes： ” + childNodes。length）； console。log（“childElementCount： ” + parentNode。childElementCount）； // 3。遍歷輸出所有的子節點 for （var i = 0； i < childNodes。length； i++） { var childNode = childNodes［i］； console。log（“==> 第” + （i + 1） + “個節點： ”） console。log（childNode）； console。log（“nodeName： ” + childNode。nodeName + “，nodeValue： ” + childNode。nodeValue + “，nodeType： ” + childNode。nodeType）； } // 4。獲取第一個節點和最後一個節點 console。log（parentNode。firstChild）； console。log（parentNode。lastChild）； console。log（parentNode。firstElementChild）； console。log（parentNode。lastElementChild）； console。log（“=======================”）； var childNodes = parentNode。children； for （var i = 0； i < childNodes。length； i++） { var childNode = childNodes［i］； console。log（childNode）； }}</p><div class="base-box"></div><p>2。透過子節點獲取父節點</p><p>function getNodeBySon（） {var p2Node = document。getElementById（“p2”）； // 獲取父節點 var parentNode = p2Node。parentNode； console。log（parentNode）； console。log（p2Node。parentElement）；}</p><div class="base-box"></div><p>3。透過某個節點獲取兄弟節點</p><p>function getNodeByBrother（） {var p2Node = document。getElementById（“p2”）； // 獲取緊鄰的下一個節點 console。log（p2Node。nextSibling）； // 獲取緊鄰的下一個元素節點 console。log（p2Node。nextElementSibling）； // 獲取緊鄰的上一個節點 console。log（p2Node。previousSibling）； // 獲取緊鄰的上一個元素節點 console。log（p2Node。previousElementSibling）；}</p><div class="base-box"></div><p><strong>3. DOM操作元素的屬性</strong></p><p>元素結點。屬性名稱（可以讀寫屬性值）</p><p>使用setAttritbute（）， getAttribute（）新增和設定屬性</p><p>程式碼示例如下：</p><p><！DOCTYPE html><html lang=“en”><head> <meta charset=“UTF-8”> <meta name=“viewport” content=“width=device-width， initial-scale=1。0”><title>DOM操作屬性 hello

獲取節點的屬性設定節點的屬性

4. DOM操作元素內容

當標籤獲得值的時候使用value屬性

雙標籤獲得值的時候使用的是innerHTML或者innerText

雙標籤的特殊情況（value）

Select/textarea

取值的時候使用value屬性

賦值的時候使用innerHTML或者innerText即可

要獲取一個結點內的文字，一般使用innerHTML屬性

innerHTML屬性不侷限於操作一個結點，而是可以使用HTML片段直接填充頁面或直接獲取HTML片段，大大提高了開發的靈活性。

InnerText節點的屬性：

獲取：獲取的是文字，不會獲取標籤

設定：都是文字，瀏覽器不會解析裡面包含的html標籤

相關程式碼如下所示：

<！DOCTYPE html> Document

標籤

獲取元素文字設定元素文字
簡介：家鄉：武漢蘭州銀川獲取表單資料

5. DOM操作樣式

1。透過style物件改變節點的CSS

利用style物件來控制元素的css，每個style物件對應為該元素指定的css，而每個css屬性都對應於style物件的屬性。

對於單個單詞的css屬性，在style物件中的屬性名稱不變，但對於雙單詞或多單詞的屬性改寫為駱駝寫法。例如：css中的font-size對應style屬性為fontSize。

2。使用className屬性指定結點樣式

結點的className屬性對應於css中的類選擇器。

相關程式碼如下所示：

<！DOCTYPE html> 21。DOM物件操作樣式 Hello Xyr

節點樣式的修改

6. DOM操作節點

使用document。createElement方法建立元素結點

var divElement = document。createElement（“div“）

使用appendChild方法新增結點

parentNode。appendChild（childElement）；

使用insertBefore方法插入子結點

parentNode。insertBefore（newNode， beforeNode）

使用removeChild方法刪除子結點

parentNode。removeChild（childNode）；

使用replaceChild方法替換子結點

parentNode。replaceChild（newNode， childNode）；

使用cloneNode方法克隆節點，傳入true表示深複製

node。cloneNode（true）；

相關操作程式碼如下所示：

<！DOCTYPE html> Document

新增節點在指定元素之前新增節點替換節點刪除節點複製節點

7. JavaScript操作表單

7.1 獲取表單物件的方法

利用表單在文件中的索引或表單的name屬性來引用表單

docuemnt。getElementById 透過id獲取表單物件

document。formName 透過document物件的表單name屬性獲取表單物件

document。forms［i］透過文件的foms屬性得到所有的表單物件，返回表單的陣列，透過索引獲取對應的表單物件

document。forms［formName］透過文件的foms屬性得到所有的表單物件，返回表單的陣列，透過表單name屬性獲取對應的表單物件

程式碼如下所示：

        賬號：
        密碼：
        獲取表單物件獲取表單屬性

7.2 獲取表單常用屬性

表單常用屬性如下表所示：

屬性

描述

action

返回或者設定action屬性

elements

獲取一個數組，包括該表單中所有的表單域

length

返回表單的表單域的數量

method

返回或設定表單的method屬性

name

返回或設定表單的name屬性

程式碼示例如下所示：

// 獲取表單屬性function getFormAttr（） { var loginForm = document。getElementById（”login“）；// 獲取表單的action屬性 console。log（loginForm。action）； // 獲取表單的長度 console。log（loginForm。length）； // 獲取表單的method屬性 console。log（loginForm。method）； // 獲取所有表單域物件，返回的是一個數組 var forms = loginForm。elements； for（var i = 0； i < forms。length； i++） { var form = forms［i］； console。log（form）； }}

執行結果如下圖所示：

7.3 表單物件的常用方法

表單常用方法如下表所示：

方法

描述

submit()

相當於單擊submit按鈕，表示表單提交到指定頁面

reset()

相當於單擊reset按鈕，表示所有表單域到初始值

程式碼示例如下所示：

// 提交表單function submitForm（） { var loginForm = document。getElementById（”login“）； loginForm。submit（）；}// 重置表單function resetForm（） {var loginForm = document。getElementById（”login“）； loginForm。reset（）；}

7.4 form表單的常用事件屬性

表單常用事件屬性如下表所示：

事件

描述

onsubmit

在表單提交之前觸發

onreset

在表單被重置之前觸發

注意：

1。表單點選提交會觸發onsubmit事件，執行的函式需要給出返回值，返回true表示可以提交資料，返回false，表示不能提交資料

2。其中onsubmit屬性的屬性值return關鍵字不能省略，如果省略的返回結果為false，還會提交資料和頁面跳轉。

3。reset表示重置到初始的狀態，而不是清空。

7.5 form中表單域物件的獲取

可以透過如下三種方式獲取：

透過id獲取表單域

透過表單的name來獲取

form。elements［i］；表單的元素下標來獲取

程式碼示例如下所示：

function getFormField（） { // 透過id獲取表單域 var accountNode = document。getElementById（”accountId“）； console。log（accountNode）； // 透過表單的name來獲取 var loginForm = document。getElementById（”login“）； var accountNode2 = loginForm。account； console。log（accountNode2）； // form。elements［i］；表單的元素下標來獲取 var accountNode3 = loginForm。elements［0］‘’ console。log（accountNode3）；}

7.5 form表單域元件常用屬性和方法.

disabled ：使表單域不能接受使用者的操作，變為只讀

readonly：內容不可以更改，變為只讀

name ：獲取或設定表單域的名稱

form：獲取該表單域所屬的表單

value：獲取或設定表單域的值

type ：判斷表單域的型別

focus（）：使表單域獲得焦點

blur（）：使表單域失去焦點

注意：

1。設定readonly屬性的時候only首字母需要大寫才能生效

2。一個頁面只能夠有一個元件設定為獲得焦點

3。 blur方法常用於在失去焦點時進行表單校驗，部分程式碼如下所示：

賬號：
密碼：

readonly和disabled的區別?

共同點：都是導致內容不可以更改

區別：

readonly：中的內容是可以提交的

disabled：資料是不可以提交的，不可以在被操作

程式碼示例如下所示：

        賬號：
        密碼：
                表單域的常用屬性設定

7.6 單選按鈕組和複選框常用操作

透過checked屬性獲得選中和未選中的狀態。

獲得單選按鈕組的值：只能透過遍歷單選按鈕來獲取被選中的值

複選框的處理類似單選按鈕

獲取所有單選按鈕或者複選按鈕物件使用getElementByName（”name“）

使用複選按鈕實現全選和反選效果圖如下所示：

程式碼示例如下所示：

<！DOCTYPE html> DOM操作單選和複選按鈕性別：男女
獲取單選框的值

    愛好：游泳     足球     籃球     寫程式碼
    全選/全不選
    獲取多選框的值    多選框全選操作    全選    全不選    反選

7.7 下拉列表的使用

常用屬性的使用

使用value屬性獲取和設定下拉列表選中選項的值

使用selectedIndex屬性獲取當前被選中選項的索引

使用options屬性獲取所有選項集合

使用option物件的value屬性和text屬性，可以讀寫這兩個屬性。

使用option物件的selected屬性選中該option

示例程式碼如下所示：

家鄉：南昌北京深圳上海獲取下拉框的值新增選項

我們也可以透過下拉選項框物件的appendChild方法或者add方法新增option節點，程式碼如下所示：

function addMyOption（） { // 1。獲取到select節點 var selectNode = document。getElementById（”city“）； // 2。建立一個option var opt = document。createElement（”option“）； // 3。設定option節點屬性 opt。value = ”cq“； opt。text = ”重慶“； // 4。將opt新增到select節點中 selectNode。add（opt）；}

案例：使用下拉選項框實現左選和右選新增的案例，效果圖如下所示：

示例程式碼如下所示：

<！DOCTYPE html> #div1 { width： 1000px； margin： 0 auto； margin-top： 200px； } #div11 { width： 300px； height： 400px； border： 1px solid red； float： left； } #div12 { width： 200px； height： 400px； border： 1px solid blue； /*position： absolute；*/ /*left： 400px；*/ float： left； } #div13 { width： 300px； height： 400px； border： 1px solid green； float： left； } input { margin-left： 50px； } 。add { margin-top： 100px； } #select1 { width： 300px； height： 400px； } #select2 { width： 300px； height： 400px； } AAAAAAAAAAAAAAA BBBBBBBBBBBBBBB CCCCCCCCCCCCCCC DDDDDDDDDDDDDDD EEEEEEEEEEEEEEE “ /> >“ /> HHHHHHHHHHHHHHH IIIIIIIIIIIIIII JJJJJJJJJJJJJJJ OOOOOOOOOOOOOOO PPPPPPPPPPPPPPP function selectToRight（） { // 1。獲取到select1標籤 // 2。得到select標籤的子標籤 // 3。遍歷子標籤陣列，獲取到每一個option // 4。判斷是否被選中 /* * 選中 * 獲取到select2標籤 * 新增到select2中 * 未選中 */ // 1。獲取到select1標籤 var select1 = document。getElementById（”select1“）； var select2 = document。getElementById（”select2“）； // 2。得到select標籤的子標籤 var options = select1。options； // 3。遍歷子標籤陣列，獲取到每一個option /* * i=0 length = 5 * i=1 lenght = 5 */ for （var i = 0； i < options。length； i++） { var op = options［i］； // 4。判斷是否被選中 if （op。selected == true） { // 新增到select2中 select2。add（op）； -； } } } function selecAllToRight（） { // 獲取到select1中標籤 var select1 = document。getElementById（”select1“）； var select2 = document。getElementById（”select2“）； // 得到標籤中所有的子標籤 var options = select1。options； // 遍歷子標籤陣列，得到每一個子標籤 for （var i = 0； i < options。length； i++） { var op = options［i］； // 添// 將每一個子標籤新增到select2中 select2。add（op）； -； } } function selectToLeft（） { // 1。獲取到select1標籤 var select1 = document。getElementById（”select1“）； var select2 = document。getElementById（”select2“）； // 2。得到select標籤的子標籤 var options = select2。options； // 3。遍歷子標籤陣列，獲取到每一個option /* * i=0 length = 5 * i=1 lenght = 5 * */ for （var i = 0； i < options。length； i++） { var op = options［i］； // 4。判斷是否被選中 if （op。selected == true） { // 新增到select2中 select1。add（op）； -； } } } function selecAllToLeft（） { // 獲取到select1中標籤 var select1 = document。getElementById（”select1“）； var select2 = document。getElementById（”select2“）； // 得到標籤中所有的子標籤 var options = select2。options； // 遍歷子標籤陣列，得到每一個子標籤 for （var i = 0； i < options。length； i++） { var op = options［i］； select1。add（op）； i——； } }二級聯動案例如下所示：<！DOCTYPE html> 三級聯動 ——請選擇—— 中國美國英國日本 // 定義資料來源 var chinaArr = ［”北京“， ”上海“， ”南京“， ”南昌“］； var americaArr = ［”華盛頓“， ”紐約“， ”底特律“， ”費城“］； var englandArr = ［”倫敦“］； var japanArr = ［”廣島“， ”長崎“， ”東京“， ”大阪“］； var country = new Array（4）； country［0］ = ［”中國“， chinaArr］； country［1］ = ［”美國“， americaArr］； country［2］ = ［”英國“， englandArr］； country［3］ = ［”日本“， japanArr］； function addToSelect（selectValue） { // alert（selectValue）； // 獲取到country和city兩個下拉選項框 var countrySelect = document。getElementById（”country“）； var citySelect = document。getElementById（”city“）； // 獲取到citySelct中所有的option var ops = citySelect。getElementsByTagName（”option“）； for （var i = 0； i < ops。length； i++） { // 獲取到每一個城市的option var op = ops［i］； // 移除option citySelect。removeChild（op）； -； } // 獲取到所有的對應選中國家的城市 for （var i = 0； i < country。length； i++） { var arr1 = country［i］； // 獲取到第一個元素 var firstValue = arr1［0］； // 判斷是否和傳入的值相同 if （firstValue == selectValue） { var otherValueArr = arr1［1］； for （var j = 0； j < otherValueArr。length； j++） { // 獲取到二維陣列中每一個一維陣列的元素 var value = otherValueArr［j］； // 建立option節點 var optionEle = document。createElement（”option“）； // 建立文字節點 var textNode = document。createTextNode（value）； // 將文字新增到option當中 optionEle。appendChild（textNode）； // 將option新增到city選項中 citySelect。appendChild（optionEle）； } } } }

VAR 節點 document 表單獲取

上一篇：<<櫻桃全年栽培管理技術（珍藏版）

下一篇：如何解決影視行業“財稅”問題，這場活動講明白了>>