03javascript網(wǎng)頁(yè)編程07-1002webapi3素材01dom對(duì)象模型簡(jiǎn)稱(chēng)DOM是W3C組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言

目 DOM目DOM1.DOM1.DOM什么是 ObjectModel，簡(jiǎn)稱(chēng)DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)言（HTMLW3CDOMDOMDOM 表元素：頁(yè)面中的所有都是元素，DOM中使用element表DOM目 DOM目DOM2.2.ID根據(jù)名獲HTML52.2.ID使用 ementById()方法可以獲取帶有ID的元素對(duì)象 使用根據(jù)名獲使用 HTML5 //querySelector和querySelectorAll里面的選擇器需要加符號(hào),比如 獲取特殊元素11doucumnet.body返回body.Element返回html目 DOM目DOM3.1概JavaScript使我們有能力創(chuàng)建動(dòng)態(tài)頁(yè)面，而 是可以被JavaScript偵測(cè)到的行為。簡(jiǎn)單理解：觸發(fā)---響應(yīng)機(jī)制。網(wǎng)頁(yè)中的每個(gè)元素都可以產(chǎn)生某些可以觸發(fā)JavaScript的 3.2三要1.源（誰(shuí)2.類(lèi)型（什么（做啥①獲取源（按鈕②（綁 ），使用③編寫(xiě)處理程序，寫(xiě)一個(gè)函數(shù)彈出alert警示varvarbtn btn.onclickfunction(3.3執(zhí)行的步獲?。ń壎?.33.4分析三要關(guān)閉三要目 DOM目DOM4.4.JavaScriptDOMDOM容、屬性等。注意以下都是屬性從起始位置到終止位置的內(nèi)容,但它去除 ，同時(shí)空格和換行也會(huì)去 4.4.src、4.4.案例：分時(shí)顯示不 根據(jù)不同時(shí)間，頁(yè)面顯示不同，同時(shí)顯示不同的問(wèn)候語(yǔ)。如果上午時(shí)間打開(kāi)頁(yè)面，顯示上午好，顯示上午的。如果下午時(shí)間打開(kāi)頁(yè)面，顯示下午好，顯示下午的。如果晚上時(shí)間打開(kāi)頁(yè)面，顯示晚上好，顯示晚上的。4.4.②利用多分支語(yǔ)句來(lái)設(shè)置不同的③需要一個(gè)，并且根據(jù)時(shí)間修 ④需要一個(gè)div4.4.DOM4.4. 4.4.①思路：點(diǎn)擊眼睛按鈕， ②一個(gè)按鈕兩個(gè)狀態(tài)，點(diǎn)擊一次，切換為文本框，繼續(xù)點(diǎn)擊一次切換 ③算法：利用一個(gè)flag變量，來(lái)判斷flag的值，如果是1，flag0，果是0就切換 4.4.JS1.1.2.element.className注意JS里面的樣式采取駝峰命名法比如fontSize、JS修改style樣式操作，產(chǎn)生的是行內(nèi)樣式，CSS4.4.當(dāng)鼠標(biāo)點(diǎn) 4.4.①思路：利用樣式的顯示和隱藏完成， y:none隱藏元素 y:block顯示元②點(diǎn)擊按鈕，就讓這 即4.4.varvarbtn varbox //2. btn.onclick=function(){ y='none';4.4.for4.4.①首先精靈圖排列有規(guī)律②思路：利用for循環(huán)修改精 的背景位置background-④讓循環(huán)里面的i索引號(hào)*44就是每 4.4.varvarlisfor(vari=0;i<lis.length;i++)讓索引號(hào)乘以44就是每個(gè)li的背景y坐標(biāo)index就是我們的y坐標(biāo)varindex=i*44;lis[i].style.backgroundPosition='0-'+index+}4.4.4.4.①首先表單需要2個(gè) ，獲得焦點(diǎn)onfocus失去焦點(diǎn)JS1.1.2.element.className4.4.案例：框格式提示錯(cuò)誤信4.4.①首先判斷的是表單失去焦點(diǎn)③如果輸入不是6到16④因?yàn)槔锩孀兓瘶邮捷^多，我們采取classNamesrc、href、title、altsrc、href、title、alttype、value、disabled4.操作元素總結(jié)操作元素是DOM內(nèi)4.4.4.4.給當(dāng)前元素設(shè)置樣式（留 4.4.

