一小波DOM騷操做：querySelectorAll和classList

雖然如今MVVM框架帶來了諸多便利，但你真的就再也不須要操做DOM了嗎？本文經過幾個小例子來介紹一些DOM操做的小技巧

場景一：querySelectorAll

陸小雞最近遇到了這樣一個問題，他引用了一個第三方的表格組件，他引入組件的代碼以下：

<jj-table id="mytable"></jj-table>

組件渲染後的結構大體以下：

<div class="table-wrapper" id="mytable">
    <div class="table-header">
      <table></table>
    </div>
    <div class="table-body">
      <table>
        <tbody class="table-tbody"></tbody>
      </table>
    </div>
  </div>

爲了獲取tbody這個dom節點，他寫下了以下代碼：

var el = document.getElementsByClassName('table-tbody')[0]
console.log(el)

控制檯打印一看，發現有點不對啊，原來這個頁面中還引入了一個表格，這種方式獲得的是頁面中的第一個表格，並非這個表格。因此，他改進了下代碼：

var mytable = document.getElementById('mytable')
var el = mytable.getElementsByClassName('table-tbody')[0]

這下終於正確了。可是，善於思考的小雞同窗又想了想，若是層級更復雜，那寫起來不是很麻煩嗎？能不能像css選擇器同樣選擇DOM節點呢？最終，他寫下了以下代碼：

var el = document.querySelectorAll('#mytable tbody')[0]

有人可能會說，jQuery不就是經過CSS選擇符查詢DOM文檔取得元素的引用嗎？沒錯！但經過querySelectorAll方法，原生也能夠作到。
注意：還有一個相似的方法querySelector()，其接收的參數與 querySelectorAll()方法同樣，都是一個 CSS 選擇符，但返回的是一個元素而不是全部匹配的元素（一個 NodeList 的實例）。

場景二：classList

張大鵬最近遇到了這樣一個問題，須要找到表格中各行的序列號，將其存入ids數組中，其中的序列號已經寫入到每行的class類名中，以下：

<table>
    <tbody class="table-tbody">
      <tr class="table-row 1">
        <td>td1</td>
      </tr>
      <tr class="table-row 4">
        <td>td4</td>
      </tr>
      <tr class="table-row 2">
        <td>td2</td>
      </tr>
      <tr class="table-row 3">
        <td>td3</td>
      </tr>
    </tbody>
  </table>

他略加思索，寫出了以下代碼：

var el = document.querySelectorAll('.table-tbody')[0]
var rows = el.rows
var ids = []
for (var i = 0; i < rows.length; i++) {
  let classNames = rows[i].className
  ids.push(classNames.split(' ')[1])
}
console.log(ids)

看上去是不錯啊，可是感受獲取類名有點麻煩，而且還得進行一次類型轉換才能取到序列號，能不能一步到位呢？
經過查閱，他寫出了以下代碼：

var el = document.querySelectorAll('.table-tbody')[0]
var rows = el.rows
var ids = []
for (var i = 0; i < rows.length; i++) {
  ids.push(rows[i].classList[1])
}
console.log(ids)

HTML5 新增了一種操做類名的方式，可讓操做更簡單也更安全，那就是爲全部元素添加classList 屬性。這個新類型還定義以下方法：

• add(value)：將給定的字符串值添加到列表中。若是值已經存在，就不添加了。
• contains(value)：表示列表中是否存在給定的值，若是存在則返回 true，不然返回 false。
• remove(value)：從列表中刪除給定的字符串。
• toggle(value)：若是列表中已經存在給定的值，刪除它；若是列表中沒有給定的值，添加它。