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() //滑鼠離開懸浮時觸發操作

操作樣式

tmp.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)
 
}