Почему непосредственно атрибуты игнорируются document.querySelector()?

Question

Недавно я обнаружил принципиальное различие между двумя способами установки пользовательских атрибутов DOM в Javascript. Разница заключается в том, как API-переключатели HTML5 взаимодействуют с этими атрибутами (например, в документе document.querySelector() и друзьях).

<button id="b3">View</button> 

<script> 
document.getElementById('b3').shape = 'square'; 
console.log(document.querySelector('*[shape]')); // FAIL: returns null 

document.getElementById('b3').setAttribute('shape','square'); 
console.log(document.querySelector('*[shape]')); // WORKS: returns element 
</script> 

Так в основном, если применить атрибуты к элементу без использования .setAttribute(), то вы не можете позже выбрать элемент по имени атрибута.

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

• http://www.w3.org/TR/css3-selectors/#attribute-selectors
• http://www.w3.org/TR/selectors-api/

Стандарт API селекторы не по умолчанию:

Селекторы позволяют представлять атрибуты элемента. Если в качестве выражения для сопоставления с элементом используется селектор , следует выбрать атрибуты выбора , чтобы соответствовать элементу, если этот элемент имеет атрибут, соответствующий атрибуту, представленному селектором атрибутов .

Весь атрибут сопоставления правило, кажется, сводится к «если элемент имеет атрибут», и вы бы думать что someElement.someAttribute = something будет соответствовать критериям «имеющие атрибут», но по какой-то причине он не ,

Мой вопрос в основном, почему разница? Является ли это фактически частью стандартного или просто идентичного варианта реализации во всех основных браузерах (IE11, FF38 и Chrome 43)?

Answer 1

Причина очень проста - getElementById и все те рода возвращает объект Element (см функции: http://www.w3schools.com/jsref/met_document_getelementbyid.asp)

Что означает, что вы установите свойство shape на объекте. Затем вы пытаетесь сделать селектор запросов, но вы не изменили запрошенный html. Это разные вещи.