http://www.caniuse.com/#index
HTML5新特性的浏览器支持情况
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>选择器</title>
<script type="text/javascript">
window.onload=function(){
//var oDiv=document.querySelector(".box")
//oDiv.style.background='red';//只能改变div1的样式
// var oDiv=document.querySelectorAll(".box");
// alert(oDiv.length);//获取的一组值,要想改变每个元素样式就得用循环
// var oDiv=document.getElementsByClassName('box');//不加点
// alert(oDiv.length);//获取的一组值
var oDiv=document.getElementById('div3');
alert(oDiv.classList)//box1 box2 box3,类似与数组的对象
alert(oDiv.classList.length);//3
oDiv.classList.add('box4')//添加class名为box4
oDiv.classList.remove('box4')//删除class名为box4
}
</script>
</head>
<body>
<div id="div1" class=".box">div1</div>
<div class=".box">div2</div>
<div id="div3" class="box1 box2 box3">div3</div>
</body>
</html>
----------
<!--
querySelector():选择元素,类似于jQuery,元素名,ID名,类名,但只能选择一组中的第一个元素
getElementsByClassName():通过class名,不加点,获取一组值
classList:获取class列表属性
length:class的长度
add(): 添加class的方法
remove():删除class的方法
toggle():切换class的方法,括号里的class若存在则执行删除,如果不存在则执行添加
-->