DOM（Document Object Model 文件物件模型）

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

一、獲取標籤（獲取標籤的方法在頁面點選F12，或者右擊頁面點選檢查，在console框裡進行編寫）

1）直接獲取標籤

document.getElementById('i1'); //獲取id為i1的標籤

document.getElementsByTagName('div'); //根據標籤名稱獲得標籤陣列

document.getElementsByClassName('c1'); //根據class屬性獲取標籤的陣列

document.getElementsByName('dsx'); //根據name屬性獲取標籤陣列 2）間接獲取標籤（var是用來定義一個變數） var tmp=document.getElementById('h-test'); tmp.parentElement; // 父節點標籤元素 tmp.children; //所有子標籤 tmp .firstElementChild; //第一個子標籤元素 tmp .lastElementChild; // 最後一個子標籤元素

tmp .nextElementSibling; //下一個兄弟標籤元素 tmp .previousElementSibling; //上一個兄弟標籤元素   二、操作標籤（與獲取標籤一樣的操作位置） 1）文字內容操作 a.innerHTML與innerText tmp.innerText; // 獲取標籤中的文字內容 tmp.innerText='老鐵雙擊666'; //更改標籤內文字內容 tmp.innerHTML; // 獲取標籤中的所有內容，包含html程式碼

tmp.innerHTML = '<a href="http://www.imdsx.cn">大師兄</a>' // innerHTML 可以將含有HTML程式碼的字串變為標籤 b.input、textarea標籤 tmp.value; //獲取input、textarea引數 tmp.value = '內容' // 對input、textarea的內容進行賦值 c.select標籤 tmp.value; //獲取select標籤的value引數 tmp.value = '選項' // 修改select選項 tmp.selectedIndex; // 獲取select標籤的選項下標 tmp.selectedIndex = 1 // 通過下標更改select的選項 2）操作樣式 tmp.className = 'c1'; // 更改標籤class屬性 只能有一個class屬性 tmp.classList;// 獲取樣式陣列 tmp.classList.add('aaa'); //新增樣式 陣列 tmp.classList.remove('aaa'); //刪除樣式 tmp.checked; //獲取checkbox的狀態 true為勾選 3）操作單獨樣式 style.xxx //操作樣式的粒度更加細化，操作單個樣式屬性，相當於在標籤中增加一個style屬性 style.backgroundColor // 例:在css中樣式可以通過【-】進行連線，在JavaScript中，所有的【-】都被去掉，【-】後面的第一個字元大寫 4）操作屬性 setAttribute(key,value) //設定屬性，在標籤中新增屬性或自定義屬性 removeAttribute(key) //刪除屬性，在標籤中刪除指定屬性 attributes //獲取標籤的所有屬性   三、建立標籤 1）物件方式建立標籤 createElement(tagName) //通過DOM建立一個標籤物件  appendChild(tagObj) //在父級標籤內新增一個子標籤物件 2）字串方式建立標籤 insertAdjacentHTML(where, tagStr) //父級標籤內或外新增一個子、兄標籤 beforeBegin //插入到獲取到標籤的前面 afterBegin //插入到獲取到標籤的子標籤的前面 beforeEnd //插入到獲取到標籤的子標籤的後面 afterEnd //插入到獲取到標籤的後面   四、事件（在python的編輯器中編寫程式碼）

1）直接繫結

直接在標籤中繫結事件

例：<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);">//showValueD是定義的一個函式，函式的實現程式碼在寫在下面

      / / function是標明定義一個函式，接收this，通過查詢父級，兄弟，子級來定位操作的元素       function showValueD(this) {                   alert (ths.previousElementSibling.value);//函式中的每一行需要用分號隔開，alert是指彈出一個彈框                                                 }

2）間接繫結

通過JavaScript獲取到需要繫結事件的標籤，obj.onclick=function(){} 繫結事件

onfocus() //獲取游標時做操作

onblur() //失去焦點做操作

onclick() //單擊時做操作

ondblclick() //雙擊時操作

onmouseover() //滑鼠懸浮觸發操作

onmouseout() //滑鼠離開懸浮時觸發操作

例：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)//console.log跟python中的print是一個意思                                                      }, false)

五、其他操作描述

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