Почему следующий код javaScript не возвращает никаких элементов?

Question

Почему следующий код javaScript не возвращает никаких элементов?

Вот HTML код:

<div class="misc" data-custom-test="test1" data-custom-test="test2"></div> 

Вот код JavaScript:

var elements = document.querySelectorAll('[data-custom-test="' + "test2" + '"]'); 
alert(elements.length); 

Спасибо.

Answer 1

Когда я запускаю эксперименты в jsFiddle в Chrome, document.querySelectorAll() найдет совпадение только для данного элемента, если атрибут FIRST с заданным именем атрибута соответствует вашему селектору. Или сказал, иначе, если у вас несколько определений одного и того же атрибута, document.querySelectorAll() не находит совпадений ни в одном из них, кроме первого.

Я не тестировал другие браузеры, чтобы посмотреть, как они себя ведут в этом отношении, но этого достаточно, чтобы сказать вам, что у вас есть проблема с использованием нескольких определений того же имени атрибута, что и вы.

Кроме того, в документе Section 8.1.2.3 about Attributes in the HTML5 spec here четко указано, что вы не должны иметь дублирующий атрибут в одном и том же теге.

Там никогда не должно быть два или более атрибутов на одной и той же начальной метки, чьи имена являются ASCII регистронезависимым подходят друг к другу.

---

Я не знаю, что проблема на самом деле вы пытаетесь решить здесь, но обычная практика заключается в использовании нескольких значений на том же определении атрибута путем разделения нескольких значений с разделителем, как точка с запятой а затем вы можете использовать оператор *= в вашем селекторе найти атрибуты, которые содержат подстроку, как это:

<div class="misc" data-custom-test="test1;test2"></div> 

var elements = document.querySelectorAll('[data-custom-test*="' + "test2" + '"]'); 
console.log(elements.length); 

Answer 2

вопрос заключается в том, что элементы не могут иметь повторяющиеся атрибуты (see a similar question about it). Из W3C link предоставленной в ответ Jukka К. Korpela в:

Там никогда не должно быть два или более атрибутов на одной и той же начальной метки, чьи имена являются ASCII регистронезависимым подходят друг к другу.

Результат может отличаться от браузера для браузера, но кажется, что в целом второй атрибут игнорируется напрямую. Например, то же самое происходит, если у вас есть повторяющиеся style атрибуты:

<div style="color:red;" style="color:blue;">Is it red or blue?</div>