Selectors API — простой синтаксис доступа к DOM-элементам

Selectors API — это та самая вещь, которой нам очень не хватало, без которой веб-программирование, по крайней мере на клиентской стороне, превращается в нудное и однообразное занятие. Не верите? Вспомните о таких «изящных» конструкциях, как document. getElementByld, document. getElementByClassName или, не дай бог, document. all. element_name — вам не надоело все это писать? Нет, я, конечно, знаю про возможности селекторов библиотеки jQuery, но она не является частью HTML, а это, в свою очередь, означает, что никакие стандарты и спецификации на такую важную вещь, как доступ к элементу HTML, по селектору не распространяются.

Selectors API предлагает выход из этой ситуации в виде простого и мощного механизма получения доступа к DOM-объектам, схожего с псевдоселекторами css или той же jQuery.

API состоит всего из двух методов. Первый — querySelector, получает в качестве аргумента строку с любым корректным CSS (или jQuery) — селектором и возвращает соответствующий элемент:

Console. log(document. querySelector(‘#placeholder’)).innerHTML; document. querySelectorAll(‘p’).style. border = "1px solid green"; var lastElement = document. querySelectorAll("body:last-child") ;

Второй метод — querySelectorAll — отличается только тем, что возвращает массив DOM-элементов:

Var myBlocks = document. querySelectorAll(".myClass"); for(var i=0;i< myBlocks. lenght; i++){ myBlocks. style. document. activeElement

}