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

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

5.5. 、屬性、文本、注釋等），在DOM中，節(jié)點使用node來表示HTMLDOM樹中的所有節(jié)點均可通過JavaScript進 ，所有HTML元素（節(jié)點）均可被修改，也可5.5.元素節(jié)點nodeType為屬性節(jié)點nodeType為文本節(jié)點nodeType為3（文本節(jié)點包含文字、空格、換行等）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.（這個是我們重點掌握的）5.5.5.32.3.3.4.4.5.32.5.5. ementChild返回第一個子元素節(jié)點，找不到則返回null6.6. 注意：這兩個方法有兼容性問題，IE9以上才支持。5.5.5.3實際開發(fā)中，firstChild和lastChild包含其他節(jié)點，操作不方便，而 -5.5.5.5.①導航欄里面的li都要有鼠標經過效果，所以需要循 ②原理：當鼠標經過li里面的第二個孩子ul顯示，當鼠標離開，則ul隱varvarnavvarlisnav.children得到4個小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.注意：這兩個方法有兼容性問題，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元素。因為這些元素原先不存在，1.1.)after2.2.node.insertBefore(child指定元素node.insertBefore(方法將一個節(jié)點添加到父節(jié)點的指定子節(jié)點前面。類似于CSS里面的5.5.5.5.①思路：點擊按鈕之后，就動態(tài)創(chuàng)建一個li，添加到ul里面②創(chuàng)建lili.innerHTMLappendChild5.5.node.removeChild(DOM5.5.5.5.①當我們把文本域里面的值賦值給li②需要把所有的獲取過來，當我們點擊當前 ③跳轉需要添加javascript:void(0);或者5.5.5.6節(jié)點(克隆節(jié)點) 如果括號參數為true，則是深度拷貝， 5.5.①因為里面的學生數據都是動態(tài)的，我們需要js動態(tài)生成。這里我們模擬數據，自己定義好數據。數據我們采取對象形式 ②所有的數據都是放到tbody③因為行很多，我們需要循環(huán)創(chuàng)建多個行（對應多少人④每個行里面又有很多單元格（對應里面的數據），我們還繼續(xù)使用循環(huán)創(chuàng)建多個單元格，5.8innerHTML是將內容寫入某個DOM()總結：不同瀏覽器下，innerHTML效率要比 ement6DOM6DOM文檔對象模型 ObjectModel，簡稱DOM），是W3C組織推薦的處理可擴展標記語W3CDOMDOM對于HTML，dom使得html形成一棵dom為文檔對象模型6DOM6DOM 6DOM6DOM 增6DOM6DOM 刪 改修改元素