2015秋前端開發(fā)課件-js對象模型_第1頁
2015秋前端開發(fā)課件-js對象模型_第2頁
2015秋前端開發(fā)課件-js對象模型_第3頁
2015秋前端開發(fā)課件-js對象模型_第4頁
2015秋前端開發(fā)課件-js對象模型_第5頁
免費預覽已結束，剩余24頁可下載查看

下載本文檔

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

文檔簡介

1-文檔對象模型

動態(tài)網(wǎng)頁的真正威力2015Spring,xi'an本章內容文檔對象模型(DOM)DOMAPI選擇DOM元素getElementsByXXX()querySelector()NodeList節(jié)點列表動態(tài)節(jié)點列表靜態(tài)節(jié)點列表文檔對象模型(DOM)文檔對象模型文檔對象模型是為HTML和XML文檔的API提供了文檔的結構化表達能使開發(fā)者修改網(wǎng)頁的內容和視覺呈現(xiàn)文檔對象模型(2)文檔對象模型由多個對象組成，用來操縱網(wǎng)頁所有的屬性，方法和事件都組織到對象中那些對象可通過編程語言和腳本訪問如何使用HTML頁面的DOM？寫JavaScript來與DOM交互JavaScript使用DOMAPI（每個瀏覽器都原生實現(xiàn)）DOMAPIDOMAPIDOMAPI由對象和方法組成，用來與HTML頁面交互能添加和刪除HTML元素能動態(tài)的應用樣式能添加和刪除HTML屬性DOM引入對象來表示HTML元素和它們的屬性document.documentElement是<html>document.body是網(wǎng)頁的bodyDOM對象每個HTML元素有對應的DOM對象類型HTMLLIElement代表<li>HTMLAudioElement代表<audio>這些對象都有相應的屬性HTMLAnchorElement有href屬性HTMLImageElement有src屬性document對象是特殊對象代表DOMAPI的入口點HTML元素HTML元素有屬性，與其特性對應id,className,draggable,style,onclick,等不同的HTML元素有特殊特性HTMLImageElement有屬性srcHTMLInputElement有屬性valueHTMLAnchorElement有屬性hrefHTML元素(2)HTML元素也有對應其內容的屬性innerHTML返回的字符串為不包含元素本身的元素內容outerHTML返回的字符串為包含元素本身的元素內容innerText/textContent返回的字符串為不包含標簽的元素內容DOM對象演示選擇DOM元素選擇HTML元素HTML元素可以使用DOMAPI找到并緩存至變量選擇單一元素選擇元素集合

使用預定義的元素集合varheader=document.getElementById('header');varnav=document.querySelector('#main-nav');varinputs=document.getElementsByTagName('li');varradiosGroup=document.getElementsByName('genders[]');varheader=document.querySelectorAll('#main-navli');varlinks=document.links;varforms=document.forms;使用getElementsBy方法DOMAPI包含了基于一些特征來選擇元素的方法通過Id通過Class通過標簽名通過名稱

varheader=document.getElementById('header');varposts=

document.getElementsByClassName('post-item');vargendersGroup=

document.getElementsByName('genders[]');varsidebars=

document.getElementsByTagName('sidebar');document.getElementsBy演示querySelectorDOMAPI有用類似CSS選擇器的方法來找到和選擇HTML元素querySelector返回匹配選擇器的第一個元素querySelectorAll返回匹配選擇器的所有元素的集合不支持老瀏覽器（低于IE8）兩個方法都有字符串參數(shù)元素的CSS選擇器

varheader=document.querySelector('#header');//有id="header"的元素varnavItems=

document.querySelectorAll('#main-navli');//有id=main-nav的元素中包含的li元素

querySelector演示在其他元素中選擇元素DOMAPI能用于選擇其他元素中的元素選擇帶有id="wrapper"的元素內所有的div所有方法能夠使用HTML元素特別是getElementById()varwrapper=document.getElementById('wrapper');vardivsInWrapper=wrapper.getElementsByTagName('div');選擇內部元素

演示節(jié)點列表節(jié)點列表節(jié)點列表是返回的集合，通過DOM選擇器方法：getElementsByTagName(tagName)getElementsByName(name)getElementsByClassName(className)querySelectorAll(selector)vardivs=document.getElementsByTagName('div');varqueryDivs=document.querySelectorAll('div');for(vari=0;i<divs.length;i++){//做一些事情用divs[i]…}節(jié)點列表(2)節(jié)點列表看起來像數(shù)組，但不是數(shù)組是帶有屬性的對象，與數(shù)組類似有l(wèi)ength和indexer遍歷數(shù)組用for-in循環(huán)：for(variindivs){console.log('divs['+i+']='+divs[i]);}//divs[0]=...//divs[1]=...//divs[length]=...//divs[item]=...節(jié)點列表演示靜態(tài)節(jié)點列表和動態(tài)節(jié)點列表靜態(tài)節(jié)點列表和動態(tài)節(jié)點列表有兩類節(jié)點列表getElementsBy…()返回動態(tài)節(jié)點列表querySelectorAll()返回靜態(tài)節(jié)點列表動態(tài)列表保有已選元素的蹤跡當DOM改變時可反應而靜態(tài)列表包含的元素，是執(zhí)行方法那一刻產生的（不隨DOM變化）牢記動態(tài)節(jié)點列表比常規(guī)數(shù)組要慢為了更好的性能，需要緩存它的長度

靜態(tài)和動態(tài)節(jié)點列表演示提問環(huán)節(jié)練習寫一個腳本，選擇在div元素中的所有的div節(jié)點創(chuàng)建函數(shù)使用querySelectorAll()創(chuàng)建函數(shù)使用getElemen

溫馨提示

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

評論

0/150

提交評論