21 API, которые вы должны знать в 2020 году

От автора: это краткое руководство по HTML Node охватывает 21 из самых популярных и широко используемых API в HTML Node DOM.

Каждый разработчик должен иметь эти API под рукой, прежде чем браться за веб-фреймворки. Их освоение — лучший способ сформировать фундаментальное понимание того, когда и как использовать фреймворки. Давайте приступим.

1. getElementById(id)

getElementById(id) возвращает экземпляр Node элемента по его атрибуту id.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Чтобы получить экземпляр DOM 1, использующий метод getElementById, передайте его идентификатор, div1, методу.

div1Node является объектом или экземпляром HTMLDivElement. Чтобы получить экземпляр I’m a Paragraphpar, передайте идентификатор 1.

par1Node является объектом или экземпляром HTMLParagraphElement. С помощью этих экземпляров мы можем манипулировать элементами или выполнять действия с ними.

2. getElementsByClassName(className)

Этот метод возвращает коллекцию (HTMLCollection) узлов DOM, значение атрибута class которых равно строке className.

У нас есть див с атрибутом class указывающим tab-body, tab-content и tab-active. Все это названия классов. Имя класса — это значение атрибута, установленного для элемента class.

Чтобы получить узлы DOM div с именем class, вызовите метод getElementsByClassName(), передав в качесве аргумента tab-content.

Как видите, он возвращает коллекцию блоков div. На самом деле это массив, потому что мы можем обращаться к ним с помощью number-index. Как вы могли догадаться, первый элемент — это Div 1, второй — Div 2 и третий — Div 3.

3. getElementsByTagName(tagName)

Возвращает коллекцию узлов DOM, чье имя тега (имя элемента) равно указанной строке tagName. Имя тега будет состоять из имен элементов, таких как div, p, img, video, b, i, br, button, input и т.д.

Если вы вызовете getElementsByTagName() с аргументом, он вернет блоки в HTML.

При передаче p возвращаются все элементы абзаца.

При передаче button возвращаются все элементы кнопки.

4. getSelection()

Этот метод возвращает текстовый узел текста, выбранного в документе. Выделенная текстовая область — это область, выделенная в документе с помощью мыши или пальца на сенсорном экране.

Этот метод возвращается Selection. Этот объект имеет свойство anchorNode, значением которого является текстовый узел выделенного текста.

Если выделить I’m Div1, document.getSlection() вернет объект.

anchorNode является текстовым узлом, у которого nodeValue — Div1, выделенный текст.

5. getElementsByNameиquerySelector(selector)

Этот метод вернет первое вхождение узла DOM с указанной строкой selector. Строка selector может быть:

Именем элемента (или именем тега)

Названием класса

Именем идентификатора

Давайте рассмотрим каждый сценарий подробнее.

Имя элемента или тега

Селектором будет имя элемента.

Он вернет первое вхождение элемента div — в данном случае Div 1.

Имя класса

Чтобы получить имя атрибута class элемента, перед аргументом имени класса ставится точка.

Чтобы получить div с классом div1:

Мы указали в начале точку (.), а затем с имя класса. Чтобы получить div с классом div2:

Если вы передадите .tab, имеются два div с именами класса .tab. Возвращается только первый div.

Имя идентификатора

Чтобы получить элемент с именем IS, добавьте к аргументу имени идентификатора хеш #.

Чтобы получить div с идентификатором «div1»:

Обратите внимание на использование хеша #. Мы указываем перед идентификатором #. Это возвращает div Div 1.

6. querySelectorAll(selector)

Возвращает NodeList всех вхождений selector в документ. Опять же, selector может быть:

Именем элемента (или именем тега)

Именем класса

Именем идентификатора

Имя элемента

Чтобы выделить все div, передайте div методу.

Он возвращает NodeList из всех div. NodeList похож на массив, поэтому вы можете ссылаться на элементы по индексу. Еще раз, первый элемент — Div 1, второй — Div 2, а третий — Div 3.

