[js] querySelector、querySelectorAll、getElementById。封装选择器
#
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<ul id='a'>
<li class='b'>0</li>
<li class='b'>1</li>
<li class='b'>2</li>
<li class='b'>3</li>
<li class='b'>4</li>
</ul>
<script>
//querySelector返回该元素后代元素中，第一个匹配选择器参数的后代元素。
//如果没有匹配项，则返回 null。否则，返回第一个匹配的元素。
//a与aa是一样的
var a = document.body.querySelector('#a');
console.log(a);
console.log(a.innerText);
var aa = document.body.querySelector('ul');
console.log(aa);
console.log(aa.innerText);
//b与bb是一样的
var b = document.body.querySelector('.b');
console.log(b);
console.log(b.innerText);
var bb = document.body.querySelector('li');
console.log(bb);
console.log(bb.innerText);
//querySelectorAll返回值是一个NodeList对象,所以不推荐使用 for...in去遍历它(会遍历出其他无关属性)
//想要在它身上使用数组方法,必须先把它转换为真正的数组.
var c = document.body.querySelectorAll('#a');
console.info(c);
console.info(c.innerText); //undefined
for (var i = 0; i < c.length; i++) {
console.info(c[i]);
}
//for...in除了nodelist还会遍历出其他信息
for (var k in c) {
console.warn(c[k]);
}
//var d = document.body.querySelectorAll('#a').querySelector('.b');//不能这样用
var e = document.getElementById("a").querySelector('.b');
console.log(e);
var f = document.getElementById("a").querySelectorAll('.b');
console.log(f);
var g = document.getElementById("a");
console.log(g);
var h = document.body.querySelector("#a");
console.log(h);
var i = document.body.querySelectorAll("#a");
console.log(i);
</script>
</body>
</html>
#
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style>
html,
body,
ul,
li {
margin: 0;
padding: 0;
border: 0;
list-style: none;
}
</style>
</head>
<body>
<ul>
<li class='branch bb'>1
<div>aaa</div>
</li>
<li class='aa'>2
<div>b</div>
</li>
<li class='aa'>3
<div>c</div>
</li>
<li class='aa'>4
<div>d</div>
</li>
</ul>
<ul>
<li class='branch bb'>1
<div>axx</div>
</li>
<li class='aa'>2
<div>b</div>
</li>
<li class='aa'>3
<div>c</div>
</li>
<li class='aa'>4
<div>d</div>
</li>
</ul>
<script>
var a = document.querySelectorAll('#trunk');
var b = document.querySelectorAll('.branch');
var c = document.querySelectorAll('.aa');
var d = document.querySelectorAll('li');
console.log(a);
console.warn(b);
console.log(c);
console.log(d);
var QM = (function() {
var $ = function(Selector, Action, Func, Bind) {
if (Action) {
var i = 0;
var picker = document.querySelectorAll(Selector);
if (Bind !== 'off') {
while (i < picker.length) {
picker[i].addEventListener(Action, Func);
++i;
}
} else {
while (i < picker.length) {
picker[i].removeEventListener(Action, Func);
++i;
}
}
} else {
return document.querySelectorAll(Selector)[0];
}
}
return $;
})();
// QM('#trunk', 'click', function() {
// console.log(this.innerHTML);
// });
// QM('.aa div', 'click', function() {
// console.log(this.innerHTML);
// });
QM('ul .bb div', 'click', function() {
console.log(this.innerHTML);
});
QM('.bb').innerHTML = 'fsdfj123';
(function($) {
$.c = 'plus';
$.d = function(v) {
console.log('xxoo', v);
}
})(QM);
console.log(QM.c);
QM.d('xx->');
</script>
</body>
</html>
#
var query = function(selector) { var reg = /^(#)?(\.)?(\w+)$/img; var regResult = reg.exec(selector); var result = []; //如果是id选择器 if(regResult[1]) { if(regResult[3]) { if(typeof document.querySelector === "function") { result.push(document.querySelector(regResult[3])); } else { result.push(document.getElementById(regResult[3])); } } } //如果是class选择器 else if(regResult[2]) { if(regResult[3]) { if(typeof document.getElementsByClassName === 'function') { var doms = document.getElementsByClassName(regResult[3]); if(doms) { result = converToArray(doms); } } //如果不支持getElementsByClassName函数 else { var allDoms = document.getElementsByTagName("*") ; for(var i = 0, len = allDoms.length; i < len; i++) { if(allDoms[i].className.search(new RegExp(regResult[2])) > -1) { result.push(allDoms[i]); } } } } } //如果是标签选择器 else if(regResult[3]) { var doms = document.getElementsByTagName(regResult[3].toLowerCase()); if(doms) { result = converToArray(doms); } } return result; } function converToArray(nodes){ var array = null; try{ array = Array.prototype.slice.call(nodes,0);//针对非IE浏览器 }catch(ex){ array = new Array(); for( var i = 0 ,len = nodes.length; i < len ; i++ ) { array.push(nodes[i]) } } return array; }
#
