DOM(三):querySelector和querySelectorAll
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'; }
相关推荐
liaoxuewu 2020-05-11
前端开发Kingcean 2020-07-08
nercon 2019-12-28
SIMONDOMAIN 2019-12-13
哈喽elements 2019-11-19
liaoxuewu 2019-11-03
切慕溪水 2019-11-03
xiaoge00 2019-10-26
duxd 2019-05-10
bistukey 2019-07-01
JackXue程序生涯 2019-07-01
JackXue程序生涯 2019-07-01
adeyi 2019-07-01
sunnylin 2019-06-30
LingPF 2019-06-28
jianqi 2019-06-28
莲开十月人思量 2019-06-28
云海梦尘 2014-02-24
Danielmumu 2013-11-04