document.querySelector()方法
参考链接：
Document.querySelectorAll() - Web APIs | MDN
HTML5中类jQuery选择器querySelector的高级使用 document.querySelectorAll.bind(document); - surfaces - 博客园
HTML DOM querySelectorAll() 方法 | 菜鸟教程
document.querySelectorAll遍历&函数借用 - 简书
1 常用的三种获取元素的js方式
1 document.getElementById("");
2 document.getElementsByClassName();
3 document.getElementsByTagName();
var doc=document;
var box=doc.getElementById("box");
var li=box.getElementsByTagName("li");
var surfaces=box.getElementsByClassName("surfaces");querySelector()可以直接加点击事件，而querySelectorAll()不能直接加点击事件
2 querySelector()
var node = document.querySelector("#lover"); // 获取文档中的第一个id=lover的元素
var node = document.querySelector(".lover"); // 获取文档中的第一个class="lover"的元素
var node = document.querySelector("p.lover"); // 获取class=“lover” 的第一个p元素
var node = document.querySelector("a[target]");// 获取第一个带target属性的a元素
var element = document.querySelector('.foo,.bar');//返回带有foo或者bar样式类的首个元素
document.querySelector(\"body\").style=""; // 移除style属性
document.querySelector("h2,h3").style.backgroundColor = "blue";//为文档的第一个h2元素添加背景颜色，但是，如果文档中<h3>元素位于<h2>元素之前，<h3>元素将会被设置指定的背景颜色，总结，多元素选择时，哪个先匹配就是谁咯，只有一个被选中。
querySelector() 方法仅仅返回匹配指定选择器的第一个元素。
3 querySelectorAll
elementList = document.querySelectorAll(selectors);
- elementList 是一个静态的 NodeList 类型的对象。
- selectors 是一个由逗号连接的包含一个或多个 CSS 选择器的字符串。
查找文档中共包含 "target" 属性的 <a> 标签，并为其设置边框:
var x = document.querySelectorAll("a[target]");
var i;
for (i = 0; i < x.length; i++) {
x[i].style.border = "10px solid red";
}
-------------------------------------------
let t0 = window.performance.now();
let li = document.querySelectorAll('li');
console.log("li 的数量", li.length);
for (let i = 0; i < li.length; i++) {
li[i].textContent = i;
}
let t1 = window.performance.now();
console.log("耗时" + (t1 - t0) + "毫秒");- 当页面中出现多个相同class标签(或者多个相同标签(比如多个div))时，如果你需要返回所有的元素，请使用 querySelectorAll() 方法替代。
- 该方法返回所有满足条件的元素，结果是个nodeList集合。查找规则与前面所述一样。 ----> querySelectorAll 得到一个伪数组 DOM。
- ParentNode.querySelectorAll()的结果是NodeList数组，但是又不是一般的js数组（Array），所以也不能直接调用Array的方法。
demo
----------------------------------------------------------------------------------------------------------------------
<div id="box">
<ul>
<li data-href='http://www.qq.com'>tagname 111</li>
<liclass="surfaces">这是clase 222</li>
<liclass="surfaces">这是class333</li>
<liclass="surfaces"data-href='http://www.baidu.com'>这是class444</li>
</ul>
</div><br>
document.getElementById("box").addEventListener("click",function(){
varattr=document.querySelectorAll('[data-href]');
console.log(attr);
},!1);------------------------------------------------------------------------------------------------------------
<input type="checkbox" name="gender" value="male" checked> <input type="checkbox" name="gender" value="female"> <div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div> <div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div> <div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div> <input type="text" placeholder="我是占位符"> <input type="text" placeholder="我是占位符" value="我的 value 遮盖了占位符">let target = document.querySelector('input[type="checkbox"]:checked'); console.log('使用 querySelector 查找 ', target) let fr = document.querySelector('div:lang(fr)'); console.log('使用 querySelector 查找 ', fr); let pl = document.querySelector('input:placeholder-shown'); console.log('使用 querySelector 查找 ', pl);
document.querySelector.bind和document.querySelectorAll.bind
<div id="box">
<ul>
<li >tagname 111</li>
<liclass="surfaces">这是clase 222</li>
<liclass="surfaces">这是class333</li>
<liclass="surfaces">这是class444</li>
</ul>
</div>
--------------------------------------------------------------------------
varquery_id=query('#box');//dom id
varquery_class=query('.surfaces');// dom class
varquery_tagname=query('li')//dom 标签
console.log('query'+query_id.innerHTML);//
console.log('query'+query_class.innerHTML);第一个 222
console.log('query'+query_tagname.innerHTML);第一个 222
--------------------------------------------------------------------------1 var query = document.querySelector.bind(document); //单个的
varquery_id=query('#box');//dom id
varquery_class=query('.surfaces');// dom class
varquery_tagname=query('li')//dom 标签
query_id.addEventListener('click',function(){
console.log('click_query_id'+this.innerHTML);//'click surfaces 2222
});
query_class.addEventListener('click',function(){
var e=e||window.event;
console.log('click_query_class'+this.innerHTML); //'click surfaces 2222
e.stopPropagation();
});
query_tagname.addEventListener('click',function(e){
vare=e||window.event;
console.log('click_query_tagname'+this.innerHTML);//'click surfaces 2222
e.stopPropagation();
});
--------------------------------------------------------------------------2 var $=queryAll = document.querySelectorAll.bind(document); //集合
var $id=$('#box'); //id var $class=$('.lione'); //class var $tagname=$('li'); //tagName console.log('queryAll'+$id[0].innerHTML); console.log('queryAll'+$class[0].innerHTML); //222 console.log('queryAll'+$tagname[0].innerHTML); //111
$id[0].addEventListener('click',function(){
console.log('click_queryAll'+this.innerHTML);//'click surfaces 2222
});
$class[0].addEventListener('click',function(e){
console.log('click_$class'+this.innerHTML); //'click surfaces 2222
e.stopPropagation();
});
$tagname[0].addEventListener('click',function(e){
console.log('click_$tagname'+this.innerHTML);//'click surfaces 2222
e.stopPropagation();
});
--------------------------------------------------------------------------这种方式性能不会太好，不推荐 var fromId = document.getElementById.bind(document); var fromClass = document.getElementsByClassName.bind(document); var fromTag = document.getElementsByTagName.bind(document); var fromId_box=fromId('box'); var fromClass_surfaces=fromClass('surfaces'); var fromTag_li=fromTag('li'); console.log('fromId'+fromId_box.innerHTML); console.log('fromClass'+fromClass_surfaces[0].innerHTML); //222 console.log('fromTag'+fromTag_li[0].innerHTML);//111
--------------------------------------------------------------------------基于 querySelectorAll的事件绑定，从 Array.prototype中剽窃了 forEach 方法来完成遍历
Array.prototype.forEach.call(document.querySelectorAll('.surfaces'), function(el){
el.addEventListener('click', someFunction);
});//通过 bind() 遍历DOM节点的函数。。
var unboundForEach = Array.prototype.forEach,
forEach = Function.prototype.call.bind(unboundForEach);
forEach(document.querySelectorAll('.surfaces'), function (el) {
el.addEventListener('click', someFunction);
});
--------------------------------------------------------------------------关于bind()的用法， bind()与call(),apply()用法 类似，都是改变当前的this指针。这里简单阐述做个示例；
document.getElementById("box").addEventListener("click",function(){
varself=this;//缓存 this 对象
setTimeout(function(){
self.style.borderColor='red';
},500)
},false);
document.getElementById("box").addEventListener("click",function(){
setTimeout(function(){
this.style.borderColor='red';
}.bind(this), 500);//通过bind 传入 this
},false);
--------------------------------------------------------------------------var $ = document.querySelectorAll.bind(document); Element.prototype.on = Element.prototype.addEventListener; $('#somelink')[0].on('touchstart', handleTouch);
//我们将绑定事件在 完善一下
Element.prototype.on = Element.prototype.addEventListener;
queryAll('#box')[0].on('click',function(){
setTimeout(function(){
this.style.borderColor='blue';
console.log('on事件 边框变蓝色');
}.bind(this), 500);//通过bind 传入 this
//on 类似 jquery
//document.getElementById("box").on("click",function(){
});
document.querySelectorAll遍历&函数借用
正确的使用方式
借助Array的forEach方法进行遍历，对每个Element进行事件绑定
Array方法的使用
这里以forEach函数为例
- 正常方式
[1,2,3].forEach(function(item,index,input){ console.log(item); });
- 其他函数借用
Array.prototype.forEach.call([1,2,3],function(item,index,input){ console.log(item); });或者
[].forEach.call([1,2,3],function(item,index,input){ console.log(item); });querySelectorAll的forEach遍历
[].forEach.call(color_btn,function(item,index,input){ item.addEventListener('click',()=>(alert("text"))); });或者是
Array.prototype.forEach.call(color_btn,function(item,index,input){ item.addEventListener('click',function(){ alert("text"); }); });
旨在为数千万中国开发者提供一个无缝且高效的云端环境，以支持学习、使用和贡献开源项目。
更多推荐
27
0- 0
已为社区贡献6条内容
所有评论(0)