// 取得div中所有em元素 var em = document.getElementById("test").querySelectorAll('em'); console.log(em); // NodeList console.log(em.length); // 4 // 第二种方式 也可以先使用querySelector var test = document.querySelector("#test"); var em2 = test.querySelectorAll('em'); console.log(em2); // NodeList console.log(em2.length); // 4 // 取得类为selected的所有元素 var selected = document.querySelectorAll('.selected'); console.log(selected); // <em>11111</em> // <em>22222</em> // 也可以通过以下的方式获得所有的em元素 var em = document.querySelectorAll('div em'); console.log(em); // NodeList console.log(em.length); // 4
要取得返回的NodeList中的每一个元素，可以使用item()方法，也可以使用方括号的语法；
var ems = document.querySelectorAll('#test em'); for(var i = 0, ilen = ems.length; i < ilen; i++) { console.log(ems[i]); // 取得每一项em console.log(ems.item(i)); // 取得每一项em }
浏览器支持程度：IE8+，firefox，chrome，safari3.1+，opera10+
3. matchesSelector()方法
这个方法接收一个参数，即css选择符，如果调用元素与该选择符匹配，返回true，否则，返回false；
如下代码：
console.log(document.body.webkitMatchesSelector("body")); // true
IE9+通过msMatchesSelector()支持该方法，Firefox3.6+通过mozMatchesSelector()支持该方法；safari5+和chrome通过webkitMatchesSelector()支持该方法；因此我们可以包装一个函数，如下代码：
function matchesSelector(element,selector) { if(element.MatchesSelector) { return element.MatchesSelector(selector); }else if(element.msMatchesSelector) { return element.msMatchesSelector(selector); }else if(element.webkitMatchesSelector) { return element.webkitMatchesSelector(selector); }else if(element.mozMatchesSelector) { return element.mozMatchesSelector(selector); }else { throw new Error("Not supported"); } } console.log(matchesSelector(document.body,'body')); // true var test = document.querySelector('#test'); console.log(matchesSelector(test,'#test')); // true
4. getElementsByClassName() 方法
该方法接收一个参数，即包含一个或者多个类名的字符串，返回带有指定类的所有元素的NodeList；传入多个类名时，类名的先后顺序不重要。
复制代码 代码如下:
<p>111</p>
<p>222</p>
<p>333</p>
console.log(document.getElementsByClassName("p1")); // 返回NodeList
支持getElementsByClassName()方法的浏览器有IE9+，firefox3+，safari3.1+,chrome和opera9.5+；
5. classList属性
如下代码：
<div>aaa</div>
我想删除aa这个类名的时候，以前需要如下写代码：
var div = document.getElementById("div"); // 首先，取得类名字符串并拆分成数组 var classNames = div.className.split(/\s+/); var pos = -1, i, len; for(i = 0,len = classNames.length; i < len; i+=1) { if(classNames[i] == 'aa') { pos = i; break; } } // 删除类名 classNames.splice(i,1); // 把剩下的类名拼成字符串并重新设置 div.className = classNames.join(" "); // <div>aaa</div>
但是现在HTML5新增了一种操作类名的方式，可以让操作更简单也更方便，那就是所有元素添加classList属性。这个classList属性是新集合类型DOMTokenList的实例；DOMTokenList有一个表示自己包含多少元素的length属性，而要取得每个元素可以使用item()方法，也可以使用中括号；
还有以下方法：
add(value)：将给定的字符串值添加到列表中。如果值已经存在，就不添加了。
contains(value)：表示列表中是否存在给定的值，如果存在则返回true，否则返回false。
remove(value)：从列表中删除给定的字符串。
toggle(value)：如果列表中已经存在给定的值，删除它；如果列表中没有给定的值，添加它。
现在我们可以来看看使用上面的方法的优点如下，我们可以来做个demo，代码如下：
<div>aaa</div>
JS如下：
var div = document.getElementById("div"); // 删除类名aa，如下方法即可 div.classList.remove("aa"); // html结构如下： <div>aaa</div> // 添加类名current，如下方法即可 div.classList.add("current"); // html结构变为如下 <div>aaa</div> // 切换aa类名 div.classList.toggle("aa"); // html结构变为如下 <div>aaa</div> // 确定元素是否包含类名； console.log(div.classList.contains("aa")); // true
支持classList属性的浏览器有IE10+，firefox3.6+和chrome
HTML5新增自定义数据属性
HTML5中规定可以为元素添加非标准的属性，但要添加前缀data-,比如如下代码：
<div data-appId="12345" data-myname="Nicholas"></div>