DOM操作

主要內容： 一些常用的DOM操作：查詢元素、建立元素並給元素新增/刪除屬性、新增/刪除元素以及很常用的classList 方法。

查詢元素常見方法

• 查詢元素常見方法

getElementById()

返回匹配指定ID屬性的元素節點。如果沒有發現匹配的節點，則返回null。

getElementsByClassName()

getElementsByClassName方法返回一個類似陣列的物件（HTMLCollection型別的物件），包括了所有class名字元合指定條件的元素（搜尋範圍包括本身），元素的變化實時反映在返回結果中。這個方法不僅可以在document物件上呼叫，也可以在任何元素節點上呼叫。
getElementsByClassName方法的引數，可以是多個空格分隔的class名字，返回同時具有這些節點的元素。

getElementsByTagName()

getElementsByTagName方法返回所有指定標籤的元素（搜尋範圍包括本身）。返回值是一個HTMLCollection物件，也就是說，搜尋結果是一個動態集合，任何元素的變化都會實時反映在返回的集合中。這個方法不僅可以在document物件上呼叫，也可以在任何元素節點上呼叫。

getElementsByName()

getElementsByName方法用於選擇擁有name屬性的HTML元素，比如form、img、frame、embed和object，返回一個NodeList格式的物件，不會實時反映元素的變化。

• ES5的元素選擇方法 ：

querySelector()

querySelector方法返回匹配指定的CSS選擇器的元素節點。如果有多個節點滿足匹配條件，則返回第一個匹配的節點。如果沒有發現匹配的節點，則返回null。
querySelector方法無法選中CSS偽元素。

querySelectorAll()

querySelectorAll方法返回匹配指定的CSS選擇器的所有節點，返回的是NodeList型別的物件。NodeList物件不是動態集合，所以元素節點的變化無法實時反映在返回結果中。
querySelectorAll方法的引數，可以是逗號分隔的多個CSS選擇器，返回所有匹配其中一個選擇器的元素。

建立元素並給元素新增/刪除屬性

• document.createElement() 可以建立元素 。
  createElement方法的引數為元素的標籤名，即元素節點的tagName屬性。如果傳入大寫的標籤名，會被轉為小寫。如果引數帶有尖括號（即<和>）或者是null，會報錯。
• element .setAttribute(name, value) 方法可以給元素設定屬性。
  setAttribute 實際上完成了兩項操作： 先建立這個屬性，然後設定它的值；如果setAttribute 用在一個本身就有這個屬性的元素節點上，這個屬性的值就會被覆蓋掉。該方法會將其屬性名稱（attribute name）引數小寫化。 setAttribute做出的修改不會反映在文件本身的原始碼裡。
• element.removeAttribute(attrName) 用於刪除元素屬性。

具體操作可以看下面的例子 ：

<div id="test">
    <a href="">my link</a>
    <h1 id="title">my title</h1>
</div>

<script>
    var newImg = document.createElement("img");  //建立一個新的img標籤
    var newDiv = document.getElementById("test"); // 獲取頁面中id 為test 的元素
    newDiv.appendChild(newImg) ;  // 將新的img標籤插入到id 為test的元素（此處為div）
    newImg.setAttribute("src","https://i.loli.net/2018/03/03/5a9a51803c9d1.jpg")  //為新建的img標籤增加src屬性
    newImg.setAttribute("alt","貓咪")
    newImg.removeAttribute("alt")   // 刪除img 的alt屬性
</script>

給頁面元素新增/刪除子元素

• appendChild() 和 insertBefore() 都可以給頁面元素新增子元素
• removeChild()可以刪除頁面元素下的子元素

<div id="ct">
    <h1 id="remove">h1</h1>
</div>
<script>
    var container = document.getElementById("ct"); // 先定位父節點
    var insertedElement = document.createElement("nav");  
    container.insertBefore(insertedElement, container.firstChild); // 在h1前面新增我們剛剛建立的元素nav
    var appendedElement = document.createElement("p");  
    container.appendChild(appendedElement); // 在div的子元素列表末尾新增我們建立好的元素P
    var removedElement = document.getElementById("remove"); // 找到我們想要刪除的元素
    container.removeChild(removedElement)  // 刪除掉我們剛剛找到的元素 。最後我們可以在控制檯看到div中只剩下nav和p標籤
</script>

element.classList 方法

方法	描述
element.classList.add( String [, String] )	新增指定的類值。如果這些類已經存在於元素的屬性中，那麼它們將被忽略
element.classList.remove(String [,String])	刪除指定的類值
element.classList.contains(String)	檢查元素的類屬性中是否存在指定的類值
element.classList.toggle( String [, force] )	新增/刪除切換