JavaScript HTML DOM — Изменение HTML
HTML DOM позволяет JavaScript изменять содержимое элементов HTML.
Изменение выходного потока HTML
JavaScript может создавать динамическое HTML-содержимое:
В JavaScript документ. Write () можно использовать для записи непосредственно в выходной поток HTML:
Пример
Не используйте Document. Write () после загрузки документа. Он будет перезаписывать документ.
Изменение HTML-содержимого
Самый простой способ изменить содержимое элемента HTML с помощью свойства InnerHtml .
Чтобы изменить содержимое элемента HTML, используйте следующий синтаксис:
HTML DOM — Изменение HTML Элементов
HTML элементы можно изменять, используя JavaScript, HTML DOM и события.
Изменить HTML Элемент
HTML DOM и JavaScript могут изменять внутреннее содержимое и атрибуты HTML элементов.
Следующий пример изменяет цвет фона элемента <body>:
Пример
Изменить Текст HTML Элемента — innerHTML
Простейший способ получить и модифицировать содержимое элемента — использование свойства innerHTML.
Следующий пример изменяет текст элемента <p>:
Пример
<script type="text/javascript">
document.getElementById("p1").innerHTML="Новый текст!";
</script>
Изменить HTML Элемент Используя События
Обработчик события позволяет вам выполнить код, когда происходит событие.
События генерируются браузером, когда пользователь кликает на элементе, загружается страница, данные с формы отправляются на обработку и т.д.
Вы можете прочитать больше о событиях в следующем уроке.
Следующий пример изменяет цвет фона элемента <body> при нажатии кнопки:
Пример
<input type="button" onclick="document.body.bgColor=’lavender’;"
value="Изменить цвет фона" />
Изменить Текст Элемента — с помощью Функции
Следующий пример использует функцию для изменения текста элемента <p> при нажатии кнопки:
Пример
Использование Объекта Стиля (style)
Объект style (стиль) каждого HTML элемента представляет его индивидуальный стиль.
Следующий пример использует функцию для изменения стиля элемента <body> при нажатии кнопки:
Пример
Изменить шрифт и цвет Элемента
Следующий пример использует функцию для изменения стиля элемента <p> при нажатии кнопки:
Работа с атрибутами и изменение содержимого HTML-элементов.
Здравствуйте! Продолжаем изучение работы с DOM в JavaScript и в этом уроке рассмотрим свойства и методы объекта Element. То есть это непосредственно сам найденный элемент на веб-странице. Очень важно не путать объект Element с Node. Node представляет из себя коллекцию элементов на веб-странице.
Одним из таких вых свойств объекта Element выступает свойство tagName, которое вернет тег элемента. Рассмотрим пример.
В примере сначала получаем тег корневого элемента <html> и после с помощью функции getChild получим все вложенные элементы:
Свойства innerText и innerHTML
Свойство innerText позволяет менять текстовое содержимое элемента, а свойство innerHTML — позволяет получать и изменять HTML-код элемента. Давайте рассмотрим как работают эти свойства на примере.
Следует отметить, что свойству innerText соответствует свойство textContent. Эти 2 свойства практически делают тоже самое:
Рассмотрим приме по замене кода html у элемента на веб-странице:
Методы объекта Element для работы с атрибутами элемента.
Для работы с атрибутами (о том что такое атрибут HTML элемента я писал здесь) элемента предусмотрены следующие методы:
- getAttribute(attr): позволяет получить значение атрибута attr
- setAttribute(attr, value): устанавливает новое значение value атрибута attr
- removeAttribute(attr): удалит атрибут и его значение
Рассмотрим пример работы с атрибутами:
Методы для изменения размеров и позиций элементов
Все элементы имеют свойства, которые позволяют вычислить размер элемента. Но также важно понимать отличия между этими свойствами
Свойства offsetWidth и offsetHeight возвращают ширину и высоту элемента в пикселях. В ширину и высоту включается также и граница элемента.
А вот свойства clientWidth и clientHeight могут также возвращать ширину и высоту элемента в пикселях, но уже без границы. Разберем на примере.
Просмотреть пример
Как видно из примера, поскольку у блока div есть граница в 5 пикселей, то по сравнению с clientHeight/clientWidth к offsetHeight/offsetWidth добавляет по 10 пикселей.
Если вам надо определить позицию элемента, то используйте метод getBoundingClientRect().
Этот метод вернет объект со свойствами top, bottom, left, right, которые представляют из себя координаты положения элемента относительно левого верхнего угла браузера:
Нестандартные атрибуты, dataset
При написании HTML мы используем много стандартных атрибутов. Но что насчёт нестандартных, пользовательских? Давайте посмотрим, полезны они или нет, и для чего они нужны.
Иногда нестандартные атрибуты используются для передачи пользовательских данных из HTML в JavaScript, или чтобы «помечать» HTML-элементы для JavaScript.
Также они могут быть использованы, чтобы стилизовать элементы.
Например, здесь для состояния заказа используется атрибут order-state:
Почему атрибут может быть предпочтительнее таких классов, как .order-state-new, .order-state-pending, order-state-canceled?
Это потому, что атрибутом удобнее управлять. Состояние может быть изменено достаточно просто:
Но с пользовательскими атрибутами могут возникнуть проблемы. Что если мы используем нестандартный атрибут для наших целей, а позже он появится в стандарте и будет выполнять какую-то функцию? Язык HTML живой, он растёт, появляется больше атрибутов, чтобы удовлетворить потребности разработчиков. В этом случае могут возникнуть неожиданные эффекты.
Чтобы избежать конфликтов, существуют атрибуты вида data-*.
Все атрибуты, начинающиеся с префикса «data-», зарезервированы для использования программистами. Они доступны в свойстве dataset.
Например, если у elem есть атрибут «data-about», то обратиться к нему можно как elem.dataset.about.
Атрибуты, состоящие из нескольких слов, к примеру data-order-state, становятся свойствами, записанными с помощью верблюжьей нотации: dataset.orderState.
Вот переписанный пример «состояния заказа»:
Использование data-* атрибутов – валидный, безопасный способ передачи пользовательских данных.
Пожалуйста, примите во внимание, что мы можем не только читать, но и изменять data-атрибуты. Тогда CSS обновит представление соответствующим образом: в примере выше последняя строка (*) меняет цвет на синий.
ИТОГИ.
Для изменения внутреннего HTML содержимого элемента используется метод innerHTML.
Для изменения атрибутов исплользуется метод setAttribute(name, value), которому передается атрибут и новое значение атрибута.
Для удаления атрибута используется метод removeAttribute(name), которому передается удаляемый атрибут.
Задания
Добавьте класс ссылкам.
Пусть на странице есть ссылки. Создайте класс color, который будет добавлять желтый фон и добавьте этот класс, как атрибут ссылкам ведущим на внешние ресурсы.
Создание собственного атрибута
Создайте на странице новый элемент div и добавьте ему пользовательский атрибут data-attribute со значением testdata.
Если вы нашли ошибку, пожалуйста, выделите фрагмент текста и нажмите Ctrl+Enter.
Как заменить / изменить содержимое HTML элементов с помощью jQuery
jQuery представляет два метода, с помощью которых можно получить или изменить содержимое HTML элементов. Первый метод — это html(). Если мы применим метод без параметров, то мы получим содержимое элемента в формате HTML.
| Синтаксис метода html() без параметров | |
|---|---|
| .html() | Возвращает HTML-содержимое первого элемента из набора |
| Параметры | Отсутствуют. |
| Возвращает | Содержимое первого элемента набора (HTML и текст). |
Давайте посмотрим на примере. У нас на странице ест блочный элемент div, который имеет атрибут id с значением blockIdOne. У нас есть задача получить содержимое (с тегами и текстами) данного элемента.
Выбираем конкретный элемент, содержимое которого хотим получить используя метод html().
- var data = $(«#blockIdOne»).html();
- console.log(data);
Если мы применим метод с параметром, то вместо получение содержимого, содержимое элемента будет изменен. Ниже приведен синтаксис метода с параметром.
| Синтаксис метода html() с параметром | |
|---|---|
| .html(content) | Присваивает переданный HTML-фрагмент всем элементам набора в качестве содержимого. |
| Параметры | content — (Строка | Функция) HTML-фрагмент, который будет присвоен всем элементам набора в качестве содержимого. Если это функция, то она будет вызвана для каждого элемента набора, причем сам элемент будет передан в нее в виде контекста функции (this). Функция принимает два значения: индекс элемента и его содержимое, а возвращаемое ею значение используется как новое содержимое элемента. |
| Возвращает | Коллекцию jQuery |
Ниже приведен пример использование метода html() с параметром, который заменит содержимое HTML элемента.
- $(«#hello»).html(«<strong>Lorem ipsum</strong><br> dolor sit amet»);
После выполнение данного кода мы заменим содержимое элемента на то, что указан в качестве параметра метода. В данном случае теги указанные в параметре будут работать на странице как HTML разметка.
Выше мы узнали, что можно получить и изменить HTML содержимое элемента, но мы кроме этого можем получить текстовое содержимое элемента или изменить / заменить его. Для этого мы можем использовать метод .text().
Пример использование метода text() для получение текстового содержимое элемента:
- var data = $(«#blockIdOne»).text();
- console.log(data);
Пример использование метода text() для замена текстового содержимое элемента: