JavaScript - DOM: свойства элемента для управления его атрибутами

Опубликовано: 27.12.2017

На этом уроке мы рассмотрим свойства элемента (узла), с помощью которых Вы можете управлять его различными атрибутами: id, class, title, lang, tabIndex, dir и др.

HTML формы - тег input и валидация форм. Часть 1

Для работы с атрибутами можно использовать не только методы getAttribute(), setAttribute() и removeAttribute(), но и свойства, названия которых повторяют названия соответствующих свойств. Эти свойства можно использовать не только для чтения значений соответствующих атрибутов, но и для изменения их значений.

Ширина колонок и группировка столбцов HTML таблицы: теги col и colgroup

Свойство className позволяет установить или получить класс (классы) элемента (значение атрибута class).

Синтаксис:

//получить у элемента значение атрибута class HTMLElementObject.className //установить указанному элементу значение атрибута class HTMLElementObject.className="myClass"

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

HTMLElementObject.className="class1 class2"

Примеры:

1. Получить название класса первого элемента р (индекс 0) в документе:

var elementP = document.getElementsByTagName("P")[0].className; console.log(elementP);

2. Перезаписать элементу, имеющему id="myID", существующее имя класса новым значением:

<div id="myID" class="myStyle">I LOVE JAVASCRIPT!</div>  document.getElementById("myID").className = "newMyID";

3. Добавить к элементу дополнительный класс (без перезаписи существующих значений):

document.getElementById("myID").className += " newMyID";

4. Изменить у элемента, имеющего id="myID" и класс myStyle, размер шрифта:

var elementMyID = document.getElementById("myID"); if (elementMyID.className == "myStyle") { elementMyID.style.fontSize = "30px"; }

Свойство id позволяет установить или получить у элемента его идентификатор (значение атрибута id).

Значение атрибута id должно быть уникальным на странице. Для получения элемента в HTML документе по его id обычно используют метод getElementById().