javascript常用的选择器有getElementById()
getElementsByName()
getElementsByTagName()
getElementsByClassName()
querySelector()
querySelectorAll()
getElementById('id') :返回对指定ID的第一个对象的引用。
getElementsByName('name'):返回文档中name属性为name值的元素,因为name属性值不是唯一的,
所以查询到的结果有可能返回的是一个数组,而不是一个元素。
getElementsByTagName('tagname'):返回文档中指定标签的元素。
getElementsByClassName('className'):返回文档中所有类名为className的元素。
querySelector(selector):返回文档中匹配指定css选择器的第一个元素。
querySelector('.className')
querySelector('#id')
querySelector('[attributte]')
querySelector('tag')
层叠选择器:
elem = document.querySelector('body > div > form');
elem = document.querySelector('body > div > form.tsf.nj > div');
同辈元素选择器:
function sibilings(el){
//a是 el的同辈元素集合
var a=[];
var p= el.previousSibling;
while (p) {
if(p.nodeType === 1){
a.push(p);
}
p= p.previousSibling;
}
a.reverse();
var n= el.nextSibling;
while (n){
if(n.nodeType === 1){
a.push(n);
}
n= n.nextSibling;
}
return a;
}
brother_elements = sibilings(document.querySelector('target_dom'));
属性过滤选择器:
elem = document.querySelector('input[name=testInput]');
其他选择器:
elem = document.querySelector('input[name=testInput]').nextElementSibling;
querySelectorAll():返回文档中匹配指定css选择器的所有元素,返回类型为NodeList。
elem = document.querySelectorAll('div > h1');
返回的是div后直接跟一个h1标签的所有h1标签元素。