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

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

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

JavaScript - свойства элементов: id, class, title

Свойство 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", существующее имя класса новым значением:

<!--HTML-->
<div id="myID" class="myStyle">I LOVE JAVASCRIPT!</div>
<!--JavaScript-->
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().

Синтаксис:

//возвращает значение атрибута id, установленное у элемента
HTMLElementObject.id 
//устанавливает для указанного элемента значение атрибута id  
HTMLEIementObject.id = "myID"

Например, для элемента, имеющего идентификатор myID, изменить значение атрибута id:

var elementMyID = document.getElementById("myID");
elementMyID.id = "newMyID";

Например, вывести в консоль идентификаторы всех элементов p в документе:

var elementsP = document.getElementByTagName("P");
for (var i = 0; i < elementsP.length; i++) { 
  if (elementsP[i].id)
    console.log(elementsP[i].id + "<br>");
}

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

Синтаксис:

//возвращает значение title, установленное у элемента
HTMLEIementObject.title
//устанавливает для указанного элемента значение атрибута title 
HTMLEIementObject.title = text 

Например, изменить title элемента, имеющего id="myP":

document.getElementByld("myP").title = "I LOVE JAVASCRIPT!"

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

Синтаксис:

//возвращает значение атрибута lang, установленное у элемента
HTMLElementObject.lang
//устанавливает для указанного элемента значение атрибута lang 
HTMLElementObject.lang = "ru" 

Например, установить всем элементам p в документе lang="ru":

var myParagraphs = document.getElementsByTagName("P");
for (var i=0; i < myParagraphs.length; i++) {
  myParagraphs[i].lang = "ru";
}

Свойство tabIndex устанавливает или возвращает значение атрибута tabindex у элемента. Атрибут tabindex определяет порядок перехода по элементам при нажатии на кнопку tab.

Синтаксис:

//возвращает значение атрибута tabindex, установленное у элемента
HTMLElementObject.tabIndex
//устанавливает для указанного элемента значение атрибута tabindex  
HTMLElementObject.tabIndex = число

Например, установить порядок перехода по элементам a так, как они встречаются в коде:

var myAnchors = document.getElementsByTagName("A");
for (var i=0; i < myAnchors.length; i++) {
  myAnchors[i].tabIndex = i+1;
}

Свойство dir устанавливает или возвращает значение атрибута dir у элемента. Атрибут dir применяется для указания направления текста в элементе. Кроме атрибута dir, Вы также можете использовать свойство style.direction, чтобы установить или получить направление текста в элементе.

Синтаксис:

//возвращает значение атрибута dir, установленное у элемента
HTMLElementObject.dir
//устанавливает для указанного элемента значение атрибута dir  
HTMLElementObject.dir = "ltr | rtl | auto"

Свойство dir может принимать одно из трёх значений: ltr (по умолчанию) - направление текста в элементе слево направо, rtl - направление текста в элементе справа налево, auto - позволяет браузеру самостоятельно управлять направлением текста в элементе (браузер задаёт направление тексту в элементе в зависимости от его содержимого). Устанавливать значение "auto" рекомендуется только в том случае, если содержимое элемента заранее не известно.

Например, получить направление текста у элемента р, имеющего id="myP":

<!--HTML-->
<p id="myP">...</p>
<!--JavaScript-->
<script>
var myP = document.getElementById("myP").dir;
console.log(myP);
</script>

Например, изменить направление текста элемента р, имеющего id="myP":

<!--HTML-->
<p id="myP">...</p>
<!--JavaScript-->
<script>
document.getElementById("myP").dir = "rtl";
</script>

Кроме рассмотренных выше свойств, которые есть у большинства элементов (узлов), есть ещё и другие свойства (для управления атрибутами), которые существуют только у определённых видов элементов: img (картинка), a (ссылка), input (элемент управления) и др.

Например, у элемента (узла) img, кроме общих свойств id, className, title, которые есть у большинства элементов, есть ещё и другие специфичные для этого объекта свойства: src (источник картинки), width (ширина картинки), height (высота картинки), alt (текст, который будет отображаться, если картинка не отображается или её показ отключён в настройках браузера) и др.

В большинстве случаев название свойства для управления атрибутом элемента, совпадает с названием этого атрибута.

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

Например, изменить ширину и высоту картинки, имеющей id="myImg":

<!--HTML-->
<img id="myImg" src="image.png" title="">
<!--JavaScript-->
<script>
var myImg = document.getElementById("myImg");
myImg.heigth = "400";
myImg.width = "400";
</script>

Например, получить у ссылки, имеющей id="myAnchor", значение атрибута href. Вывести его значение в элемент, имеющий id="myP":

<!--HTML-->
<a id="myAnchor" href="httpL//itchief.ru/">Перейти на сайт itchief.ru</a>
<p id="myP"></p>
<!--JavaScript-->
<script>
var myAnchor = document.getElementById("myAnchor");
var myP = document.getElementById("myP");
myP.innerHTML = myAnchor;
</script>

Например, установить элементу input, имеющего id="email", режим доступа только для чтения.

<!--HTML-->
E-mail: <inout type="email" id="email">
<!--JavaScript-->
<script>
var email = document.getElementById("email");
email.readOnly = true;
</script>
  1. Изменить у всех элементов a в документе значение атрибута target на "_blank";
  2. Скрыть все изображения на странице, которые имеют ширину больше 600px.


   JavaScript и jQuery 0    3164 0

Комментарии (0)

    Вы должны авторизоваться, чтобы оставлять комментарии.