html5新的选择器

html5新包含的内容与兼容性: www.caniuse.com/#index

新的选择器：

  querySelector

  querySelectorAll

  getElementsByClassName

<script>
//  document.getElementById()
//  document.getElementsByTagName()

---- html5 ----
window.onload = function() {
  // querySelector 获取第一个符合条件的元素 通过'css写法的形式'获取元素
  var oDiv = document.querySelector('#div1'); // ['#div1', '.div', 'div', '[title=hello]', ...] --- 基本常用css选择器写法都支持
  // 类似querySelector 获取符合条件的所有元素, 返回值为数组形式。 
   var oDiv = document.querySelectorAll('#div1'); // ...同querySelector。
  oDiv.style.backgroundColor = red;
}

window.onload = function() {
   // 选中class值为box的元素 数组形式 --- 只能选中具有class属性的标签
   var oDiv = document.getElementsByClassName('box');
   oDiv.style.backgroundColor = red;
}
</script>

获取class列表属性

  classList

   - length：class的长度

   - add()：添加class方法

   - remove()：删除class方法

   - toggle()：切换class方法

<script>
  var oDiv = document.getElementById('div1');
  oDiv.classList // 类似于数组的对象
    oDiv.classList.length // 数组长度--元素具有的class个数
    oDiv.classList.add('active') // 添加名为.active的class样式,不影响原有的class样式
   oDiv.classList.remove('active') // 添加名为.active的class样式,不影响原有的class样式
   oDiv.classList.toggle('active') // 如果元素具有该class样式,删除该class样式,反之,则添加该样式。
</script>