虽然如今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)：假如列表中已存在给定的值，删除它；假如列表中没有给定的值，增加它。