querySelector, елемент підключення підстановки?


133

Чи є спосіб зрівняти ім'я елемента підстановки за допомогою querySelectorабо querySelectorAll? Я бачу підтримку підстановних знаків у запитах атрибутів, але не для самих елементів.

Документ XML, який я намагаюся розібрати, - це в основному плоский список властивостей, і мені потрібно знайти елементи, які мають певні рядки у своїх назвах.

Я розумію, що XML-документ, ймовірно, потребує реструктуризації, якщо мені це потрібно, але це просто не відбудеться.

Будь-яке рішення, крім повернення до використання очевидно застарілого XPath (IE9 скинув його) є прийнятним.


Під "ім'ям" ви маєте на увазі ім'я тега?
kennytm

1
@ Відповідь JaredMcAteer дуже гідна, щоб її прийняли як відповідь. Будь ласка, врахуйте.
RBT

Відповіді:


347

[id^='someId']відповідатиме всім ідентифікаторам, починаючи з someId.

[id$='someId']відповідатиме всім ідентифікаторам, що закінчуються someId.

[id*='someId']відповідатиме всім ідентифікаторам, що містять someId.

Якщо ви шукаєте для nameатрибута просто замінити idз name.

Якщо ви говорите про назву елемента тегу, я не вважаю, що існує спосіб querySelector


4
Дякую, я мав на увазі ім'я тегу.
Ерік Андерссон

хм, я не можу зробити document.querySelectorAll ("div. [id $ = 'foo"] ")
SuperUberDuper

4
Період там, мабуть, псує його document.querySelectorAll("div[id$='foo']")IE8 має лише часткову підтримку QSA, я думаю, що вони підтримують лише селектори CSS2.1, тому ці селектори не працюватимуть в IE8, але IE9 + буде працювати.
JaredMcAteer

Ця відповідь врятувала мені життя! Дякую!!
Менас

28

Я заплутався / задумувався над однокласниками, що включали querySelector () і закінчився тут, і маю можливу відповідь на питання OP, використовуючи імена тегів & querySelector (), з кредитами до @JaredMcAteer для відповіді на моє запитання, так само як у RegEx збігається з querySelector () у ванільному Javascript

Сподіваючись, що наступне буде корисним та відповідатиме потребам ОП чи всім іншим:

// 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"]');

Тоді ми можемо, наприклад, отримати матеріали src тощо.

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

12

Встановіть tagName як явний атрибут:

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

Мені це знадобилося для документа XML, в якому закінчуються вкладені теги _Sequence. Дивіться відповідь JaredMcAteer для отримання більш детальної інформації.

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

Я не сказав, що це буде досить :) PS: Я рекомендував би використовувати tag_nameнад tagName, тому ви не наштовхуєтесь на перешкоди, читаючи "невідомі атрибути DOM", створені комп'ютером.


8

Я щойно написав цей короткий сценарій; здається, працює.

/**
 * 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"

Об'єкт, що повертається querySelectorAll, не обов'язково підтримує фільтр у всіх браузерах (так як це не завжди звичайний масив javascript). Не забудьте перевірити це твердження у виробництві перед створенням сценарію (якщо сценарій генерується динамічно), або за допомогою операторів стану.
Дмитро

Дуже приємна відповідь ... Це було завершення матчу, який я знайшов у своєму питанні. Я працюю зі спеціальними елементами та такими функціями, як ця, все ще ручна робота.
codepleb

-1

Існує спосіб сказати, що це не так. Просто зробіть не те, чого ніколи не буде. Хороший довідник css: https://www.w3schools.com/cssref/css_selectors.asp, який показує: не селектор, як описано нижче:

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

Ось приклад: дів, за яким щось (окрім тегу az)

div > :not(z){
 border:1px solid pink;
}
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.