Как создать сайт

Работа с атрибутами и изменение содержимого HTML-элементов.

Здравствуйте!  Продолжаем изучение работы с DOM в JavaScript и в этом уроке рассмотрим свойства и методы объекта Element. То есть это непосредственно сам найденный элемент на веб-странице. Очень важно не путать объект Element с Node. Node представляет из себя коллекцию элементов на веб-странице.

Изменение html элементов и их атрибутов

Одним из  таких вых свойств объекта Element выступает свойство tagName, которое вернет тег элемента. Рассмотрим пример.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<div class="article">
<h3>Заголовок страницы</h3>
<p>Первый абзац</p>
<p>Еще абзац</p>
</div>
<script>
function getChild(el){

    for(var i in el.childNodes){

        if(el.childNodes[i].nodeType===1){

            console.log(el.childNodes[i].tagName);
            getChildren(el.childNodes[i]);
        }
    }
}
var first = document.documentElement;
console.log(first.tagName);
getChildren(first);
</script>
</body>
</html>

Просмотреть  пример

В примере сначала получаем тег корневого элемента <html> и после с помощью функции getChild получим все вложенные элементы:

Свойства innerText и innerHTML

Свойство innerText позволяет менять текстовое содержимое элемента, а свойство innerHTML — позволяет получать и изменять HTML-код элемента. Давайте рассмотрим как работают эти свойства на примере.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<div class="art">
<h3>Заголовок страницы</h3>
<p>Первый абзац</p>
<p>Еще абзац</p>
</div>
<script>
var article = document.querySelector("div.art");
console.log(article.innerText);
console.log("_______________________");
console.log(article.innerHTML);
</script>
</body>
</html>

Просмотреть пример

Следует отметить, что свойству innerText соответствует свойство textContent. Эти 2 свойства практически делают тоже самое:

var pElem = document.querySelectorAll("div.art p")[0];
pElem.innerText = "hello";
pElem.textContent = "hello";

Рассмотрим приме по замене кода html у элемента на веб-странице:

var article = document.querySelector("div.art");
article.innerHTML ="<h2>Hello World!!!</h2><p>Тру-ля-ля</p>";

Методы объекта Element для работы с атрибутами элемента.

Для работы с атрибутами (о том что такое атрибут HTML элемента я писал здесь)  элемента предусмотрены следующие методы:

  • getAttribute(attr): позволяет получить значение атрибута attr
  • setAttribute(attr, value):  устанавливает новое значение value атрибута attr
  • removeAttribute(attr): удалит атрибут и его значение

Рассмотрим пример работы с атрибутами:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
<div class="art" style="color:red;">
<h3>Заголовок страницы</h3>
<p>Первый абзац</p>
<p>Еще абзац</p>
</div>
<script>
var article = document.querySelector("div.art");
// получаем атрибут style
var style = article.getAttribute("style");
console.log("До изменения атрибута: " + style);
// удаляем атрибут
article.removeAttribute("style");
// добавляем заново атрибут style
article.setAttribute("style", "color:blue;");
style = article.getAttribute("style");
console.log("После изменения атрибута: " + style);
</script>
</body>
</html>

Просмотреть пример

Читайте также  Создание, добавление и удаление элементов HTML страницы

Методы для изменения размеров и позиций элементов

Все элементы имеют свойства, которые позволяют вычислить размер элемента. Но также важно понимать  отличия между  этими свойствами

Свойства offsetWidth и offsetHeight возвращают ширину и высоту элемента в пикселях. В ширину и высоту включается  также и граница элемента.

А вот свойства clientWidth и clientHeight  могут также возвращать ширину и высоту элемента в пикселях, но уже  без границы. Разберем на примере.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <style>
    .rect {
        width: 200px;
        height: 200px;
        background: #eee;
        border: 5px solid red;
    }
    </style>
</head>
<body>
<div class="rect"></div>
<script>
var rec = document.querySelector(".rect");
console.log("offsetHeight: " + rec.offsetHeight);
console.log("offsetWidth: " + rec.offsetWidth);
console.log("clientHeight: " + rec.clientHeight);
console.log("clientWidth: " + rec.clientWidth);
</script>
</body>
</html>

Просмотреть пример
Как видно из примера, поскольку у блока div есть граница в 5 пикселей, то по сравнению с clientHeight/clientWidth к offsetHeight/offsetWidth добавляет по 10 пикселей.

Если вам надо определить позицию элемента, то используйте метод getBoundingClientRect().

Этот метод вернет объект со свойствами top, bottom, left, right, которые представляют из себя координаты положения элемента относительно левого верхнего угла браузера:

var rect = document.getElementById("rect");
var clientRect  = rect.getBoundingClientRect();
console.log("top: " + clientRect.top);
console.log("bottom: " + clientRect.bottom);
console.log("left: " + clientRect.left);
console.log("right: "+ clientRect.right);

ИТОГИ.

Для изменения внутреннего HTML содержимого элемента используется метод innerHTML.

Для изменения атрибутов исплользуется метод setAttribute(name, value), которому передается атрибут и новое значение атрибута.

Для удаления атрибута используется метод removeAttribute(name), которому передается удаляемый атрибут.

Задания

Добавьте класс ссылкам.

Пусть на странице есть ссылки. Создайте класс color, который будет добавлять  желтый фон и добавьте этот класс, как атрибут ссылкам ведущим на внешние ресурсы.

Создание собственного атрибута

Создайте на странице новый элемент div  и добавьте ему пользовательский атрибут data-attribute со значением testdata.

 

Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.

Плюсануть
Поделиться
Понравилась запись? Подпишитесь на обновления по почте:

Об авторе

admin administrator

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: