Analisis komprehensif bagi pemilih lanjutan javascript querySelector dan querySelectorAll_Basic pengetahuan

querySelector dan querySelectorSemua kaedah ditakrifkan dalam spesifikasi API Pemilih W3C. Fungsi mereka adalah untuk mudah mencari elemen yang ditentukan dalam dokumen mengikut spesifikasi pemilih CSS.

Pada masa ini, hampir semua pelayar utama menyokongnya. Termasuk IE8 (termasuk) dan ke atas, Firefox, Chrome, Safari, Opera.

querySelector dan querySelectorAll mentakrifkan antara muka berikut dalam spesifikasi:

module dom { [Supplemental, NoInterfaceObject] interface NodeSelector { Element querySelector(in DOMString selectors); NodeList querySelectorAll(in DOMString selectors); }; Document implements NodeSelector; DocumentFragment implements NodeSelector; Element implements NodeSelector; };

Daripada definisi antara muka, anda boleh melihat bahawa Dokumen, DocumentFragment dan Elemen semuanya melaksanakan antara muka NodeSelector. Maksudnya, ketiga-tiga jenis elemen ini semuanya mempunyai dua kaedah. Parameter querySelector dan querySelectorAll mestilah rentetan yang mematuhi pemilih css. Perbezaannya ialah querySelector mengembalikan objek, dan querySelectorAll mengembalikan koleksi (NodeList).

Dapatkan elemen yang saya atribut D diuji pada halaman:

1 document.getElementById("test");
2 document.querySelector("#test");
3 document.querySelectorAll("#test")[0];

Dapatkan elemen yang atribut kelasnya ialah "merah" pada halaman:

document.getElementsByClassName('red')
document.querySelector('.red')
document.querySelectorAll('.red')

ps:

Tetapi perlu diambil perhatian bahawa elemen dalam koleksi nodeList yang dikembalikan adalah bukan langsung Jika anda ingin membezakan antara hasil pulangan masa nyata dan bukan masa nyata, sila lihat contoh berikut:

 <div id="container">
   <div></div>
   <div></div>
 </div>

//首先选取页面中id为container的元素
container=document.getElementById('#container');
console.log(container.childNodes.length)//结果为2
//然后通过代码为其添加一个子元素
container.appendChild(document.createElement('div'));
//这个元素不但添加到页面了，这里的变量container也自动更新了
console.log(container.childNodes.length)//结果为3

Melalui contoh di atas, anda boleh memahami dengan baik elemen apakah kemas kini itu dalam masa nyata. document.getElementById mengembalikan hasil masa nyata Selepas menambah sub-elemen padanya, bilangan semua sub-elemen diperoleh semula, yang telah dikemas kini daripada yang asal 2 hingga 3 (ini tidak mengambil kira bahawa sesetengah pelayar. seperti Chrome akan kosong juga diselesaikan ke nod kanak-kanak).

Perbezaan antara Element.querySelector dan Element.querySelectorAll dan jQuery(element).find(selector) selector:

<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="http://www.jb51.net/">脚本之家</a></div> 
<pid="bar">111</p> 
<script> 
var d1 = document.getElementById('test1'), 
obj1 = d1.querySelector('div a'), 
obj2 = d1.querySelectorAll('div a'); 
obj3 = $(d1).find('div a'); 
console.log(obj1)//<a href="http://www.jb51.net/">脚本之家</a> 
console.log(obj2.length)//1 
console.log(obj3)//null 
</script> 
</SPAN> 

querySelectorAll Cari semua nod dalam dokumen yang sepadan dengan perihalan pemilih, termasuk Elemen itu sendiri

jQuery(elemen).find(selector) Cari semua nod dalam dokumen yang sepadan dengan penerangan pemilih, tidak termasuk Elemen itu sendiri

Analisis komprehensif javascript advanced selectors querySelector dan querySelectorAll adalah semua kandungan yang dikongsi oleh editor, saya harap ia boleh memberi anda rujukan, dan saya harap anda akan menyokong Script Home.