标签：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> </head> <body> <p>querySelector：选择一个元素，可以是class、name、标签、id等;eg:document.querySelector("[class=xxx]")</p> <p>querySelectorAll：获取多个元素，返回数组，可以是class、name，标签、id等；eg:document.querySelector("#text")</p> <p>getElementsByClassName:通过class获取元素，返回数组。</p> <h1>class列表属性</h1> <p>length : class的长度</p> <p>add() : 添加class方法</p> <p>remove() : 删除class方法</p> <p>toggle() : 切换class方法,如果存在class值就remove，如果不存在就add</p> <p></p> <p></p> <p></p> <p></p> <form> <div id="text" class="clsText class1 class2"/> <div id="text1" class="clsText"/> </form> <script type="text/javascript"> window.onload = function(){ //querySelector表示获取一个，如果有多个时，只会对第一个生效，例如多个class、name时只会对第一个生效 /*var oText = document.querySelector("#text"); oText.style.height="20px"; oText.style.width="100%"; oText.style.background="red";*/ //querySelectorAll获取全部 以数组的形式 /*var querySAll = document.querySelectorAll(".clsText"); alert(querySAll.length);//弹出长度2*/ //getElementsByClassName获取class元素 /*var getClssName = document.getElementsByClassName("clsText"); alert(getClssName.classList); alert(getClssName.length);//弹出长度2*/ //classList 获取class属性值 var clsList = document.getElementById("text"); //alert(clsList.classList);//弹出 clsText class1 class2 //alert(clsList.classList.lenngth);//弹出3 clsList.classList.add("class3");//调试页面class值为：clsText class1 class2 class3 clsList.classList.remove("clsText");//调试页面class的值为：class1 class2 class3 clsList.classList.toggle("clsText");//class值为：class1 class2 class3 clsText }; </script> </body> </html>
未完待续.............
标签：
原文地址：http://www.cnblogs.com/1246447850qqcom/p/4830811.html
