Продвинутая работа с атрибутами

Вы уже знаете один из способов работы с атрибутами тегов, однако есть альтернативный вариант - с помощью методов getAttribute, setAttribute, removeAttribute и hasAttribute.

Метод getAttribute считывает значение указанного атрибута (и атрибут class тут уже не будет исключением), setAttribute - записывает новое значение в атрибут, removeAttribute удаляет атрибут совсем, а hasAttribute проверяет наличие или отсутствие атрибута у свойства.

Давайте получим значение атрибута value для инпута с помощью getAttribute:

< input type=" text" value="! " id=" test" >

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.getElementById('test');

    alert(elem.getAttribute('value'));

}

А теперь запишем новое значение 'www' в атрибут value:

< input type=" text" value="! " id=" test" >

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.getElementById('test');

    elem.setAttribute('value', 'www');

}

Удалим атрибут value совсем:

< input type=" text" value="! " id=" test" >

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.getElementById('test');

    elem.removeAttribute('value');

}

HTML код станет выглядеть так (исчезнет атрибут value):

< input type=" text" id=" test" >

< input type=" submit" onclick=" func()" >

Ну, а теперь проверим наличие атрибута value у нашего свойства:

< input type=" text" value="! " id=" test" >

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.getElementById('test');

    alert(elem.hasAttribute('value')); //выведет true

}

Получение свойств по их классу

Вы уже знаете метод getElementsByTagName, который получает группу свойств по названию тега. Существует аналогичный метод getElementsByClassName, который получает свойства по их классу (то есть по содержимому атрибута class).

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

< p class=" www" > Текст абзаца.< /p>

< p class=" www" > Текст абзаца.< /p>

< p class=" www" > Текст абзаца.< /p>

< p> Текст абзаца.< /p>

< input type=" submit" onclick=" func()" >

function func() {

    var elems = document.getElementsByClassName('www');

    for (var i = 0; i < elems.length; i ++ ) {

            elems[i].innerHTML = '! ';

    }

}

HTML код станет выглядеть так:

< p class=" www" >! < /p>

< p class=" www" >! < /p>

< p class=" www" >! < /p>

< p> Текст абзаца.< /p>

< input type=" submit" onclick=" func()" >

Получение свойств селектором CSS

В настоящее время в JavaScript появились более продвинутые методы получения свойств, в которых можно использовать любые селекторы CSS.

Для этого можно использовать два метода: querySelector и querySelectorAll. Метод querySelector является аналогом getElementById, только принимает не id свойства, а любой селектор, а возвращает ссылку на один найденный свойство (если под селектор попадает много свойств, то она вернет ссылку на первый свойство).

В примере ниже с помощью querySelector мы получаем инпут с классом test и выводим на экран содержимое его атрибута value:

< input type=" text" value="! " class=" test" >

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.querySelector('input.test');

    alert(elem.getAttribute('value'));

}

А сейчас мы получим свойство с id равным test:

< input type=" text" value="! " id=" test" >

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.querySelector('#test');

    alert(elem.getAttribute('value'));

}

Давайте теперь разберем querySelectorAll. Этот метод, в отличии от querySelector, получает группу свойств и работать с ними нужно как с группой (перебирать циклом и т.п.). В примере ниже мы получаем все свойства с классом www и ставим им текст '! ':

< p class=" www" > Текст абзаца.< /p>

< p class=" www" > Текст абзаца.< /p>

< p class=" www" > Текст абзаца.< /p>

< p> Текст абзаца.< /p>

< input type=" submit" onclick=" func()" >

function func() {

    var elems = document.querySelectorAll('.www');

    for (var i = 0; i < elems.length; i ++ ) {

            elems[i].innerHTML = '! ';

    }

}

HTML код станет выглядеть так:

< p class=" www" >! < /p>

< p class=" www" >! < /p>

< p class=" www" >! < /p>

< p> Текст абзаца.< /p>

< input type=" submit" onclick=" func()" >

Атрибуты data-

В языке HTML5 разрешено добавлять свои атрибуты тегам, при этом они должны начинаться с data-, а затем должно идти любое название атрибута, которое вам удобно (это будет работать корректно во всех браузерах, кроме IE10 и ниже).

Если вы хотите обратиться к таким атрибутам как с свойствам объекта, то это делается не на прямую, а при помощи специального свойства dataset:

< div id=" elem" data-price=" 1000" data-product-number=" 5" >

    Товар Джинсы

