Навигация:

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

Топ:

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

Особенности труда и отдыха в условиях низких температур: К работам при низких температурах на открытом воздухе и в не отапливаемых помещениях допускаются лица не моложе 18 лет, прошедшие...

История развития методов оптимизации: теорема Куна-Таккера, метод Лагранжа, роль выпуклости в оптимизации...

Интересное:

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

Искусственное повышение поверхности территории: Варианты искусственного повышения поверхности территории необходимо выбирать на основе анализа следующих характеристик защищаемой территории...

Мероприятия для защиты от морозного пучения грунтов: Инженерная защита от морозного (криогенного) пучения грунтов необходима для легких малоэтажных зданий и других сооружений...

Дисциплины:

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

Итог по стандартным событиям браузера

2020-06-02

0.00 из 5.00 0 оценок

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

⇐ ПредыдущаяСтр 3 из 3

Браузер имеет встроенные действия при ряде событий – переход по ссылке, отправка формы и т.п. Как правило, их можно отменить.

Есть два способа отменить действие по умолчанию:

1. Использовать event.preventDefault()(IE8-: event.returnValue=false);

2. Использовать return false из обработчика. Второй способ работает только если обработчик назначен через on событие.

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

Создавать новые узлы 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);

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

Все эти методы возвращают elem.

DocumentFragment

Вставить пачку узлов единовременно поможет DocumentFragment. Это особенный кросс-браузерный DOM-объект, который похож на обычный DOM-узел, но им не является.

Синтаксис для его создания:

var fragment = document.createDocumentFragment();

В него можно добавлять другие узлы.

fragment.appendChild(node);

Его можно клонировать:

fragment.cloneNode(true); // клонирование с подэлементами

Важно!

У DocumentFragment нет обычных свойств DOM-узлов, таких как innerHTML, tagName и т.п. Это не узел.

Его «Фишка» заключается в том, что когда DocumentFragment вставляется в DOM – то он исчезает, а вместо него вставляются его дети. Это свойство является уникальной особенностью DocumentFragment.

Например, если добавить в него много LI, и потом вызвать ul.appendChild(fragment), то фрагмент растворится, и в DOM вставятся именно LI, причём в том же порядке, в котором были во фрагменте.

Псевдокод:

// хотим вставить в список UL много LI

// делаем вспомогательный DocumentFragment

var fragment = document.createDocumentFragment();

for (цикл по li) {

fragment.appendChild(list[i]); // вставить каждый LI в DocumentFragment

}

ul.appendChild(fragment); // вместо фрагмента вставятся элементы списка

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

⇐ Предыдущая 1 23

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

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

Археология об основании Рима: Новые раскопки проясняют и такой острый дискуссионный вопрос, как дата самого возникновения Рима...

Адаптации растений и животных к жизни в горах: Большое значение для жизни организмов в горах имеют степень расчленения, крутизна и экспозиционные различия склонов...

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