新H5中DOM对象多了一个classList属性，是一个数组
<!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>
原文：http://www.cnblogs.com/suxiaoxia/p/6848640.html