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

下載本文檔

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

文檔簡介

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

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

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

溫馨提示

  • 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)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論