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> ????????<li?class="surfaces">這是clase? 222</li> ????????<li?class="surfaces">這是class?333</li> ????????<li?class="surfaces"??data-href='http://www.baidu.com'>這是class?444</li> ?????</ul> ????????? </div><br> |
| document.getElementById("box").addEventListener("click",function(){ ????var??attr=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>
????????<li?class="surfaces">這是clase? 222</li>
????????<li?class="surfaces">這是class?333</li>
????????<li?class="surfaces">這是class?444</li>
?????</ul>
?????????
</div>
--------------------------------------------------------------------------
var?query_id=query('#box');? ? ? ? ?//dom id
var?query_class=query('.surfaces');???// dom class
var?query_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);?? //單個的
var?query_id=query('#box');????//dom id
var?query_class=query('.surfaces');???// dom class
var?query_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){
???var?e=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(){
????var?self=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函數為例
- 正常方式
- 其他函數借用
或者
[].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");}); });?
總結
以上是生活随笔為你收集整理的document.querySelector()方法的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 自监督：对比学习contrastive
- 下一篇： 二次函数三点式