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>