querySelector, kecocokan elemen wildcard?

134

Apakah ada cara untuk melakukan pencocokan nama elemen elemen wildcard menggunakan querySelectoratau querySelectorAll? Saya melihat dukungan untuk wildcard dalam permintaan atribut tetapi tidak untuk elemen itu sendiri.

Dokumen XML yang saya coba uraikan pada dasarnya adalah daftar properti yang datar dan saya perlu menemukan elemen yang memiliki string tertentu dalam namanya.

Saya menyadari dokumen XML mungkin membutuhkan restrukturisasi jika saya membutuhkan ini tetapi itu tidak akan terjadi.

Solusi apa pun kecuali kembali menggunakan XPath yang tampaknya sudah usang (IE9 menjatuhkannya) dapat diterima.

Erik Andersson
sumber
Dengan "nama" maksud Anda nama tag?
kennytm
1
Jawaban @ JaredMcAteer sangat layak untuk diterima sebagai jawaban. Tolong pertimbangkan.
RBT

Jawaban:

348

[id^='someId']akan cocok dengan semua id yang dimulai dengan someId.

[id$='someId']akan cocok dengan semua id yang diakhiri dengan someId.

[id*='someId']akan cocok dengan semua id yang mengandung someId.

Jika Anda sedang mencari nameatribut hanya mengganti iddengan name.

Jika Anda berbicara tentang nama tag elemen, saya tidak yakin ada cara menggunakan querySelector

JaredMcAteer
sumber
4
Terima kasih, maksud saya nama tag.
Erik Andersson
hmm saya tidak bisa melakukan document.querySelectorAll ("div. [id $ = 'foo']")
SuperUberDuper
4
Masa di sana mungkin mengacaukannya document.querySelectorAll("div[id$='foo']")IE8 hanya memiliki dukungan QSA parsial, saya pikir mereka hanya mendukung penyeleksi CSS2.1, jadi penyeleksi ini tidak akan berfungsi di IE8, tetapi IE9 + akan berfungsi.
JaredMcAteer
Jawaban ini menyelamatkan hidupku! Terima kasih!!
Menas
28

Saya mengotak-atik satu kalimat yang melibatkan querySelector () & berakhir di sini, & punya kemungkinan jawaban untuk pertanyaan OP menggunakan tag name & querySelector (), dengan kredit ke @JaredMcAteer untuk menjawab pertanyaan SAYA, alias punya RegEx seperti cocok dengan querySelector () di vanilla Javascript

Berharap yang berikut ini akan berguna & sesuai dengan kebutuhan OP atau yang lainnya:

// basically, of before:
var youtubeDiv = document.querySelector('iframe[src="http://www.youtube.com/embed/Jk5lTqQzoKA"]')

// after     
var youtubeDiv = document.querySelector('iframe[src^="http://www.youtube.com"]');
// or even, for my needs
var youtubeDiv = document.querySelector('iframe[src*="youtube"]');

Kemudian, kita bisa, misalnya, mendapatkan barang-barang src, dll ...

console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)
StephaneAG
sumber
12

Tetapkan tagName sebagai atribut eksplisit:

for(var i=0,els=document.querySelectorAll('*'); i<els.length;
          els[i].setAttribute('tagName',els[i++].tagName) );

Saya membutuhkan ini sendiri, untuk Dokumen XML, dengan Nested Tags berakhir pada _Sequence. Lihat jawaban JaredMcAteer untuk lebih jelasnya.

document.querySelectorAll('[tagName$="_Sequence"]')

Saya tidak mengatakan itu akan cukup :) PS: Saya akan merekomendasikan untuk menggunakan tag_namelebih dari tagName, sehingga Anda tidak mengalami gangguan saat membaca 'komputer dihasilkan', atribut DOM implisit.

Lorenz Lo Sauer
sumber
8

Saya baru saja menulis naskah pendek ini; sepertinya berhasil.

/**
 * Find all the elements with a tagName that matches.
 * @param {RegExp} regEx  regular expression to match against tagName
 * @returns {Array}       elements in the DOM that match
 */
function getAllTagMatches(regEx) {
  return Array.prototype.slice.call(document.querySelectorAll('*')).filter(function (el) { 
    return el.tagName.match(regEx);
  });
}
getAllTagMatches(/^di/i); // Returns an array of all elements that begin with "di", eg "div"
cruzanmo
sumber
objek yang dikembalikan oleh querySelectorAll tidak selalu mendukung filter pada semua browser (karena tidak selalu merupakan array javascript biasa). Pastikan untuk memeriksa pernyataan ini dalam produksi, baik sebelum skrip dihasilkan (jika skrip dihasilkan secara dinamis), atau menggunakan pernyataan kondisi.
Dmitry
Jawaban yang sangat bagus ... Ini adalah pertandingan penutup yang saya temukan untuk masalah saya. Saya bekerja dengan elemen khusus dan fitur seperti ini masih merupakan pekerjaan manual, sayangnya.
codepleb
-1

Ada cara dengan mengatakan apa yang bukan. Buat saja bukan sesuatu yang tidak akan pernah terjadi. Referensi pemilih css yang baik: https://www.w3schools.com/cssref/css_selectors.asp yang menunjukkan: bukan pemilih sebagai berikut:

:not(selector)  :not(p) Selects every element that is not a <p> element

Berikut ini sebuah contoh: div diikuti oleh sesuatu (apa pun kecuali tag az)

div > :not(z){
 border:1px solid pink;
}
Steve Lloyd
sumber