Имя класса

Запрашиваем элементы по именам их классов.

Чтобы запросить элементы с именем класса tab, передайте .tab (перед именем класса указывается точка).

Код возвращает и Div 1, и I’m Paragraph, потому что они имеют имя класса tab.

Имя идентификатора

Запрашивает элементы с указанным значением атрибута id. Аргумент начинается с hash (#), за которым сразу следует имя идентификатора.

В этом случае id уникальны. Если вы присвоите одно и то же значение нескольким элементам id, браузер возьмет первый элемент и проигнорирует остальные. При использовании getElementById возвращается null для id со значениями, присвоенными нескольким элементам. Но при использовании querySelectorAll возвращаются все элементы с указанным значением id.

Чтобы получить элементы с id tab:

Возвращаются Div 1 и Div 2, потому что у них есть идентификатор tab.

7. parentNode.insertBefore(newNode, refNode)

Этот метод помещает узел перед дочерним узлом refNode в parentNode. За newNode сразу следует refNode, все являются дочерними элементами parentNode.

Чтобы разместить элемент перед #child, используйте метод insertBefore.

Здесь мы создали элемент b с текстовым узлом Bold Child Node и использовали метод NodeinsertBefore, чтобы вставить его перед узлом #child в #parent. HTML выглядит так:

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

Мы хотим использовать insertBefore для вставки #othernode в #parent перед его потомком #child.

Это удаляет #othernode из его родительского узла Other Node и помещает внутрь #parent перед #child node. Финальный результат:

8. appendChild(node)

Этот метод добавляет узел к элементу в качестве его последнего дочернего элемента.

Чтобы добавить элемент p к #divNode, используя appendChild:

Результат:

Новый узел p добавляется в конец #divNode. Если узел является существующим в документе узлом, он будет удален со своего места.

Добавление p#pNode к #divNode удалит p#pNode из исходного положения.

Результат:

9. createElement(elementName)

Этот метод создает узел указанного элемента. Аргумент elementName является строковым значение элемента, узел которого должен быть создан. Чтобы создать узел div, передайте div, узел кнопки — «button» и т. д.

Все создаваемые узлы элементов имеют базовую наследственность от HTMLElement.

Возвращенные узлы элементов используются для управления узлом и его дочерними узлами и выполнения действий с ними.

10. createTextNode(textString)

Этот метод создает текстовый узел. Узел Text используется для представления места в модели DOM или элемента, куда будет помещен текст.

Чтобы разместить текст в элементе, вы должны сначала создать текстовый узел, вызвав createTextNode с текстовой строкой в качестве аргумента, а затем добавить текстовый узел к элементу.

Чтобы разместить текст в #parentNode:

Результат:

11. removeChild(childNode)

Удаляет дочерний узел и все его дочерние элементы из узла.

Чтобы удалить #childNode1 из #parentNode:

Результат:

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

Попытка удалить что-то несуществующее вызовет ошибку ReferenceError.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

12. replaceChild(newNode, childNode)

Этот метод заменяет дочерний узел в родительском узле указанным узлом. newNode — это узел, которым нужно заменить chidlNode в родительском узле. newNode, заменяющий childNode, может быть дочерним узлом родительского узла.

Чтобы заменить #childNode2 в #parentNode на #node:

Результат:

#node удаляется из исходного положения и заменяется на #childNode2 внутри #parent.

Вы можете заменить #childNode2 на #childNode1.

Результат:

13. setAttribute(attrKey, attrValue)

Этот метод устанавливает атрибут для элемента. attrKey — это имя атрибута, а attrValue — значение атрибута.

Чтобы установить для атрибута class #divNode значение panel, используйте setAttribute:

Результат будет:

Вы можете установить в атрибуте несколько значений, разделяя строку значениями.

Это задаст атрибут class со значением panel panel-group.

14. getAttribute(attrKey)

Этот метод возвращает значение атрибута. Заданный элемент:

Чтобы получить значение атрибут id в #divNode:

Чтобы получить значения атрибута class:

15. getAttributeNames()

Эти методы возвращают в виде массива все атрибуты элемента.

Чтобы получить все атрибуты, определенные в узле div:

16. cloneNode()

Этот метод клонирует или реплицирует узел DOM. Он создает еще одну ссылку на узел DOM, поэтому оригинал не затрагивается.

Это часто используется в API-интерфейсах DOM для удаления узлов DOM, таких как appendChild, replaceChild и т. д. Эти API-интерфейсы удаляют узел DOM, на который они действуют, поэтому, если вы не хотите, чтобы узел DOM удалялся, клонируйте узел DOM, чтобы API работал с его клоном, не затрагивая исходную версию.

Примечание: cloneNode не клонирует дочерние узлы элемента. Он просто копирует только элемент.

Например, предположим, что у вас есть узел DOM, который вы хотите добавить к другому узлу DOM.

Если вы хотите добавить #div1Node к #div2Node, не затрагивая позиции #div1Node (то есть, не убирая ее с позиции), вы можете клонировать его с помощью cloneNode и передать методу appendChild клонированный узел.

Результат:

#div1Node добавляется к #div2Node, но без его дочернего текстового узла. Чтобы клонировать узел со всем его дочерним поддеревом, передайте логическое значение true в cloneNode.

Это копирует #div1Node с дочерним элементом Text и присоединит к #div2Node

17. classList

Это свойство узлов DOM со значением массива. Массив содержит значения имени class в элементе.

classList для #divNode будет:

DOMTokenList — это подкласс DOMTokenListPrototype, который содержит методы, используемые для управления значениями имени класса в элементе.

add

Это добавляет новое значение к имени класса элемента.

Чтобы добавить «item-group» в атрибут класса #divNode:

contains

Проверяет, имеет ли имя класса указанное значение.

Чтобы проверить, содержит ли у атрибут класса #divNode «panel»:

item(index)

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

divNode.classList.item(0) будет panel

divNode.classList.item(1) будет panel-group

divNode.classList.item(2) будет item

remove

Удаляет значение класса из атрибута. Например:

Чтобы удалить panel из имени класса #divNode:

Результат:

replace

Заменяет значение класса в списке новым значением. Например:

Чтобы заменить «item» в имени класса divNode на «tab»:

Результат:

toggle

Этот метод удаляет или добавляет указанное значение из имен классов. Если имени класса нет в элементе, он добавляет его. Если имя класса находится в элементе, он удаляет его.

Мы можем удалить / добавить имя класса «panel», например:

Пример №1

Результат:

Пример №2

Результат:

Пример №3

Результат:

18. parentNode

Возвращает экземпляр узла DOM родительского узла элемента.

Чтобы получить родительский узел #divChildNode:

19. parentElement

См. выше; он работает так же, как parentNode.

20. innerHTML

Возвращает разметку HTML элемента. Например:

innerHTML из #divNode будет:

Это строковое представление дочерних узлов элемента #divNode. innerHTML используется для создания узлов DOM путем объединения двух или более строк разметки HTML. Например:

Чтобы добавить HTML-разметку I’m Paragraph в divNode:

Вывод DOM будет следующий.

Чтобы добавить его перед HTML divNode:

21. innerText

Возвращает текстовые узлы дочерних узлов элемента. Например:

innerText для divNode возвращает в строке все текстовые узлы, содержащиеся в #divNode. Он дойдет до последнего поддерева и соберет там все текстовые узлы.

Заключение

Если у вас есть какие-либо вопросы относительно API-интерфейсов, описанных выше, или предложения о том, что я должен добавить, исправить или удалить, напишите в комментариях.

Автор: Chidume Nnamdi

Источник: //blog.logrocket.com

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Комментирование закрыто.