JavaScript селекторы

JavaScript, как и CSS, обладает функционалом, позволяющим обращаться к HTML элементам для преобразования контента страниц. В CSS это достигается путём написания селекторов. В JavaScript существует несколько способов организации данного функционала, и вот один из них:

var primaryHeadings = document.getElementsByTagName('h1');

Данный код извлекает все заголовки h1 и, грубо говоря, помещает их в переменную primaryHeadings. Если на странице присутствует несколько заголовков, то все они будут помещены в массив.

var ou812 = document.getElementById('eddie');

Данный код выбирает элемент с id = “eddie”.

var guitars = document.getElementsByClassName('axes');

Также мы можем выбирать элементы по названию их классов.

Добавим немного Sizzle

Различного рода JavaScript фрэймворки, предоставляют собственные возможности составления селекторов. Одним из самых успешных был Sizzle, который в последствии преобразился в jQuery. В отличие от своего потомка, Sizzle мог только работать с DOM и манипулировать им. Если вам не нужен весь остальной функционал jQuery, то и сегодня вы можете скачать Sizzle как отдельную библиотеку.

С развитием данных библиотек написание селекторов значительно сократилось и преобразилось:

Данный код извлекает html элемент с id=”dave” и позволяет работать с его css стилями.

Sizzle - это не единственная JavaScript библиотека для манипуляции html кодом. Также существуют и другие варианты, к примеру rangy. Однако, по моему мнению, всё выше перечисленное устарело перед тем, что ждёт вас дальше в этой статье.

Новый уровень JavaScript

Многие разработчики настолько часто начали пользоваться jQuery, что даже не заметили кардинальных изменений в самом JavaScript.

“JavaScript Selector API” - это официальная часть спецификации HTML5, она может быть использована и при написании XHTML страниц. Новый синтаксис очень прост:

document.querySelector('#eddie')

Данный код является абсолютно эквивалентным document.getElementById('eddie'). Не впечатляет? Что насчёт этого:

document.querySelector('#eddie h1 + p')

Новый функционал позволяет манипулировать DOM-ом, используя сложные CSS выражения.

Метод querySelector извлекает только первый попавшийся элемент. Для извлечения всех необходимо воспользоваться querySelectorAll:

var hiFrets = document.querySelectorAll('table#frets tr:nth-child(3)')

Данный код извлекает каждую третью строку из таблицы с id=”frets”.

Несколько очень важных моментов

Существует несколько ограничений, о которых вы должны знать, если будете использовать метод querySelector / All:

Не все браузеры поддерживают новый функционал. Если вам важно, чтоб код работал на IE6-7, то лучше пользоваться библиотеками, которые могут манипулировать DOM-ом: Sizzle или jQuery.

Селекторы должны быть составлены очень аккуратно, иначе браузеры их не поймут, и выше перечисленные методы вернут null. В общем, будьте очень осторожны, особенно при использовании селекторов CSS3.

В отличии от getElementsByTagName, метод querySelectorAll возвращает статический список извлечённых элементов в том виде, в которым они находятся на странице в данный момент времени. Это значит, что при внесении каких-либо динамических изменений в код (добавление, удаление элементов через JavaScript), необходимо будет заново воспользоваться методом querySelectorAll.

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

Источник: http://feedproxy.google.com/~r/ruseller/CdHX/~3/dYkS2C0tYQI/lessons.php

Читать комменты и комментировать

Добавить комментарий / отзыв



Защитный код
Обновить

JavaScript селекторы | | 2013-04-12 11:36:01 | | Статьи Web-мастеру | | JavaScript, как и CSS, обладает функционалом, позволяющим обращаться к HTML элементам для преобразования контента страниц. В CSS это достигается путём написания селекторов. В JavaScript существует | РэдЛайн, создание сайта, заказать сайт, разработка сайтов, реклама в Интернете, продвижение, маркетинговые исследования, дизайн студия, веб дизайн, раскрутка сайта, создать сайт компании, сделать сайт, создание сайтов, изготовление сайта, обслуживание сайтов, изготовление сайтов, заказать интернет сайт, создать сайт, изготовить сайт, разработка сайта, web студия, создание веб сайта, поддержка сайта, сайт на заказ, сопровождение сайта, дизайн сайта, сайт под ключ, заказ сайта, реклама сайта, хостинг, регистрация доменов, хабаровск, краснодар, москва, комсомольск |
 
Поделиться с друзьями: