03javascript網(wǎng)頁編程-07-1002webapi3素材02dom對象模型簡稱DOM是W3C組織推薦處理可擴展標記語言HTML

目目s獲取元s事件基操作元節(jié)點操DOM DOMDOM 目目s獲取元s事件基操作元節(jié)點操ID根 ID使用 使用2 使用 2HTML5 2. //根據(jù)指定選擇器返回第一個元素對 2獲取body元11doucumnet.body返回body獲取html元1. Element//返回html元素對 目目s獲取元s事件基操作元節(jié)點操3事件源（誰事件類型（什么事件事件處理程序（做啥3案例：點擊按鈕彈出警示3案例分①獲取事件源（按鈕 事件（綁定事件）alert3實現(xiàn)代varbtnvarbtn btn.onclickfunction(33關 目目s獲取元s事件基操作元節(jié)點操容、屬性等。注意以下都是屬性 44案例：分時顯示不 ,顯示不同問候 4案例分 44案例：仿京東顯 4案例分 ③算法：利用一個flag變量，來判斷flag的值，如果是1就切換為文本框，flag設置為0，如果是0就切換為 4實現(xiàn)代41.1.JSfontSize、修改4 4案例分 4實現(xiàn)代varbtn=varbox

btn.onclick=function()4案例：循環(huán)精靈圖背4案例分①首先精靈 排列有規(guī)律 思路：利用for循環(huán)修改精 的背景位置background-④讓循環(huán)里面的i索引號*44就是每 4實現(xiàn)代varvarlisfor(vari=0;i<lis.length;i++)44就是每個li的背景yindex就是我們的yvarindex=i*}4案例：顯示隱藏文本框內4案例分析①首先表單需要2onfocus失去焦點1.1.注意4案例 框格式提示錯誤信 4案例分析6到16type、value、disabledtype、value、disabled操作表單元素操作元素操作元素是操作元素操作元操作元操作常見元素屬src、href、title、alt操作操作元素樣式作京東關 4給當前元素設置樣式（留 案例 換4案例分 ②給4個 算法：把當 4實現(xiàn)代1.varimgs2.forfor(vari=0;i<imgs.length;i++)}}}}4案例：表格隔行變4案例分①用到新的鼠標事件鼠標經(jīng)過onmouseover鼠標離開 案例：表單全選取消全選案例4案例分析讓下面所有復選框的checked屬性（選中狀態(tài)）4獲取屬性 獲取屬性值區(qū)別 element.getAttribute(‘屬性’);主要獲得自定義的屬性（標準）44.6設置屬性element.屬性=‘值 設置內置屬性值區(qū)別 設置內置屬性element.setAttribute(‘屬性’);（標準44.6移除屬4案例：tab欄切換（重點案例4案例分①Tab欄切換有2 ⑥當我們點擊44.7H5設置H5自定義屬比如<divdata-index=“1”></div>JS4.7H5獲取H5自定義屬兼容性獲取element.getAttribute(‘data-H5新增element.dataset.index或者 目目s獲取元s事件基操作元節(jié)點操利用DOM提供的方法獲取元 2.利用節(jié)點層級關系獲取元 .querySelector

5 HTMLDOM樹中的所有節(jié)點均可通過JavaScript進行 元素節(jié)點nodeType為屬性節(jié)點nodeType為nodeType為3（文本節(jié)點包含文字、空格、換行等）55父級節(jié)55.3子節(jié).for(vari=for(vari=0;i<ul.childNodes.length;i++)}}varul55.355.33.3.4.4.55.35.5. 6.6. 子節(jié)實際開發(fā)中，firstChild和lastChildfirsementChild和lasementChild又有兼容性問題，那么我們如何獲取第一個子元素節(jié)點或最后一個子元素節(jié)點呢？-5案例：下拉菜5案例分①導航欄里面的li都要有鼠標經(jīng)過效果，所以需要循 5實現(xiàn)代varlisnav.childrenvarlisnav.children得到4個小liforvari0ilis.lengthi++lis[i].onmouseover=function(){}lis[i].onmouseout=function(){}}55.3兄弟節(jié)1.1.2.2.3. 4.4.注意：這兩個方法有兼容性問題，IE9以上才支持。varel=whilevarel=while(el=el.nextSibling){if(el.nodeType===1){return}}}5 指定的51.1.。類似于里面的5案例：簡單版發(fā)布留言案5案例分 ②創(chuàng)建lili.innerHTML55案例：刪除留言案5案例分 javascript:void(0);或者5 5案例：動態(tài)生成表5案例分據(jù)。數(shù)據(jù)我們采取對象形式 ②所有的數(shù)據(jù)都是放到tbody5.8區(qū)()總結：不同瀏覽器下，innerHTML效率要比 emen