在h5中，經(jīng)常需要修改某個元素節(jié)點的樣式，內(nèi)容等，如何找到對應(yīng)的元素，是首先要解決的問題。

getElementsByTagName方法

這個方法來返回頁面上所有包含tagName等于某個指定值的元素對象的集合，當(dāng)?shù)玫较鄳?yīng)的節(jié)點集合以后，就可以去訪問某個子節(jié)點。

var eles = document.getElementsByTagName('img')

節(jié)點對象在DOM中定義為Node對象，Node對象定義了一些屬性方法，如下：

getElementsById

根據(jù)綁定的id返回一個唯一的元素節(jié)點

var el = document.getElementById('myId');

getElementsByClassName

通過類名獲取相同class名的元素節(jié)點

var elems = document.getElementsByClassName('box');

querySelectorAll

返回頁面所有匹配css選擇器的元素節(jié)點對象集合

var elems = document.querySelectAll('.box');

querySelector

這個只會返回匹配選擇器的第一個元素節(jié)點對象，而querySelectorAll返回的是所有匹配的元素節(jié)點對象的集合。

2、處理屬性

對于元素節(jié)點，DOM提供了三個方法來處理其屬性。

getAttribute(name)：獲取某個屬性的值

var ele = document.getElementById('myBox');
ele.getAttribute('class'); //打印id名為myBox的類名

setAttribute(name,newValue)：設(shè)置某個屬性的值

var ele = document.getElementById('myBox');
ele.setAttribute('class','myStyle); 

removeAttribute(name)：移除某個屬性

var ele = document.getElementById('myBox');
ele.removeAttribute('class'); 

3、讀取和設(shè)置內(nèi)容

innerText

在通過innerText屬性操作元素所包含的文本內(nèi)容時，它會按照由淺入深的順序，將子文檔樹中所有文本拼接起來。

注意一點的是：在使用innerText和innerHTML為元素對象設(shè)置內(nèi)容時，會先將對象開始標(biāo)簽和結(jié)束標(biāo)簽之間的內(nèi)容全清空。

innerHTML

用于獲取標(biāo)簽對象起始和結(jié)束標(biāo)簽內(nèi)的代碼

var oDiv = document.getElementById('myId');
oDiv.innerHTML = `<img src='./img.png'>` //展示為一張圖片顯示出來

4、創(chuàng)建和操作元素節(jié)點

DOM元素節(jié)點還可以進(jìn)行一系列的增、刪、替換的操作。

創(chuàng)建新的dom元素節(jié)點

有幾種不同的方法去創(chuàng)建不同類型的節(jié)點

使用createElement、createTextNode、AppendChild

先創(chuàng)建div元素，然后創(chuàng)建一個新的節(jié)點p標(biāo)簽元素節(jié)點，然后將元素追加至div中

var oDiv = document.createElement('div');
oDiv.setAttribute('id','my-div');//設(shè)置id
var oP = document.createElement('p');
var oText = document.createTextNode('新增的文本');
oP.AppendChild(oText);
oDiv.AppendChild(oP);
document.body.AppendChild(oDiv); 

所有的DOM操作必須在頁面完全載入后才能進(jìn)行，當(dāng)頁面正在載入時，要向DOM插入相關(guān)節(jié)點是不可能的，因為DOM樹還沒有構(gòu)建完成。

5、動態(tài)的刪除元素節(jié)點

removeChild方法可以接受一個參數(shù)，代表要刪除的節(jié)點對象，返回值也是這個節(jié)點對象，動態(tài)的刪除節(jié)點時，需要利用parentNode的特性確保能夠訪問到它真正的父元素節(jié)點去刪！直接刪除是獲取不到那個元素的

var oDiv = document.getElementById('child');
oDiv.parentNode.removeChild(oDiv);

6、替換節(jié)點

如果想要將節(jié)點替換成一個新的節(jié)點，則需要使用replaceChild方法，replaceChild方法有兩個參數(shù)，被添加的節(jié)點對象和被替換的節(jié)點對象

var oList = document.getElementById('dataList');
var oLi = document.querySelector('#dataList li'); //返回的是第一個li元素
var nLi = document.createElement('li');
nLi.innetText('new Node');
oList.replaceChild(nLi,oLi);//第一個是被添加的對象，后面的是被替換掉的對象