querySelector, совпадение подстановочного элемента?

134

Есть ли способ сопоставить имя элемента с подстановочным знаком, используя querySelector или querySelectorAll? Я вижу поддержку подстановочных знаков в запросах атрибутов, но не для самих элементов.

XML-документ, который я пытаюсь проанализировать, в основном представляет собой плоский список свойств, и мне нужно найти элементы, в именах которых есть определенные строки.

Я понимаю, что XML-документ, вероятно, нуждается в реструктуризации, если мне это нужно, но этого просто не произойдет.

Приемлемо любое решение, за исключением возврата к явно устаревшему XPath (IE9 отказался от него).

Эрик Андерссон
источник
Под "именем" вы подразумеваете имя тега?
kennytm 03
1
Ответ @ JaredMcAteer очень достоин того, чтобы его приняли в качестве ответа. Пожалуйста примите к сведению.
RBT

Ответы:

348

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

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

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

Если вы ищете nameатрибут, просто замените его idна name.

Если вы говорите о имени тега элемента, я не верю, что есть способ использовать querySelector

JaredMcAteer
источник
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

Надеемся, что следующее будет полезно и соответствует потребностям OP или всем остальным:

// 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);
//> (...)
StephaneAG
источник
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_nameover 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"
cruzanmo
источник
объект, возвращаемый querySelectorAll, не обязательно поддерживает фильтр во всех браузерах (так как это не всегда обычный массив javascript). Обязательно проверьте это утверждение в производственной среде, либо до создания сценария (если сценарий создается динамически), либо с использованием операторов условия.
Дмитрий
Очень хороший ответ ... Это было последнее совпадение, которое я нашел для своей проблемы. Я работаю с настраиваемыми элементами, и такие функции, как эта, к сожалению, все еще выполняются вручную.
codepleb
-1

Есть способ сказать, что нет. Просто сделай не то, чего никогда не будет. Хорошая ссылка на селектор css: https://www.w3schools.com/cssref/css_selectors.asp, который показывает селектор: not следующим образом:

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

Вот пример: за div следует что-то (что угодно, кроме тега az)

div > :not(z){
 border:1px solid pink;
}
Стив Ллойд
источник