新H5中DOM对象多了一个classList属性，是一个数组
- add 添加一个新的类名
- remove 删除一个的类名
- contains 判断是否包含一个指定的类名
- toggle 切换一个class element.toggle('class-name',[add_or_remove])
- toggle函数的第二个参数true为添加 false删除
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>class-list</title> <link rel="stylesheet" href="bootstrap.min.css"/> </head> <body> <header class="container"> <h1 class="page-header">Element.classList</h1> </header> <div class="container"> <nav class="navbar navbar-default"> <a href="#" class="navbar-brand">Itcast</a> <ul class="nav navbar-nav"> <li><a href="#">Home</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav> </div> <script> var liElements = document.querySelectorAll('.nav > li'); //alert(liElement.length); for(var i=0; i<liElements.length; i++){ liElements[i].addEventListener('mouseover',function(e){ for(var i=0; i<liElements.length;i++){ liElements.item(i).classList.remove('active'); } this.classList.add('active'); e.stopPropagation();//阻止冒泡,该方法将停止事件的传播,阻止它被分派到其他 Document 节点 e.preventDefault();//方法阻止元素发生默认的行为 }) } </script> </body> </html>