Навигация:

Главная Случайная страница Обратная связь ТОП Интересно знать Избранные Новые материалы

Топ:

Характеристика АТП и сварочно-жестяницкого участка: Транспорт в настоящее время является одной из важнейших отраслей народного...

Эволюция кровеносной системы позвоночных животных: Биологическая эволюция – необратимый процесс исторического развития живой природы...

Интересное:

Берегоукрепление оползневых склонов: На прибрежных склонах основной причиной развития оползневых процессов является подмыв водами рек естественных склонов...

Принципы управления денежными потоками: одним из методов контроля за состоянием денежной наличности является...

Лечение прогрессирующих форм рака: Одним из наиболее важных достижений экспериментальной химиотерапии опухолей, начатой в 60-х и реализованной в 70-х годах, является...

Дисциплины:

Автоматизация Антропология Археология Архитектура Аудит Биология Бухгалтерия Военная наука Генетика География Геология Демография Журналистика Зоология Иностранные языки Информатика Искусство История Кинематография Компьютеризация Кораблестроение Кулинария Культура Лексикология Лингвистика Литература Логика Маркетинг Математика Машиностроение Медицина Менеджмент Металлургия Метрология Механика Музыкология Науковедение Образование Охрана Труда Педагогика Политология Правоотношение Предпринимательство Приборостроение Программирование Производство Промышленность Психология Радиосвязь Религия Риторика Социология Спорт Стандартизация Статистика Строительство Теология Технологии Торговля Транспорт Фармакология Физика Физиология Философия Финансы Химия Хозяйство Черчение Экология Экономика Электроника Энергетика Юриспруденция

Добавление элемента на страницу

2021-10-05

0.00 из 5.00 0 оценок

Заказать работу

Стр 1 из 3Следующая ⇒

Создание узлов

Создавать новые узлы Element можно с помощью метода createElement() объекта Document. Этому методу необходимо передать имя тега (имя не чувствительно к регистру символов при работе с HTML-документами).

Для создания текстовых узлов существует аналогичный метод — document.createTextNode("содержимое текстового узла");

Еще один способ создания в документе новых узлов заключается в копировании существующих узлов. Каждый узел имеет метод cloneNode(), возвращающий новую копию узла. Если передать ему аргумент со значением true, он рекурсивно создаст копии всех потомков, но если передать false, то будет создана лишь поверхностная копия.

Добавление элемента на страницу

Чтобы DOM-узел был показан на странице, его необходимо вставить в document.

Для этого первым делом нужно решить, куда мы будем его вставлять. Предположим, что мы решили, что вставлять будем в некий элемент в parentElem, например:

var parentElem = document.body.

Для вставки внутрь parentElem есть следующие методы:

· parentElem.appendChild(elem) Добавляет elem в конец дочерних элементов parentElem.

Следующий пример добавляет новый элемент в конец <ol>:

</ol>

var newLi = document.createElement('li');

newLi.innerHTML = 'Привет, мир!';

list.appendChild(newLi);

</script>

· parentElem.insertBefore(elem, elem Before) Вставляет в коллекцию детей parentElem, перед элементом elemBefore.

Следующий код вставляет новый элемент перед вторым <li>:

</ol>

var newLi = document.createElement('li');

newLi.innerHTML = 'Привет, мир!';

list.insertBefore(newLi, list.children[1]);

</script>

Для вставки элемента в начало достаточно указать, что вставлять будем перед первым потомком:

list.insertBefore(newLi, list.firstChild);

У читателя, который посмотрит на этот код внимательно, наверняка возникнет вопрос: «А что, если list вообще пустой, в этом случае ведь list.firstChild = null, произойдёт ли вставка?»

Ответ – да, произойдёт.

Дело в том, что если вторым аргументом указать null, то insertBefore сработает как appendChild:

parentElem.insertBefore(elem, null);

// то же, что и:

parentElem.appendChild(elem)

Так что insertBefore универсален.

На заметку.

Все методы вставки возвращают вставленный узел. Например, parentElem.appendChild(elem) возвращает elem.

Пример использования

Добавим сообщение в конец <body>:

<style>

.alert {

padding: 15px;

border: 1px solid #d6e9c6;

border-radius: 4px;

color: #3c763d;

background-color: #dff0d8;

}

</style>

<body>

<h3>Моя страница</h3>

</body>

var div = document.createElement('div');

div.className = "alert ";

div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";

document.body.appendChild(div);

</script>

Удаление и замена узлов

Метод removeChild() удаляет элемент из дерева документа. Но будьте внимательны: этот метод вызывается не относительно узла, который должен быть удален, а (как следует из фрагмента «child» в его имени) относительно родителя удаляемого узла.