4.4.①這個(gè)案例練習(xí)的是給一組元素②給4個(gè)小利用循 ③當(dāng)我們點(diǎn)擊了這 ④算法：把當(dāng) 的src路徑取過(guò)來(lái)，給body做為背景即1.varimgs2.for(vari=0;i<imgs.length;i++)imgs[i].onclick=function().body.style.backgroundImage='url('+this.src+}}4.4.4.4.①用到新的鼠標(biāo)鼠標(biāo)經(jīng)過(guò)onmouseover鼠標(biāo)離開(kāi)②思路：鼠標(biāo)經(jīng)過(guò)tr行，當(dāng)前的行變背景顏色，鼠標(biāo)離開(kāi)去掉當(dāng)前的背景顏③注意：第一行（thead里面的行）tbody4.4.①全選和取消全選做法：讓下面所有復(fù)選框的checked屬性（選中狀態(tài)）②下面復(fù)選框需要全部選中，上面全選才能選中做法：給下面所有復(fù)選框綁定點(diǎn)擊 要循環(huán)查看下面所有的復(fù)選框是否有沒(méi)選中的，如果有一個(gè)沒(méi)選中的，上面全選就不選中。 element.getAttribute(‘屬性’);主要獲得自定義的屬性（標(biāo)準(zhǔn)）我們程序員自定義的屬性4.6element.屬性=‘值 element.setAttribute(‘屬性’);主要設(shè)置自定義的屬性（標(biāo)準(zhǔn)4.4.4.64.4.案例：tab（重點(diǎn)案例4.4.①Tab欄切換有2②上的模塊選項(xiàng)卡，點(diǎn)擊某一個(gè)，當(dāng)前這一個(gè)底色會(huì)是紅色，其余不變（排他思想） ⑤思路：給上面的tab_list里面的所有小li添加自定義屬性，屬性值從0開(kāi)始編號(hào)⑥當(dāng)我們點(diǎn)擊tab_list里面的某個(gè)小li，讓tab_con里面對(duì)應(yīng)序號(hào)的內(nèi)容顯示，其余隱藏（4.7H5’)比如<divdata-index=“1”></div>或者使用JS設(shè)置element.setAttribute(‘data-index’,2)4.4.4.7H5兼容性獲取element.getAttribute(‘data-H5element.dataset.index或者element.dataset[‘index’]ie11目 DOM目DOM5.5.利用DOM提供的方法獲取元 2.利用節(jié)點(diǎn)層級(jí)關(guān)系獲取元 .querySelector等

5.5. 、屬性、文本、注釋等），在DOM中，節(jié)點(diǎn)使用node來(lái)表示HTMLDOM樹(shù)中的所有節(jié)點(diǎn)均可通過(guò)JavaScript進(jìn) ，所有HTML元素（節(jié)點(diǎn)）均可被修改，也可5.5.元素節(jié)點(diǎn)nodeType為屬性節(jié)點(diǎn)nodeType為文本節(jié)點(diǎn)nodeType為3（文本節(jié)點(diǎn)包含文字、空格、換行等）5.5.利用5.5.利用5.3varvarul.for(vari=0;i<ul.childNodes.length;i++){if(ul.childNodes[i].nodeType==1){ul.childNodes[i}}5.5.5.32.（這個(gè)是我們重點(diǎn)掌握的）5.5.5.32.3.3.4.4.5.32.5.5. ementChild返回第一個(gè)子元素節(jié)點(diǎn)，找不到則返回null6.6. 注意：這兩個(gè)方法有兼容性問(wèn)題，IE9以上才支持。5.5.5.3實(shí)際開(kāi)發(fā)中，firstChild和lastChild包含其他節(jié)點(diǎn)，操作不方便，而 -5.5.5.5.①導(dǎo)航欄里面的li都要有鼠標(biāo)經(jīng)過(guò)效果，所以需要循 ②原理：當(dāng)鼠標(biāo)經(jīng)過(guò)li里面的第二個(gè)孩子ul顯示，當(dāng)鼠標(biāo)離開(kāi)，則ul隱varvarnavvarlisnav.children得到4個(gè)小for(vari=0;i<lis.length;i++){lis[i].onmouseover=function(){ y='block';}lis[i].onmouseout=function(){ y='none';}}5.5.5.31.1.2.2.33.3. 4.4.注意：這兩個(gè)方法有兼容性問(wèn)題，IE9以上才支持。3functiongetNex ementSibling(element)functiongetNex ementSibling(element){varel=element;while(el=el.nextSibling){if(el.nodeType===1){return}}return}5.5..createElement(方法創(chuàng)建由tagName指定的HTML元素。因?yàn)檫@些元素原先不存在，1.1.)after2.2.node.insertBefore(child指定元素node.insertBefore(方法將一個(gè)節(jié)點(diǎn)添加到父節(jié)點(diǎn)的指定子節(jié)點(diǎn)前面。類(lèi)似于CSS里面的5.5.5.5.①思路：點(diǎn)擊按鈕之后，就動(dòng)態(tài)創(chuàng)建一個(gè)li，添加到ul里面②創(chuàng)建lili.innerHTMLappendChild5.5.node.removeChild(DOM5.5.5.5.①當(dāng)我們把文本域里面的值賦值給li②需要把所有的獲取過(guò)來(lái)，當(dāng)我們點(diǎn)擊當(dāng)前 ③跳轉(zhuǎn)需要添加javascript:void(0);或者5.5.5.6節(jié)點(diǎn)(克隆節(jié)點(diǎn)) 如果括號(hào)參數(shù)為true，則是深度拷貝， 5.5.①因?yàn)槔锩娴膶W(xué)生數(shù)據(jù)都是動(dòng)態(tài)的，我們需要js動(dòng)態(tài)生成。這里我們模擬數(shù)據(jù)，自己定義好數(shù)據(jù)。數(shù)據(jù)我們采取對(duì)象形式 ②所有的數(shù)據(jù)都是放到tbody③因?yàn)樾泻芏啵覀冃枰h(huán)創(chuàng)建多個(gè)行（對(duì)應(yīng)多少人④每個(gè)行里面又有很多單元格（對(duì)應(yīng)里面的數(shù)據(jù)），我們還繼續(xù)使用循環(huán)創(chuàng)建多個(gè)單元格，5.8innerHTML是將內(nèi)容寫(xiě)入某個(gè)DOM()總結(jié)：不同瀏覽器下，innerHTML效率要比 ement6DOM6DOM文檔對(duì)象模型 ObjectModel，簡(jiǎn)稱(chēng)DOM），是W3C組織推薦的處理可擴(kuò)展標(biāo)記語(yǔ)W3CDOMDOM對(duì)于HTML，dom使得html形成一棵dom為文檔對(duì)象模型6DOM6DOM 6DOM6DOM 增6DOM6DOM 刪 改修改元素