前端外刊评论 2018-04-09
querySelector()方法
querySelector()方法接收一个css选择符,返回与该模式匹配的第一个元素,如果没有找到匹配的元素,返回null。
//取得body元素 var body = document.querySelector('body'); //取得id为'myDiv'的元素 var myDiv = document.querySelector('#myDiv'); //取得类为'selected'的第一个元素 var selected = document.querySelector('.selected'); //取得类为'button'的第一个图像元素 var img = document.querySelector('img.button');
querySelectorAll()方法
querySelectorAll()方法接收的参数与querySelector()方法一样,都是一个css选择服,但返回的是所有匹配的元素而不仅仅是一个元素。
这个方法返回的是一个NodeList实例
//取得某<div>中的所有<em>元素(类似于getElementsByTagName('em')) var ems = document.getElementById('myDiv').querySelectorAll('em'); //取得类为'selected'的所有元素 var selecteds = document.querySelectorAll('.selected'); //取得所有<p>元素的所有<strong>元素 var strongs = document.querySelectorAll('p strong');
要取得返回的NodeList中的每一个元素,可以使用item()方法,也可以使用方括号语法
var i,len,strong; for(i=0; len=strongs.length; i<len; i++){ strong = strongs[i]; //或者strongs.item(i) strong.className = 'import'; }