Этот метод вызывается относительно родителя и принимает в виде аргумента дочерний узел, который требуется удалить. Чтобы удалить узел n из документа, вызов метода должен осуществляться так: n.parentNode.removeChild(n);

Метод remove(). В современном стандарте есть также метод elem.remove(), который удаляет элемент напрямую, не требуя ссылки на родителя. Это зачастую удобнее, чем removeChild.

Он поддерживается во всех современных браузерах, кроме IE11-. Впрочем, легко подключить или даже сделать полифилл.

Метод replaceChild() удаляет один дочерний узел и замещает его другим.

Этот метод должен вызываться относительно родительского узла. В первом аргументе он принимает новый узел, а во втором – замещаемый узел.

Например, ниже показано, как заменить узел n текстовой строкой:

n.parentNode.replaceChild(document.createTextNode("[ ИСПРАВЛЕНО ]"), n);

Оба этих метода возвращают удаленный узел, то есть elem. Если нужно, его можно вставить в другое место DOM тут же или в будущем.

На заметку

Если вы хотите переместить элемент на новое место – не нужно его удалять со старого. Все методы вставки автоматически удаляют вставляемый элемент со старого места.

Итого

Методы для создания узлов:

· document.createElement(tag) – создает элемент;

· document.createTextNode(value) – создает текстовый узел;

· elem.cloneNode(deep) – клонирует элемент, если deep == true, то со всеми потомками, если false– без потомков.

Вставка и удаление узлов:

· parent.appendChild(elem) — вставляет последним элементом в родительский элемент;

· parent.insertBefore(elem, nextSibling) — вставляет в родительский элемент перед nextSibling;

· parent.removeChild(elem) — удаляет в родительском элементе указанный элемент (elem);

· element.remove() — удаляет элемент на прямую;

· parent.replaceChild(newElem, elem) удаляет один дочерний узел и замещает его другим.

Объект события

Чтобы хорошо обработать событие, недостаточно знать о том, что это – «клик» или «нажатие клавиши». Могут понадобиться детали: координаты курсора, введённый символ и другие, в зависимости от события.

Детали произошедшего браузер записывает в «объект события», который передаётся первым аргументом в обработчик.

Свойства объекта события

Пример ниже демонстрирует использование объекта события:

elem.onclick = function(event) {

alert(event.type + " на " + event.currentTarget); // вывести тип события и элемент

alert(event.clientX + ":" + event.clientY); // вывести координаты клика

}

</script>

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

<button id="btn">Кнопка</button>

let btn = document.getElementById('btn')

btn.onclick = function (event) {

console.log(event);

console.dir(event);

}

</script>

Объект события доступен и в HTML. При назначении обработчика в HTML, тоже можно использовать переменную event, это будет работать кросс-браузерно:

Это возможно потому, что когда браузер из атрибута создаёт функцию-обработчик, то она выглядит так: function(event) { alert(event.type) }. То есть, её первый аргумент называется "event".

Особенности IE8-

IE8- вместо передачи параметра обработчику создаёт глобальный объект window.event. Обработчик может обратиться к нему.

Работает это так:

elem.onclick = function() {

// window.event - объект события

alert(window.event.clientX);

};

Кроссбраузерное решение

Универсальное решение для получения объекта события:

element.onclick = function(event) {

event = event || window.event; // (*)

};

Строка (*), в случае, если функция не получила event (IE8-), использует window.event.-событие event.

Итого по объекту события

Объект события содержит ценную информацию о деталях события.

Он передается первым аргументом event в обработчик для всех браузеров, кроме IE8-, в которых используется глобальная переменная window.event.

Отмена действия браузера

Есть два способа отменить действие браузера:

1. Для отмены действия браузера существует стандартный метод объекта события event.preventDefault().

2. Если же обработчик назначен через on событие, то можно просто вернуть false из обработчика.

В следующем примере при клике по ссылке переход не произойдет:

<a href="/" onclick="return false">Нажми здесь</a>

<a href="/" onclick="event.preventDefault()">здесь</a>

Другие действия браузера

Действий браузера по умолчанию достаточно много.

Вот некоторые примеры событий, которые вызывают действие браузера:

· mousedown – нажатие кнопкой мыши в то время как курсор находится на тексте начинает его выделение.

· click на <input type="checkbox"> – ставит или убирает галочку.

· submit – при нажатии на <input type="submit"> в форме данные отправляются на сервер.

· wheel – движение колёсика мыши инициирует прокрутку.

· keydown – при нажатии клавиши в поле ввода появляется символ.

· contextmenu – при правом клике показывается контекстное меню браузера.

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

Особенности IE8-