< /div>

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.getElementById('elem');

 

    alert(elem.dataset.price); //выведет 1000

    alert(elem.dataset.productNumber); //выведет 5

}

Обратите внимание – атрибут data-price превратился в dataset.price, а data-product-number превратился в productNumber.

К таким атрибутам можно также обращаться с помощью методов типа getAttribute, в этом случае следует писать полное название атрибута:

< div id=" elem" data-price=" 1000" data-product-number=" 5" >

    Товар Джинсы

< /div>

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.getElementById('elem');

 

    alert(elem.getAttribute('data-price'); //выведет 1000

    alert(elem.getAttribute('data-product-number'); //выведет 5

}

Разница между способами получения атрибутов

На самом деле работа с атрибутами через свойства (так: elem.value ) и через getAttribute (так: elem.getAttribute('value') ) - это не одно и то же.

При изменении свойства elem.value атрибут elem.getAttribute('value') не меняется:

< input id=" test" type=" text" value=" old" >

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.getElementById('elem');

 

    elem.value = 'new'; //поменяли свойство

    alert(elem.getAttribute('value')); //выведет 'old' - не изменилось!

}

То есть, изменение свойства на атрибут не влияет, он остается таким же.

А вот изменение атрибута обновляет свойство:

< input id=" test" type=" text" value=" old" >

< input type=" submit" onclick=" func()" >

function func() {

    var elem = document.getElementById('elem');

 

    elem.setAttribute('value', 'new'); //поменяли атрибут

    alert(elem.value); //выведет 'new' - elem.value изменилось!

}

Эту особенность можно использовать.

Получается, что атрибут elem.getAttribute('value') хранит исходное значение даже после того, как пользователь заполнил поле и свойство изменилось.

Например, можно взять изначальное значение из атрибута и сравнить со свойством, чтобы узнать, изменилось ли значение. А при необходимости и перезаписать свойство атрибутом, отменив изменения.

 

Урок 21.Работа с датами в JavaScript

В этом уроке мы с вами разберем работу с датами в JavaScript.

Объект Date

Работа с датами в JavaScript ведется в основном через объект Date. Этот объект создается следующим образом:

var date = new Date();

Теперь переменная date - это объект с датой, который хранит в себе текущий момент времени (секунду, минуту, час и так далее). С помощью специальных функций мы можем получить нужные нам характеристики времени, например, текущий час, текущий день или текущий месяц.

К примеру, текущий час можно получить так: date.getHours(), а текущий месяц - вот так date.getMonth(). Смотрите все варианты:

var date = new Date();

 

alert(date.getMilliseconds()); //миллисекунды

alert(date.getSeconds()); //секунды

alert(date.getMinutes()); //минуты

alert(date.getHours()); //часы

alert(date.getDate()); //дни

alert(date.getMonth()); //месяцы

alert(date.getFullYear()); //год

Учтите, что месяц, который возвращает функция getMonth, начинается с нуля - январь нулевой, февраль первый и так далее.

Работа с getDay

С помощью объекта Date можно также получить номер текущего дня недели. Делается это с помощью метода getDay (он возвращает числа от 0 до 6-ти), причем неделя начинается с воскресенья и этот день имеет номер ноль. Понедельник - это день номер 1, вторник - номер 2 и так далее.

Как работает этот метод, посмотрим на таком примере: пусть сегодня вторник, тогда следующий код выведет на экран число 2:

var date = new Date();

alert(date.getDay());

Давайте теперь выведем текущий день недели не числом, а словом (для краткости воскресенье будет 'вс', понедельник 'пн' и так далее).

Для этого я составлю массив дней недели days и начну его с воскресенья (так как это нулевой день):

var days = ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];

Как с помощью этого массива вывести на экран, к примеру, 'вт'? Нужно передать в квадратных скобках номер этого дня (вторник имеет номер 2):

var days = ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];

alert(days[2]); //выведет 'вт'

Однако, мы не хотим передавать день недели вручную, а хотим, чтобы JavaScript сам определил текущий день и вывел его название. Для этого нужно совместить то, что возвращает метод getDay, и наш массив days:

var date = new Date();

var day = date.getDay();

var days = ['вс', 'пн', 'вт', 'ср', 'чт', 'пт', 'сб'];

alert(days[day]);

⇐ Предыдущая78910111213141516Следующая ⇒

Поделиться: