Top-office11.ru

IT и мир ПК
1 просмотров
Рейтинг статьи
1 звезда2 звезды3 звезды4 звезды5 звезд
Загрузка...

Document createelement html

Creating a new DOM element from an HTML string using built-in DOM methods or Prototype

I have an HTML string representing an element: ‘
text ‘ . I’d like to append it to an element in the DOM (a ul in my case). How can I do this with Prototype or with DOM methods?

(I know i could do this easily in jQuery, but unfortunately we’re not using jQuery.)

I had a problem with the above, because I had attributes that needed to be passed along and I d >

» so, I simply used: $(» «) – stevenlacerda Sep 14 ’17 at 18:03

23 Answers 23

Note: most current browsers support HTML elements, which provide a more reliable way of turning creating elements from strings. See Mark Amery’s answer below for details.

For older browsers, and node/jsdom: (which doesn’t yet support elements at the time of writing), use the following method. It’s the same thing the libraries use to do to get DOM elements from an HTML string (with some extra work for IE to work around bugs with its implementation of innerHTML ):

Note that unlike HTML templates this won’t work for some elements that cannot legally be children of a

, such as

s.

If you’re already using a library, I would recommend you stick to the library-approved method of creating elements from HTML strings:

  • Prototype has this feature built-into its update() method.
  • jQuery has it implemented in its jQuery(html) and jQuery.parseHTML methods.

HTML 5 introduced the element which can be used for this purpose (as now described in the WhatWG spec and MDN docs).

A element is used to declare fragments of HTML that can be utilized in scripts. The element is represented in the DOM as a HTMLTemplateElement which has a .content property of DocumentFragment type, to provide access to the template’s contents. This means that you can convert an HTML string to DOM elements by setting the innerHTML of a element, then reaching into the template ‘s .content property.

Note that similar approaches that use a different container element such as a div don’t quite work. HTML has restrictions on what element types are allowed to exist inside which other element types; for instance, you can’t put a td as a direct child of a div . This causes these elements to vanish if you try to set the innerHTML of a div to contain them. Since s have no such restrictions on their content, this shortcoming doesn’t apply when using a template.

However, template is not supported in some old browsers. As of January 2018, Can I use. estimates 90% of users globally are using a browser that supports template s. In particular, no version of Internet Explorer supports them; Microsoft did not implement template support until the release of Edge.

If you’re lucky enough to be writing code that’s only targeted at users on modern browsers, go ahead and use them right now. Otherwise, you may have to wait a while for users to catch up.

Изменение документа

Модификации DOM – это ключ к созданию «живых» страниц.

Здесь мы увидим, как создавать новые элементы «на лету» и изменять уже существующие.

Пример: показать сообщение

Рассмотрим методы на примере – а именно, добавим на страницу сообщение, которое будет выглядеть получше, чем alert .

Это был пример HTML. Теперь давайте создадим такой же div , используя JavaScript (предполагаем, что стили в HTML или во внешнем CSS-файле).

Создание элемента

DOM-узел можно создать двумя методами:

Создаёт новый элемент с заданным тегом:

Создаёт новый текстовый узел с заданным текстом:

Создание сообщения

В нашем случае сообщение – это div с классом alert и HTML в нём:

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

Методы вставки

Чтобы наш div появился, нам нужно вставить его где-нибудь в document . Например, в document.body .

Для этого есть метод append , в нашем случае: document.body.append(div) .

Вот полный пример:

Вот методы для различных вариантов вставки:

  • node.append(. nodes or strings) – добавляет узлы или строки в конец node ,
  • node.prepend(. nodes or strings) – вставляет узлы или строки в начало node ,
  • node.before(. nodes or strings) –- вставляет узлы или строки до node ,
  • node.after(. nodes or strings) –- вставляет узлы или строки после node ,
  • node.replaceWith(. nodes or strings) –- заменяет node заданными узлами или строками.

Вот пример использования этих методов, чтобы добавить новые элементы в список и текст до/после него:

Наглядная иллюстрация того, куда эти методы вставляют:

Итоговый список будет таким:

Эти методы могут вставлять несколько узлов и текстовых фрагментов за один вызов.

Например, здесь вставляется строка и элемент:

Весь текст вставляется как текст.

Поэтому финальный HTML будет:

Другими словами, строки вставляются безопасным способом, как делает это elem.textContent .

Поэтому эти методы могут использоваться только для вставки DOM-узлов или текстовых фрагментов.

А что, если мы хотим вставить HTML именно «как html», со всеми тегами и прочим, как делает это elem.innerHTML ?

insertAdjacentHTML/Text/Element

С этим может помочь другой, довольно универсальный метод: elem.insertAdjacentHTML(where, html) .

Первый параметр – это специальное слово, указывающее, куда по отношению к elem производить вставку. Значение должно быть одним из следующих:

  • «beforebegin» – вставить html непосредственно перед elem ,
  • «afterbegin» – вставить html в начало elem ,
  • «beforeend» – вставить html в конец elem ,
  • «afterend» – вставить html непосредственно после elem .

Второй параметр – это HTML-строка, которая будет вставлена именно «как HTML».

Так мы можем добавлять произвольный HTML на страницу.

Мы можем легко заметить сходство между этой и предыдущей картинкой. Точки вставки фактически одинаковые, но этот метод вставляет HTML.

У метода есть два брата:

  • elem.insertAdjacentText(where, text) – такой же синтаксис, но строка text вставляется «как текст», вместо HTML,
  • elem.insertAdjacentElement(where, elem) – такой же синтаксис, но вставляет элемент elem .

Они существуют, в основном, чтобы унифицировать синтаксис. На практике часто используется только insertAdjacentHTML . Потому что для элементов и текста у нас есть методы append/prepend/before/after – их быстрее написать, и они могут вставлять как узлы, так и текст.

Так что, вот альтернативный вариант показа сообщения:

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

Для удаления узла есть методы node.remove() .

Например, сделаем так, чтобы наше сообщение удалялось через секунду:

Если нам нужно переместить элемент в другое место – нет необходимости удалять его со старого.

Все методы вставки автоматически удаляют узлы со старых мест.

Например, давайте поменяем местами элементы:

Клонирование узлов: cloneNode

Как вставить ещё одно подобное сообщение?

Мы могли бы создать функцию и поместить код туда. Альтернатива – клонировать существующий div и изменить текст внутри него (при необходимости).

Иногда, когда у нас есть большой элемент, это может быть быстрее и проще.

  • Вызов elem.cloneNode(true) создаёт «глубокий» клон элемента – со всеми атрибутами и дочерними элементами. Если мы вызовем elem.cloneNode(false) , тогда клон будет без дочерних элементов.

Пример копирования сообщения:

DocumentFragment

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

Мы можем добавить к нему другие узлы, но когда мы вставляем его куда-то, он «исчезает», вместо него вставляется его содержимое.

Читать еще:  Конструктор си шарп

Например, getListContent ниже генерирует фрагмент с элементами
, которые позже вставляются в

    :

Обратите внимание, что на последней строке с (*) мы добавляем DocumentFragment , но он «исчезает», поэтому структура будет:

DocumentFragment редко используется. Зачем добавлять элементы в специальный вид узла, если вместо этого мы можем вернуть массив узлов? Переписанный пример:

Мы упоминаем DocumentFragment в основном потому, что он используется в некоторых других областях, например, для элемента template, который мы рассмотрим гораздо позже.

Устаревшие методы вставки/удаления

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

Сейчас уже нет причин их использовать, так как современные методы append , prepend , before , after , remove , replaceWith более гибкие и удобные.

Мы упоминаем о них только потому, что их можно найти во многих старых скриптах:

Добавляет node в конец дочерних элементов parentElem .

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

    :

Вставляет node перед nextSibling в parentElem .

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

Чтобы вставить newLi в начало, мы можем сделать вот так:

Заменяет oldChild на node среди дочерних элементов parentElem .

Удаляет node из parentElem (предполагается, что он родитель node ).

Этот пример удалит первый
из

    :

Все эти методы возвращают вставленный/удалённый узел. Другими словами, parentElem.appendChild(node) вернёт node . Но обычно возвращаемое значение не используют, просто вызывают метод.

Несколько слов о «document.write»

Есть ещё один, очень древний метод добавления содержимого на веб-страницу: document.write .

Вызов document.write(html) записывает html на страницу «прямо здесь и сейчас». Строка html может быть динамически сгенерирована, поэтому метод достаточно гибкий. Мы можем использовать JavaScript, чтобы создать полноценную веб-страницу и записать её в документ.

Этот метод пришёл к нам со времён, когда ещё не было ни DOM, ни стандартов… Действительно старые времена. Он всё ещё живёт, потому что есть скрипты, которые используют его.

В современных скриптах он редко встречается из-за следующего важного ограничения:

Вызов document.write работает только во время загрузки страницы.

Если вызвать его позже, то существующее содержимое документа затрётся.

Так что после того, как страница загружена, он уже непригоден к использованию, в отличие от других методов DOM, которые мы рассмотрели выше.

Это его недостаток.

Есть и преимущество. Технически, когда document.write запускается во время чтения HTML браузером, и что-то пишет в документ, то браузер воспринимает это так, как будто это изначально было частью загруженного HTML-документа.

Поэтому он работает невероятно быстро, ведь при этом нет модификации DOM. Метод пишет прямо в текст страницы, пока DOM ещё в процессе создания.

Так что, если нам нужно динамически добавить много текста в HTML, и мы находимся на стадии загрузки, и для нас очень важна скорость, это может помочь. Но на практике эти требования редко сочетаются. И обычно мы можем увидеть этот метод в скриптах просто потому, что они старые.

Итого

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

  • document.createElement(tag) – создаёт элемент с заданным тегом,
  • document.createTextNode(value) – создаёт текстовый узел (редко используется),
  • elem.cloneNode(deep) – клонирует элемент, если deep==true , то со всеми дочерними элементами.

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

  • node.append(. nodes or strings) – вставляет в node в конец,
  • node.prepend(. nodes or strings) – вставляет в node в начало,
  • node.before(. nodes or strings) –- вставляет прямо перед node ,
  • node.after(. nodes or strings) –- вставляет сразу после node ,
  • node.replaceWith(. nodes or strings) –- заменяет node .
  • node.remove() –- удаляет node .
  • parent.appendChild(node)
  • parent.insertBefore(node, nextSibling)
  • parent.removeChild(node)
  • parent.replaceChild(newElem, node)

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

Если нужно вставить фрагмент HTML, то elem.insertAdjacentHTML(where, html) вставляет в зависимости от where :

  • «beforebegin» – вставляет html прямо перед elem ,
  • «afterbegin» – вставляет html в elem в начало,
  • «beforeend» – вставляет html в elem в конец,
  • «afterend» – вставляет html сразу после elem .

Также существуют похожие методы elem.insertAdjacentText и elem.insertAdjacentElement , они вставляют текстовые строки и элементы, но они редко используются.

Чтобы добавить HTML на страницу до завершения её загрузки:

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

Задачи

createTextNode vs innerHTML vs textContent

У нас есть пустой DOM-элемент elem и строка text .

Какие из этих 3-х команд работают одинаково?

  1. elem.append(document.createTextNode(text))
  2. elem.innerHTML = text
  3. elem.textContent = text

решение

Ответ: 1 и 3.

Результатом обеих команд будет добавление text «как текст» в elem .

Modifying the document

DOM modification is the key to creating “live” pages.

Here we’ll see how to create new elements “on the fly” and modify the existing page content.

Example: show a message

Let’s demonstrate using an example. We’ll add a message on the page that looks nicer than alert .

Here’s how it will look:

That was an HTML example. Now let’s create the same div with JavaScript (assuming that the styles are in the HTML or an external CSS file).

Creating an element

To create DOM nodes, there are two methods:

Creates a new element node with the given tag:

Creates a new text node with the given text:

Creating the message

In our case the message is a div with alert class and the HTML in it:

We created the element, but as of now it’s only in a variable. We can’t see the element on the page, as it’s not yet a part of the document.

Insertion methods

To make the div show up, we need to insert it somewhere into document . For instance, in document.body .

There’s a special method append for that: document.body.append(div) .

Here’s the full code:

This set of methods provides more ways to insert:

  • node.append(. nodes or strings) – append nodes or strings at the end of node ,
  • node.prepend(. nodes or strings) – insert nodes or strings at the beginning of node ,
  • node.before(. nodes or strings) –- insert nodes or strings before node ,
  • node.after(. nodes or strings) –- insert nodes or strings after node ,
  • node.replaceWith(. nodes or strings) –- replaces node with the given nodes or strings.

Here’s an example of using these methods to add items to a list and the text before/after it:

Here’s a visual picture what methods do:

So the final list will be:

These methods can insert multiple lists of nodes and text pieces in a single call.

For instance, here a string and an element are inserted:

All text is inserted as text.

So the final HTML is:

In other words, strings are inserted in a safe way, like elem.textContent does it.

So, these methods can only be used to insert DOM nodes or text pieces.

But what if we want to insert HTML “as html”, with all tags and stuff working, like elem.innerHTML ?

insertAdjacentHTML/Text/Element

For that we can use another, pretty versatile method: elem.insertAdjacentHTML(where, html) .

The first parameter is a code word, specifying where to insert relative to elem . Must be one of the following:

  • «beforebegin» – insert html immediately before elem ,
  • «afterbegin» – insert html into elem , at the beginning,
  • «beforeend» – insert html into elem , at the end,
  • «afterend» – insert html immediately after elem .
Читать еще:  Команда умножения в ассемблере

The second parameter is an HTML string, that is inserted “as HTML”.

That’s how we can append arbitrary HTML to the page.

Here’s the picture of insertion variants:

We can easily notice similarities between this and the previous picture. The insertion points are actually the same, but this method inserts HTML.

The method has two brothers:

  • elem.insertAdjacentText(where, text) – the same syntax, but a string of text is inserted “as text” instead of HTML,
  • elem.insertAdjacentElement(where, elem) – the same syntax, but inserts an element.

They exist mainly to make the syntax “uniform”. In practice, only insertAdjacentHTML is used most of the time. Because for elements and text, we have methods append/prepend/before/after – they are shorter to write and can insert nodes/text pieces.

So here’s an alternative variant of showing a message:

Node removal

To remove a node, there’s a method node.remove() .

Let’s make our message disappear after a second:

Please note: if we want to move an element to another place – there’s no need to remove it from the old one.

All insertion methods automatically remove the node from the old place.

For instance, let’s swap elements:

Cloning nodes: cloneNode

How to insert one more similar message?

We could make a function and put the code there. But the alternative way would be to clone the existing div and modify the text inside it (if needed).

Sometimes when we have a big element, that may be faster and simpler.

  • The call elem.cloneNode(true) creates a “deep” clone of the element – with all attributes and subelements. If we call elem.cloneNode(false) , then the clone is made without child elements.

An example of copying the message:

DocumentFragment

DocumentFragment is a special DOM node that serves as a wrapper to pass around lists of nodes.

We can append other nodes to it, but when we insert it somewhere, then its content is inserted instead.

For example, getListContent below generates a fragment with
items, that are later inserted into

    :

Please note, at the last line (*) we append DocumentFragment , but it “blends in”, so the resulting structure will be:

DocumentFragment is rarely used explicitly. Why append to a special kind of node, if we can return an array of nodes instead? Rewritten example:

We mention DocumentFragment mainly because there are some concepts on top of it, like template element, that we’ll cover much later.

Old-school insert/remove methods

There are also “old school” DOM manipulation methods, existing for historical reasons.

These methods come from really ancient times. Nowadays, there’s no reason to use them, as modern methods, such as append , prepend , before , after , remove , replaceWith , are more flexible.

The only reason we list these methods here is that you can find them in many old scripts:

Appends node as the last child of parentElem .

The following example adds a new
to the end of

    :

Inserts node before nextSibling into parentElem .

The following code inserts a new list item before the second
:

To insert newLi as the first element, we can do it like this:

Replaces oldChild with node among children of parentElem .

Removes node from parentElem (assuming node is its child).

The following example removes first
from

    :

All these methods return the inserted/removed node. In other words, parentElem.appendChild(node) returns node . But usually the returned value is not used, we just run the method.

A word about “document.write”

There’s one more, very ancient method of adding something to a web-page: document.write .

The call to document.write(html) writes the html into page “right here and now”. The html string can be dynamically generated, so it’s kind of flexible. We can use JavaScript to create a full-fledged webpage and write it.

The method comes from times when there was no DOM, no standards… Really old times. It still lives, because there are scripts using it.

In modern scripts we can rarely see it, because of the following important limitation:

The call to document.write only works while the page is loading.

If we call it afterwards, the existing document content is erased.

So it’s kind of unusable at “after loaded” stage, unlike other DOM methods we covered above.

That’s the downside.

There’s an upside also. Technically, when document.write is called while the browser is reading (“parsing”) incoming HTML, and it writes something, the browser consumes it just as if it were initially there, in the HTML text.

So it works blazingly fast, because there’s no DOM modification involved. It writes directly into the page text, while the DOM is not yet built.

So if we need to add a lot of text into HTML dynamically, and we’re at page loading phase, and the speed matters, it may help. But in practice these requirements rarely come together. And usually we can see this method in scripts just because they are old.

Summary

Methods to create new nodes:

  • document.createElement(tag) – creates an element with the given tag,
  • document.createTextNode(value) – creates a text node (rarely used),
  • elem.cloneNode(deep) – clones the element, if deep==true then with all descendants.

Insertion and removal:

  • node.append(. nodes or strings) – insert into node , at the end,
  • node.prepend(. nodes or strings) – insert into node , at the beginning,
  • node.before(. nodes or strings) –- insert right before node ,
  • node.after(. nodes or strings) –- insert right after node ,
  • node.replaceWith(. nodes or strings) –- replace node .
  • node.remove() –- remove the node .

Text strings are inserted “as text”.

There are also “old school” methods:

  • parent.appendChild(node)
  • parent.insertBefore(node, nextSibling)
  • parent.removeChild(node)
  • parent.replaceChild(newElem, node)

All these methods return node .

Given some HTML in html , elem.insertAdjacentHTML(where, html) inserts it depending on the value of where :

  • «beforebegin» – insert html right before elem ,
  • «afterbegin» – insert html into elem , at the beginning,
  • «beforeend» – insert html into elem , at the end,
  • «afterend» – insert html right after elem .

Also there are similar methods, elem.insertAdjacentText and elem.insertAdjacentElement , that insert text strings and elements, but they are rarely used.

To append HTML to the page before it has finished loading:

After the page is loaded such a call erases the document. Mostly seen in old scripts.

Tasks

createTextNode vs innerHTML vs textContent

We have an empty DOM element elem and a string text .

Which of these 3 commands do exactly the same?

  1. elem.append(document.createTextNode(text))
  2. elem.innerHTML = text
  3. elem.textContent = text

solution

Answer: 1 and 3.

Both commands result in adding the text “as text” into the elem .

Манипуляции с DOM на чистом JavaScript

  • Переводы, 17 февраля 2019 в 13:11
  • Сергей Ринг

Как правило, когда нужно выполнить какие-либо действия с DOM, разработчики используют jQuery. Однако практически любую манипуляцию с DOM можно сделать и на чистом JavaScript с помощью его DOM API.

Рассмотрим этот API более подробно:

В конце вы напишете свою простенькую DOM-библиотеку, которую можно будет использовать в любом проекте.

DOM-запросы

В материале представлены основы JavaScript DOM API. Все подробности и детали доступны на Mozilla Developer Network.

LATOKEN, Москва, от 4000 до 5000 $

DOM-запросы осуществляются с помощью метода .querySelector() , который в качестве аргумента принимает произвольный СSS-селектор.

Он вернёт первый подходящий элемент. Можно и наоборот — проверить, соответствует ли элемент селектору:

Если нужно получить все элементы, соответствующие селектору, используйте следующую конструкцию:

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

Возникает вопрос: зачем тогда использовать другие, менее удобные методы вроде .getElementsByTagName() ? Есть маленькая проблема — результат вывода .querySelector() не обновляется, и когда мы добавим новый элемент (смотрите раздел 5), он не изменится.

Также querySelectorAll() собирает всё в один список, что делает его не очень эффективным.

Как работать со списками?

Вдобавок ко всему у .querySelectorAll() есть два маленьких нюанса. Вы не можете просто вызывать методы на результаты и ожидать, что они применятся к каждому из них (как вы могли привыкнуть делать это с jQuery). В любом случае нужно будет перебирать все элементы в цикле. Второе — возвращаемый объект является списком элементов, а не массивом. Следовательно, методы массивов не сработают. Конечно, есть методы и для списков, что-то вроде .forEach() , но, увы, они подходят не для всех случаев. Так что лучше преобразовать список в массив:

У каждого элемента есть некоторые свойства, ссылающиеся на «семью».

Поскольку интерфейс элемента ( Element ) унаследован от интерфейса узла ( Node ), следующие свойства тоже присутствуют:

Первые свойства ссылаются на элемент, а последние (за исключением .parentElement ) могут быть списками элементов любого типа. Соответственно, можно проверить и тип элемента:

Добавление классов и атрибутов

Добавить новый класс очень просто:

Добавление свойства для элемента происходит точно так же, как и для любого объекта:

Можно использовать методы .getAttibute() , .setAttribute() и .removeAttribute() . Они сразу же поменяют HTML-атрибуты элемента (в отличие от DOM-свойств), что вызовет браузерную перерисовку (вы сможете увидеть все изменения, изучив элемент с помощью инструментов разработчика в браузере). Такие перерисовки не только требуют больше ресурсов, чем установка DOM-свойств, но и могут привести к непредвиденным ошибкам.

Как правило, их используют для элементов, у которых нет соответствующих DOM-свойств, например colspan . Или же если их использование действительно необходимо, например для HTML-свойств при наследовании (смотрите раздел 9).

Добавление CSS-стилей

Добавляют их точно так же, как и другие свойства:

Какие-то определённые свойства можно задавать используя .style , но если вы хотите получить значения после некоторых вычислений, то лучше использовать window.getComputedStyle() . Этот метод получает элемент и возвращает CSSStyleDeclaration, содержащий стили как самого элемента, так и его родителя:

Изменение DOM

Можно перемещать элементы:

Если не хочется перемещать, но нужно вставить копию, используем:

Метод .cloneNode() принимает булевое значение в качестве аргумента, при true также клонируются и дочерние элементы.

Конечно, вы можете создавать новые элементы:

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

Можно обратиться и косвенно:

Методы для элементов

У каждого элемента присутствуют такие свойства, как .innerHTML и .textContent , они содержат HTML-код и, соответственно, сам текст. В следующем примере изменяется содержимое элемента:

На самом деле изменение HTML — плохая идея, т. к. теряются все изменения, которые были сделаны ранее, а также перегружаются обработчики событий. Лучше использовать такой способ только полностью отбросив весь HTML и заменив его копией с сервера. Вот так:

Однако это повлечёт за собой две перерисовки в браузере, в то время как .innerHTML приведёт только к одной. Обойти это можно, если сначала добавить всё в DocumentFragment, а затем добавить нужный вам фрагмент:

Обработчики событий

Один из самых простых обработчиков:

Но, как правило, его следует избегать. Здесь .onclick — свойство элемента, и по идее вы можете его изменить, но вы не сможете добавлять другие обработчики используя ещё одну функцию, ссылающуюся на старую.

Для добавления обработчиков лучше использовать .addEventListener() . Он принимает три аргумента: тип события, функцию, которая будет вызываться всякий раз при срабатывании, и объект конфигурации (к нему мы вернёмся позже).

Свойство event.target обращается к элементу, за которым закреплено событие.

А так вы сможете получить доступ ко всем свойствам:

Предотвращение действий по умолчанию

Для этого используется метод .preventDefault() , который блокирует стандартные действия. Например, он заблокирует отправку формы, если авторизация на клиентской стороне не была успешной:

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

Как говорилось ранее, метод .addEventListener() принимает третий необязательный аргумент в виде объекта с конфигурацией. Этот объект должен содержать любые из следующих булевых свойств (по умолчанию все в значении false ):

  • capture: событие будет прикреплено к этому элементу перед любым другим элементом ниже в DOM;
  • once: событие может быть закреплено лишь единожды;
  • passive: event.preventDefault() будет игнорироваться (исключение во время ошибки).

Наиболее распространённым свойством является .capture , и оно настолько распространено, что для этого существует краткий способ записи: вместо того чтобы передавать его в объекте конфигурации, просто укажите его значение здесь:

Обработчики удаляются с помощью метода .removeEventListener() , принимающего два аргумента: тип события и ссылку на обработчик для удаления. Например свойство once можно реализовать так:

Наследование

Допустим, у вас есть элемент и вы хотите добавить обработчик событий для всех его дочерних элементов. Тогда бы вам пришлось прогнать их в цикле, используя метод myForm.querySelectorAll(‘input’) , как было показано выше. Однако вы можете просто добавить элементы в форму и проверить их содержимое с помощью event.target .

И ещё один плюс данного метода заключается в том, что к новым дочерним элементам обработчик будет привязываться автоматически.

Анимация

Проще всего добавить анимацию используя CSS со свойством transition . Но для большей гибкости (например для игры) лучше подходит JavaScript.

Вызывать метод window.setTimeout() , пока анимация не закончится, — не лучшая идея, так как ваше приложение может зависнуть, особенно на мобильных устройствах. Лучше использовать window.requestAnimationFrame() для сохранения всех изменений до следующей перерисовки. Он принимает функцию в качестве аргумента, которая в свою очередь получает метку времени:

Таким способом достигается очень плавная анимация. В своей статье Марк Браун рассуждает на данную тему.

Пишем свою библиотеку

Тот факт, что в DOM для выполнения каких-либо операций с элементами всё время приходится перебирать их, может показаться весьма утомительным по сравнению с синтаксисом jQuery $(‘.foo’).css() . Но почему бы не написать несколько своих методов, облегчающую данную задачу?

Теперь у вас есть своя маленькая библиотека, в которой находится всё, что вам нужно.

Здесь находится ещё много таких помощников.

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

Заключение

Теперь вы знаете, что для реализации простого модального окна или навигационного меню не обязательно прибегать к помощи сторонних фреймворков. Ведь в DOM API это уже всё есть, но, конечно, у данной технологии есть и свои минусы. Например всегда приходится вручную обрабатывать списки элементов, в то время как в jQuery это происходит по щелчку пальцев.

Ссылка на основную публикацию
Adblock
detector