《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 節(jié)點基礎(chǔ)_第1頁
《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 節(jié)點基礎(chǔ)_第2頁
《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 節(jié)點基礎(chǔ)_第3頁
《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 節(jié)點基礎(chǔ)_第4頁
《Web前端基礎(chǔ)》課件-任務(wù)7：學(xué)習(xí)DOM模型 節(jié)點基礎(chǔ)_第5頁
已閱讀5頁，還剩4頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進行舉報或認(rèn)領(lǐng)

文檔簡介

節(jié)點基礎(chǔ)如何理解節(jié)點及其作用？節(jié)點：網(wǎng)頁中的所有內(nèi)容在文檔樹中都是節(jié)點，即元素、屬性、文本等都屬于節(jié)點。作用：當(dāng)利用DOM進行網(wǎng)頁開發(fā)時，通過操作節(jié)點可以更加靈活地實現(xiàn)網(wǎng)頁中的交互效果。本節(jié)針對節(jié)點的屬性和層級進行講解。1節(jié)點的屬性節(jié)點有3個常用屬性，具體如下。1節(jié)點的屬性nodeName：用于獲取節(jié)點名稱，全大寫形式，如<div>標(biāo)簽的節(jié)點名稱為DIV。nodeValue：用于獲取節(jié)點值，一般適用于文本、注釋類型的節(jié)點。nodeType：用于獲取數(shù)字表示的節(jié)點類型，如1表示元素節(jié)點。常見的節(jié)點類型如下。類型常量常量的值元素節(jié)點

Node.ELEMENT_NODE1文本節(jié)點Node.TEXT_NODE3注釋節(jié)點Node.COMMENT_NODE8文檔節(jié)點Node.DOCUMENT_NODE9文檔類型節(jié)點Node.DOCUMENT_TYPE_NODE101節(jié)點的屬性在實際開發(fā)中，開發(fā)者可以根據(jù)節(jié)點的3個常用屬性獲取節(jié)點的名稱、值和類型，示例代碼如下。1節(jié)點的屬性varnode=document.body; //獲取body節(jié)點console.log(node.nodeName); //獲取節(jié)點名稱，輸出結(jié)果：BODYconsole.log(node.nodeValue); //獲取節(jié)點值，輸出結(jié)果：nullconsole.log(node.nodeType); //獲取節(jié)點類型，輸出結(jié)果：1有這樣一個問題：節(jié)點操作時，頁面中有一個<div>標(biāo)簽，那么這個<div>標(biāo)簽在DOM中是元素還是節(jié)點呢？答案：既可以將它稱為div元素，也可以將它稱為div節(jié)點。1節(jié)點的屬性元素是節(jié)點的一種類型，即元素節(jié)點。從程序角度來說，節(jié)點的構(gòu)造函數(shù)是Node，元素的構(gòu)造函數(shù)是Element，Element繼承Node。Tip2節(jié)點的層級不同節(jié)點可以劃分為不同層級，比如根節(jié)點、父節(jié)點、子節(jié)點、兄弟節(jié)點，節(jié)點層級示例代碼如下。<!DOCTYPEhtml><html><head><title>測試</title></head><body><ahref="#">鏈接</a><p>段落...</p></body></html>2節(jié)點的層級依據(jù)層級結(jié)構(gòu)對代碼中的節(jié)點進行介紹。根節(jié)點：document節(jié)點是整個文檔的根節(jié)點，它的子節(jié)點包括文檔類型節(jié)點和html元素。父節(jié)點

：它是指某一節(jié)點的上級節(jié)點，例如，html元素是head元素和body元素的父節(jié)點，body元素是a元素和p元素的父節(jié)點。子節(jié)點：它是指某一節(jié)點的下級節(jié)點，例如：head元素和body元素是html元素的子節(jié)點，a元素和p元素是body元素的子節(jié)點。兄弟節(jié)點：它是指同屬于

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論