В IE8- для отмены действия по умолчанию нужно назначить свойство event.returnValue = false.

Кроссбраузерный код для отмены действия по умолчанию:

element.onclick = function(event) {

event = event || window.event;

event.preventDefault? event.preventDefault(): (event.returnValue=false);

Прекращение всплытия

Всплытие идёт с «целевого» элемента прямо наверх. Событие будет всплывать до элемента <html>, а затем до объекта document, а иногда даже до window, вызывая все обработчики на своём пути.

Любой промежуточный обработчик может решить, что событие полностью обработано, и остановить всплытие. Для этого нужно вызвать метод event.stopPropagation().

Например, здесь при клике на кнопку <button> обработчик body.onclick не сработает:

<button onclick="event.stopPropagation()">Кликни меня</button>

</body>

Таймеры в JS

Функции setTimeout() и setInterval() позволяют зарегистрировать функцию, которая будет вызываться один или более раз через определенные интервалы времени. Это очень важные функции для клиентского JavaScript, и поэтому они были определены как методы объекта Window, несмотря на то что являются универсальными функциями, не выполняющими никаких действий с окном.

SetTimeout()

Метод setTimeout() планирует запуск функции через определенное число миллисекунд.

Он возвращает значение, которое можно передать методу clearTimeout(), чтобы отменить запланированный ранее запуск функции.

function func() {

alert('Привет');

}

setTimeout(func, 1000);

SetInterval()

Метод setInterval() похож на setTimeout(), за исключением того, что он автоматически заново планирует повторное выполнение через указанное количество миллисекунд:

setInterval(updateClock, 60000); // Вызывать updateClock() через каждые 60 сек.

Подобно setTimeout(), метод setInterval() возвращает значение, которое может быть передано методу clearInterval(), чтобы отменить запланированный запуск функции.

Дополнительно

Спецификация HTML5 (и все броузеры, кроме IE) допускает передавать методам setTimeout() и setInterval() дополнительные аргументы после первых двух. Все эти дополнительные аргументы будут передаваться функции, вызов которой планируется этими методами. Однако если требуется сохранить совместимость с IE, эту возможность использовать не следует.

Если методу setTimeout() указать величину интервала 0 миллисекунд, указанная функция будет вызвана не сразу, а «как только такая возможность появится», т. е. как только завершат работу все обработчики событий.

Работа с формами через JS

Элементы управления, такие как <form>, <input> и другие имеют большое количество своих важных свойств и ссылок.

Выбор формы и её элементов

Формы и элементы, содержащиеся в них, можно выбрать с помощью стандартных методов, таких как getElementById() и getElementsByTagName():

var fields = document.getElementById("address").getElementsByTagName("input");

В браузерах, поддерживающих querySelectorAll(), можно выбрать все радиокнопки или все элементы с одинаковыми именами, присутствующие в форме, как показано ниже:

// Все радиокнопки в форме с атрибутом id="shipping"

document.querySelectorAll('#shipping input[type="radio"]');

// Все радиокнопки с атрибутом name="method" в форме с атрибутом

id="shipping" document.querySelectorAll('#shipping input[type="radio"][name="method"]');

Еще способ выбрать фору

По порядковому номеру, например: document.forms[n] // Ненадежный: n - порядковый номер формы

С установленным атрибутом name или id можно также выбрать другими способами, например:

window.address // Ненадежный: старайтесь не использовать

document.address // Может применяться только к формам с атрибутом name document.forms.address // Явное обращение к форме с атрибутом name или id

Элементы input и textarea

Для большинства типов input значение ставится/читается через свойство value.

input.value = "Новое значение";

textarea.value = "Новый текст";

Важно!

Не используйте textarea.innerHTML потому что оно хранит только HTML, изначально присутствовавший в элементе, и не меняется при изменении значения.

Фокусировка: focus/blur

Обычно фокусировка автоматически происходит при нажатии на элементе мышкой, но также можно перейти на элемент клавиатурой – через клавишу Tab, нажатие пальцем на планшете и так далее.

Событие change

Событие change происходит по окончании изменения значения элемента формы, когда это изменение зафиксировано.

Для текстовых элементов это означает, что событие произойдёт не при каждом вводе, а при потере фокуса. Например, пока вы набираете что-то в текстовом поле ниже – события нет. Но как только вы уведёте фокус на другой элемент, например, нажмёте кнопку – произойдет событие onchange.

Для остальных же элементов оно срабатывает сразу.

Событие input

Событие input срабатывает тут же при изменении значения текстового элемента и поддерживается всеми браузерами, кроме IE8-.

В современных браузерах oninput – самое главное событие для работы с элементом формы. Именно его, а не keydown/keypress следует использовать.

События cut, copy, paste

Эти события используются редко. Они происходят при вырезании / вставке / копировании значения.

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

События изменения данных:

Событие	Описание	Особенности
change	Изменение значения любого элемента формы. Для текстовых элементов срабатывает при потере фокуса.	В IE8- на чекбоксах ждет потери фокуса, поэтому для мгновенной реакции ставят также onclick-обработчик.
input	Событие срабатывает только на текстовых элементах. Оно не ждет потери фокуса, в отличие от change.	В IE8- не поддерживается, в IE9 не работает при удалении символов.
cut/copy/paste	Срабатывают при вставке / копировании / удалении текста. Если в их обработчиках отменить действие браузера, то вставки / копирования / удаления не произойдёт.	Вставляемое значение получить нельзя: на момент срабатывания события в элементе всё ещё старое значение, а новое недоступно.

Метод submit

Чтобы отправить форму на сервер из JS – нужно вызвать на элементе формы метод form.submit().

При этом само событие submit не генерируется. Предполагается, что, если программист вызывает метод form.submit(), то он выполнил все проверки.

Это используют, в частности, для искусственной генерации и отправки формы.

Создание узлов

Для создания текстовых узлов существует аналогичный метод — document.createTextNode("содержимое текстового узла");

Добавление элемента на страницу

Чтобы DOM-узел был показан на странице, его необходимо вставить в document.

var parentElem = document.body.

Для вставки внутрь parentElem есть следующие методы:

· parentElem.appendChild(elem) Добавляет elem в конец дочерних элементов parentElem.

Следующий пример добавляет новый элемент в конец <ol>:

</ol>

var newLi = document.createElement('li');

newLi.innerHTML = 'Привет, мир!';

list.appendChild(newLi);

</script>

· parentElem.insertBefore(elem, elem Before) Вставляет в коллекцию детей parentElem, перед элементом elemBefore.

Следующий код вставляет новый элемент перед вторым <li>:

</ol>

var newLi = document.createElement('li');

newLi.innerHTML = 'Привет, мир!';

list.insertBefore(newLi, list.children[1]);

</script>

Для вставки элемента в начало достаточно указать, что вставлять будем перед первым потомком:

list.insertBefore(newLi, list.firstChild);

Ответ – да, произойдёт.

Дело в том, что если вторым аргументом указать null, то insertBefore сработает как appendChild:

parentElem.insertBefore(elem, null);

// то же, что и:

parentElem.appendChild(elem)

Так что insertBefore универсален.

На заметку.

Все методы вставки возвращают вставленный узел. Например, parentElem.appendChild(elem) возвращает elem.

Пример использования

Добавим сообщение в конец <body>:

<style>

.alert {

padding: 15px;

border: 1px solid #d6e9c6;

border-radius: 4px;

color: #3c763d;

background-color: #dff0d8;

}

</style>

<body>

<h3>Моя страница</h3>

</body>

var div = document.createElement('div');

div.className = "alert ";

div.innerHTML = "<strong>Ура!</strong> Вы прочитали это важное сообщение.";

document.body.appendChild(div);

</script>

Удаление и замена узлов

Метод replaceChild() удаляет один дочерний узел и замещает его другим.

Например, ниже показано, как заменить узел n текстовой строкой:

n.parentNode.replaceChild(document.createTextNode("[ ИСПРАВЛЕНО ]"), n);

На заметку

Итого

Методы для создания узлов:

· document.createElement(tag) – создает элемент;

· document.createTextNode(value) – создает текстовый узел;

· elem.cloneNode(deep) – клонирует элемент, если deep == true, то со всеми потомками, если false– без потомков.

Вставка и удаление узлов:

· parent.appendChild(elem) — вставляет последним элементом в родительский элемент;

· parent.insertBefore(elem, nextSibling) — вставляет в родительский элемент перед nextSibling;

· parent.removeChild(elem) — удаляет в родительском элементе указанный элемент (elem);

· element.remove() — удаляет элемент на прямую;

· parent.replaceChild(newElem, elem) удаляет один дочерний узел и замещает его другим.

12 3 Следующая ⇒

Поделиться с друзьями:

Историки об Елизавете Петровне: Елизавета попала между двумя встречными культурными течениями, воспитывалась среди новых европейских веяний и преданий...

Типы оградительных сооружений в морском порту: По расположению оградительных сооружений в плане различают волноломы, обе оконечности...

История создания датчика движения: Первый прибор для обнаружения движения был изобретен немецким физиком Генрихом Герцем...

История развития пистолетов-пулеметов: Предпосылкой для возникновения пистолетов-пулеметов послужила давняя тенденция тяготения винтовок...