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

下載本文檔

版權說明：本文檔由用戶提供并上傳，收益歸屬內容提供方，若內容存在侵權，請進行舉報或認領

文檔簡介

節(jié)點基礎如何理解節(jié)點及其作用？節(jié)點：網頁中的所有內容在文檔樹中都是節(jié)點，即元素、屬性、文本等都屬于節(jié)點。作用：當利用DOM進行網頁開發(fā)時，通過操作節(jié)點可以更加靈活地實現網頁中的交互效果。本節(jié)針對節(jié)點的屬性和層級進行講解。1節(jié)點的屬性節(jié)點有3個常用屬性，具體如下。1節(jié)點的屬性nodeName：用于獲取節(jié)點名稱，全大寫形式，如<div>標簽的節(jié)點名稱為DIV。nodeValue：用于獲取節(jié)點值，一般適用于文本、注釋類型的節(jié)點。nodeType：用于獲取數字表示的節(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ā)者可以根據節(jié)點的3個常用屬性獲取節(jié)點的名稱、值和類型，示例代碼如下。1節(jié)點的屬性varnode=document.body; //獲取body節(jié)點console.log(node.nodeName); //獲取節(jié)點名稱，輸出結果：BODYconsole.log(node.nodeValue); //獲取節(jié)點值，輸出結果：nullconsole.log(node.nodeType); //獲取節(jié)點類型，輸出結果：1有這樣一個問題：節(jié)點操作時，頁面中有一個<div>標簽，那么這個<div>標簽在DOM中是元素還是節(jié)點呢？答案：既可以將它稱為div元素，也可以將它稱為div節(jié)點。1節(jié)點的屬性元素是節(jié)點的一種類型，即元素節(jié)點。從程序角度來說，節(jié)點的構造函數是Node，元素的構造函數是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é)點的層級依據層級結構對代碼中的節(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. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯系上傳者。文件的所有權益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網頁內容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
  • 4. 未經權益所有人同意不得將文件中的內容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網僅提供信息存儲空間，僅對用戶上傳內容的表現方式做保護處理，對用戶上傳分享的文檔內容本身不做任何修改或編輯，并不能對任何下載內容負責。
  • 6. 下載文件中如有侵權或不適當內容，請與我們聯系，我們立即糾正。
  • 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

評論

0/150

提交評論