show classlist 點擊 ext tee strip previous 組合 mod

DOM（Document Object Model 文檔對象模型）

一個web頁面的展示，是由html標簽組合成的一個頁面，dom對象實際就是將html標簽轉換成了一個文檔對象。可以通過dom對象中js提供的方法，找到html的各個標簽。通過找到標簽就可以操作標簽使頁面動起來，讓頁面動起來。

獲取標簽

// 直接獲取標簽

document.getElementById(‘i1‘); //獲取id為i1的標簽 document.getElementsByTagName(‘div‘); //根據標簽名稱獲得標簽數組 document.getElementsByClassName(‘c1‘); //根據class屬性獲取標簽的數組

document.getElementsByName(‘dsx‘); //根據name屬性獲取標簽數組 // 間接獲取標簽 var tmp=document.getElementById(‘h-test‘); tmp.parentElement; // 父節點標簽元素 tmp.children; //所有子標簽 tmp.firstElementChild; //第一個子標簽元素 tmp.lastElementChild; // 最後一個子標簽元素 tmp.nextElementSibling; //下一個兄弟標簽元素 tmp.previousElementSibling; //上一個兄弟標簽元素

操作標簽

一、文本內容操作

innerHTML與innerText

tmp.innerText; // 獲取標簽中的文本內容 tmp.innerText=‘老鐵雙擊666‘; //更改標簽內文本內容 tmp.innerHTML; // 獲取標簽中的所有內容，包含html代碼 tmp.innerHTML = ‘<a href="http://www.imdsx.cn">大師兄</a>‘ // innerHTML 可以將含有HTML代碼的字符串變為標簽 input、textarea標簽 tmp.value; //獲取input、textarea參數 tmp.value = ‘內容‘ // 對input、textarea的內容進行賦值

select標簽 tmp.value; //獲取select標簽的value參數 tmp.value = ‘選項‘ // 修改select選項 tmp.selectedIndex; // 獲取select標簽的選項下標 tmp.selectedIndex = 1 // 通過下標更改select的選項

事件

直接綁定

直接在標簽中綁定事件

間接綁定

通過JavaScript獲取到需要綁定事件的標簽，obj.onclick=function(){} 綁定事件

直接綁定

<input type="button" value="提交" style="float:left;margin-top: 16px" ondblclick="showValueD();"> //this代指當前這個操作的標簽 <input type="button" value="提交" style="float:left;margin-top: 16px" ondblclick="showValueD(this);"> // function接收this，通過查找父級，兄弟，子級來定位操作的元素 function showValueD(ths) { alert(ths.previousElementSibling.value); } 間接綁定 var obj = document.getElementById(‘onmouse‘); obj.onmouseover = function () { obj.style.background = ‘red‘; }; // 間接綁定的this代指，getElementById找到的這個標簽 var obj = document.getElementById(‘onmouse‘); obj.onmouseout = function () { this.style.background = ‘‘; } //裝逼綁定 支持同一個操作執行不同的兩段代碼 var obj = document.getElementById(‘onmouse‘); obj.addEventListener(‘click‘, function () { console.log(111) }, false) onfocus() //獲取光標時做操作 onblur() //失去焦點做操作 onclick() //單擊時做操作 ondblclick() //雙擊時操作 onmouseover() //鼠標懸浮觸發操作 onmouseout() //鼠標離開懸浮時觸發操作

操作樣式

mp.className = ‘c1‘; // 更改標簽class屬性 只能有一個class屬性

tmp.classList;// 獲取樣式數組 tmp.classList.add(‘aaa‘); //添加樣式 數組 tmp.classList.remove(‘aaa‘); //刪除樣式 tmp.checked; //獲取checkbox的狀態 true為勾選 操作單獨樣式 style.xxx //操作樣式的粒度更加細化，操作單個樣式屬性，相當於在標簽中增加一個style屬性 style.backgroundColor // 例:在css中樣式可以通過【-】進行連接，在JavaScript中，所有的【-】都被去掉，【-】後面的第一個字符大寫 操作屬性 setAttribute(key,value) //設置屬性，在標簽中添加屬性或自定義屬性 removeAttribute(key) //刪除屬性，在標簽中刪除指定屬性 attributes //獲取標簽的所有屬性

創建標簽

對象方式創建標簽

createElement(tagName) //通過DOM創建一個標簽對象

appendChild(tagObj) //在父級標簽內添加一個子標簽對象 字符串方式創建標簽 insertAdjacentHTML(where, tagStr) //父級標簽內或外添加一個子、兄標簽 beforeBegin //插入到獲取到標簽的前面 afterBegin //插入到獲取到標簽的子標簽的前面 beforeEnd //插入到獲取到標簽的子標簽的後面 afterEnd //插入到獲取到標簽的後面 其他操作 console.log(msg) //打印數據 alert() //彈框提示 confirm() //確認彈框，返回true or false location.href //獲取當前的url location.href = ‘http://www.imdsx.cn‘ //重定向 location.reload() //刷新 location.href = location.href //刷新

定時器

setInterval(function, time) //設置定時器，每隔time時間就執行一次

clearInterval(intervalObj) //清除定時器 function timeInterval() { var setInt = setInterval(function () { console.log(1); //執行一次就結束定時任務 clearInterval(setInt) }, 1000) } setTimeout(function, time) //設置定時器，頁面加載完成後，time時間後,執行function,只執行一次 clearTimeout(timeoutObj) //等待過程中 清除定時器 function timeOutInterval() { var setTime = setTimeout(function () { console.log(‘點擊操作後，兩秒後提示文案‘) }, 2000); // 等的過程中，清除定時器 clearTimeout(setTime) }

HTML基礎之DOM操作