Работа с HTML в JavaScript

34 просмотров Время на прочтение: 4 минут(ы)

Пример 1

Функция “document.getElementById(a)”, где “a” – идентификатор (атрибут “id”) HTML элемента, возвращает элемент в виде объекта, свойства которого соответствуют атрибутам элемента. В данном примере эта функция присваивает переменной “moiaKnopka” HTML элемент “button” с идентификатором “mknopka”, а также присваивает переменной “moiText” элемент “div” с идентификатором “mtext”.

Функция “ob.addEventListener(ev, func)” назначает для HTML элемента “ob” функцию-обработчик “func”, которая выполняется при событии “ev”. В данном примере для кнопки назначается функция без имени, которая выполняется при нажатии на кнопку (событие “click”).

Свойство “textContent” HTML элемента соответствует тексту, который находится внутри тегов элемента. В данном примере свойству “textContent” элемента “div” присваивается текст и таким образом отображается на веб-странице.

Пример 2

Функция “document.querySelectorAll(a)”, где “a” – CSS селектор, возвращает HTML элементы соответствующие селектору в виде объектов. В данном примере переменной “spisok” через эту функцию присваиваются элементы “div”, которые содержатся в элементе с идентификатором “mspisok”.

Свойство “innerHTML” элемента HTML содержит вложенные HTML элементы и текст. В данном примере элементам “div” через это свойство присваивается номера элементов выделенные жирным шрифтом с помощью тегов “b”.

Пример 3

Функция “document.createElement(a)”, где “a” – название HTML элемента, создаёт и возвращает новый элемент. В данном примере возвращает в переменную “ssilka” новую ссылку.

Функция “document.createTextNode(a)”, где “a” – текст, возвращает элемент состоящий из текста. В данном примере возвращает в переменную “txt” тире отделённое пробелами.

Метод “ob.appendChild(a)” добавляет HTML элемент “a”, как следующий вложенный, в HTML элемент “ob”. В данном примере с помощью этого метода в цикле добавляется в элемент с идентификатором “mmenu” ссылки и тире между ними.

Пример 4

Свойство “el.parentNode” возвращает родительский узел HTML элемента “el” – узел, который непосредственно включает элемент “el”. В данном примере возвращает в переменную “glavnii” элемент “div”, который содержит вложенный элемент “div” с идентификатором “mpervii”.

Свойство “el.nextSibling” возвращает следующий HTML узел после элемента “el”. В данном примере возвращает следующий после текущего “element”.

Метод “ob.insertBefore(n, el)” вставляет элемент “n” в элемент “ob” перед элементом “el”, который содержится в “ob”. В данном примере этот метод при значении “true” переменной “pered” вставляет новый элемент “novii” в элемент “glavnii” перед текущем элементом “element”, а при значении “false” переменной “pered” вставляет новый элемент “novii” в элемент “glavnii” после текущего элемента “element” (перед следующем за текущим “element.nextSibling”).

Пример 5

Метод “ob.removeChild(el)” удаляет HTML элемент “el” из содержащего его элемента “ob”. В данном примере если удаляемый элемент существует (“if(element)”), то из содержащего его родительского узла (“element.parentNode”) удаляемый элемент удаляется.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *

©2024 Шигорин Сергей Владимирович
Мы используем cookie-файлы для наилучшего представления нашего сайта. Продолжая использовать этот сайт, вы соглашаетесь с использованием cookie-файлов.
Принять
Top.Mail.Ru
Каталог сайтов Всего.ру
Белый каталог сайтов PopCat.ru