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

下載本文檔

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

文檔簡介

1-文檔對(duì)象模型

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

使用預(yù)定義的元素集合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通過標(biāo)簽名通過名稱

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

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

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

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

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

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

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

演示節(jié)點(diǎn)列表節(jié)點(diǎn)列表節(jié)點(diǎn)列表是返回的集合，通過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é)點(diǎn)列表(2)節(jié)點(diǎn)列表看起來像數(shù)組，但不是數(shù)組是帶有屬性的對(duì)象，與數(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é)點(diǎn)列表演示靜態(tài)節(jié)點(diǎn)列表和動(dòng)態(tài)節(jié)點(diǎn)列表靜態(tài)節(jié)點(diǎn)列表和動(dòng)態(tài)節(jié)點(diǎn)列表有兩類節(jié)點(diǎn)列表getElementsBy…()返回動(dòng)態(tài)節(jié)點(diǎn)列表querySelectorAll()返回靜態(tài)節(jié)點(diǎn)列表動(dòng)態(tài)列表保有已選元素的蹤跡當(dāng)DOM改變時(shí)可反應(yīng)而靜態(tài)列表包含的元素，是執(zhí)行方法那一刻產(chǎn)生的（不隨DOM變化）牢記動(dòng)態(tài)節(jié)點(diǎn)列表比常規(guī)數(shù)組要慢為了更好的性能，需要緩存它的長度

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

溫馨提示

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

評(píng)論

0/150

提交評(píng)論