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

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

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

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

1. getElementById(id)

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

<div id="div1">Div 1</div>
<p id="par1">I'm a Paragraph</p>

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

const div1Node = document.getElementById("div1")

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

const par1Node = document.getElementById("par1")

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

2. getElementsByClassName(className)

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

<div class="tab-body"> <div class="tab-content tab-active"> Div 1 </div> <div class="tab-content"> Div 2 </div> <div class="tab-content"> Div 3 </div>
</div>

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

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

>> document.getElementsByClassName("tab-content") // HTMLCollection
0: <div class="tab-content tab-active">​
1: <div class="tab-content">​
2: <div class="tab-content">​
length: 3

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

3. getElementsByTagName(tagName)

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

<div> Div 1
</div> <div> Div 2
</div> <p> I'm Paragraph 1
</p>
<p> I'm Paragraph 2
</p> <button>Button 1</button>
<button>Button 2</button>

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

document.getElementsByTagName("div") // HTMLCollection
0: <div>​ Div 1
1: <div>​ Div 2
length: 2

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

document.getElementsByTagName("p") // HTMLCollection
0: <p>​ I'm Paragraph 1
1: <p>​ I'm Paragraph 2
length: 2

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

document.getElementsByTagName("button") // HTMLCollection
// 0: <button>​ Button 1
// 1: <button>​ Button 2
// length: 2

4. getSelection()

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

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

<div>I'm Div1</div>

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

document.getSelection() // Selection
// anchorNode: #text
// ...

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

// TODO: Complete this.

5. getElementsByNameиquerySelector(selector)

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

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

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

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

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

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

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

<div> Div 1
</div> <div> Div 2
</div>
<div> Div 3
</div>

document.querySelector("div") >> div Div 1

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

Имя класса

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

<div class="tab div1"> Div 1
</div> <div class="tab div2"> Div 2
</div>
<div class="div3"> Div 3
</div>

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

document.querySelector(".div1") >> div Div 1

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

document.querySelector(".div2") >> div Div 2

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

document.querySelector(".tab") >> div Div 1

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

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

<div id="div1"> Div 1
</div> <div id="div2"> Div 2
</div>
<div id="div3"> Div 3
</div>

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

document.querySelector("#div1")

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

6. querySelectorAll(selector)

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

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

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

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

Имя элемента

<div> Div 1
</div> <div> Div 2
</div>
<div> Div 3
</div>
<p> I'm Paragraph 1
</p>
<p> I'm Paragraph 2
</p>

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

document.querySelectorAll("div") // NodeList(3)
// 0: div Div 1
// 1: div Div 2
// 2: div Div 3

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

Имя класса

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

<div class="tab div1"> Div 1
</div> <div class="div2"> Div 2
</div>
<p class="tab par1"> I'm Paragraph
</p>

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

document.querySelectorAll(".tab") // NodeList(2)
// 0: div Div 1
// 1: p I'm Paragraph

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

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

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

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

<div class="div1" id="tab"> Div 1
</div> <div class="div2" id="tab"> Div 2
</div>
<p class="tab par1" id="par1"> I'm Paragraph
</p>

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

document.querySelectorAll("#tab") // NodeList(2)
// 0: div Div 1
// 1: div Div 2

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

7. parentNode.insertBefore(newNode, refNode)

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

<div id="parent"> Parent Node <div id="child">Child Node</div>
</div>

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

const newNode = document.createElement("b")
newNode.appendChild(document.createTextNode("Bold Child Node")) parent.insertBefore(newNode, child)

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

<div id="parent"> Parent Node <b>Bold Child Node</b> <div id="child">Child Node</div>
</div>

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

<div> Other Node <div id="othernode"> Other Node Child </div>
</div> <div id="parent"> Parent Node <div id="child">Child Node</div>
</div>

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

parent.insertBefore(othernode, child)

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

<div> Other Node
</div> <div id="parent"> Parent Node <div id="othernode"> Other Node Child </div> <div id="child">Child Node</div>
</div>

8. appendChild(node)

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

<div id="divNode"> <div>Div Node Child</div> <div>Div Node Child</div> <p>Paragraph Node Child</p>
</div>

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

const pEl = document.createElement("p")
pEl.append(createTextNode("Paragraph Node Child")) divNode.appendChild(pEl)

Результат:

<div id="divNode"> <div>Div Node Child</div> <div>Div Node Child</div> <p>Paragraph Node Child</p> <p>Paragraph Node Child</p> </div>

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

<p id="pNode">Paragraph Node</p> <div id="divNode"> <div>Div Node Child</div> <div>Div Node Child</div> <p>Div Node Child</p>
</div>

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

divNode.appendChild(pNode)

Результат:

<div id="divNode"> <div>Div Node Child</div> <div>Div Node Child</div> <p>Div Node Child</p> <p id="pNode">Paragraph Node</p> </div>

9. createElement(elementName)

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

const divNode = document.createElement("div")
const buttonNode = document.createElement("button")

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

divNode instanceof HTMLDivElement
>> true divNode instanceof HTMLElement
>> true buttonNode instanceof HTMLButtonElement
>> true buttonNode instanceof HTMLElement
>> true

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

10. createTextNode(textString)

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

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

<div id="parentNode"> <div>Child Node</div>
</div>

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

parentNode.appendChild(document.createTextNode("Text"))

Результат:

<div id="parentNode"> <div>Child Node</div> Text
</div>

11. removeChild(childNode)

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

<div id="parentNode"> <div id="childNode1">Child Node 1</div> <div id="childNode2">Child Node 2</div> <div id="childNode3">Child Node 3</div>
</div>

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

parentNode.removeChild(childNode1)

Результат:

<div id="parentNode"> <div id="childNode2">Child Node 2</div> <div id="childNode3">Child Node 3</div>
</div>

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

NotFoundError: Node.removeChild: The node to be removed is not a child of this node

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

ReferenceError: childNode11 is not defined

12. replaceChild(newNode, childNode)

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

<div id="node">Node 1</div> <div id="parentNode"> <div id="childNode2">Child Node 2</div> <div id="childNode3">Child Node 3</div>
</div>

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

parentNode.replaceChild(node, childNode2)

Результат:

<div id="parentNode"> <div id="node">Node 1</div> <div id="childNode3">Child Node 3</div>
</div>

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

<div id="parentNode"> <div id="childNode1">Child Node 1</div> <div id="childNode2">Child Node 2</div> <div id="childNode3">Child Node 3</div>
</div>

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

parentNode.replaceChild(childNode1, childNode2)

Результат:

<div id="parentNode"> <div id="childNode1">Child Node 1</div> <div id="childNode3">Child Node 3</div>
</div>

13. setAttribute(attrKey, attrValue)

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

<div id="divNode">Div </div>

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

divNode.setAttribute("class", "panel")

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

<div id="divNode" class="panel">Div</div>

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

divNode.setAttribute("class", "panel panel-group")

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

<div id="divNode" class="panel panel-group">Div</div>

14. getAttribute(attrKey)

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

<div id="divNode" class="panel panel-group">Div</div>

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

divNode.getAttribute("id") // divNode

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

divNode.getAttribute("class") // "panel panel-group"

15. getAttributeNames()

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

<div id="divNode" class="panel panel-group">Div</div>

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

divNode.getAttributeNames() // Array[ "id", "class" ]

16. cloneNode()

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

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

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

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

<div id="div1Node"> Div 1
</div> <div id="div2Node"> Div 2
</div>

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

div2Node.appendChild(div1Node.cloneNode())

Результат:

<div id="div1Node"> Div 1
</div> <div id="div2Node"> Div 2 <div id="div1Node"></div>
</div>

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

div2Node.appendChild(div1Node.cloneNode(true))

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

<div id="div1Node"> Div 1
</div> <div id="div2Node"> Div 2 <div id="div1Node"> Div 1 </div>
</div>

17. classList

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

<div id="divNode" class="panel panel-group item"></div>

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

divNode.classList // DOMTokenList [ "panel", "pane-group", "item" ]

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

add

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

<div id="divNode" class="panel panel-group item"></div>

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

divNode.classList.add("item-group") // <div id="divNode" class="panel panel-group item item-group"></div>

contains

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

<div id="divNode" class="panel panel-group item"></div>

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

divNode.classList.contains("panel") // true

item(index)

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

<div id="divNode" class="panel panel-group item"></div>

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

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

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

remove

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

<div id="divNode" class="panel panel-group item"></div>

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

divNode.classList.remove("panel")

Результат:

<div id="divNode" class="panel-group item"></div>

replace

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

<div id="divNode" class="panel panel-group item"></div>

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

divNode.classList.replace("item", "tab")

Результат:

<div id="divNode" class="panel panel-group tab"></div>

toggle

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

<div id="divNode" class="panel panel-group item"></div>

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

Пример №1

divNode.classList.toggle("panel")

Результат:

<div id="divNode" class="panel-group item"></div>

Пример №2

divNode.classList.toggle("panel")

Результат:

<div id="divNode" class="panel panel-group item"></div>

Пример №3

divNode.classList.toggle("panel")

Результат:

<div id="divNode" class="panel-group item"></div>

18. parentNode

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

<div id="divNode"> Parent Node <div id="divChildNode"></div>
</div>

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

divChildNode.parentNode // div ParentNode

19. parentElement

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

20. innerHTML

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

<div id="divNode"> <p>I'm Paragraph</p> <div id="childNode1">Chidl Node 1</div> <div id="childNode2">Child Node 2</div> <div id="childNode3">Child Node 3</div>
</div>

innerHTML из #divNode будет:

divNode.innerHTML // "\n <p>I'm Paragraph</p>\n <div id=\"childNode1\">Chidl Node 1</div>\n <div id=\"childNode2\">Child Node 2</div>\n <div id=\"childNode3\">Child Node 3</div>\n"

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

<div id="divNode"> Div 1
<div>

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

divNode.innerHTML += "<p>I'm Paragraph</p>"

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

<div id="divNode"> Div 1 <p>I'm Paragraph</p>
<div>

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

divNode.innerHTL = "<p>I'm Paragraph</p>" + divNode.innerHTML

21. innerText

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

<div id="divNode"> <p>I'm Paragraph</p> <div id="childNode1">Chidl Node 1</div> <div id="childNode2">Child Node 2</div> <div id="childNode3">Child Node 3</div>
</div>

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

divNode.innerText // "I'm Paragraph\n\nChidl Node 1\nChild Node 2\nChild Node 3"

Заключение

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

Автор: Chidume Nnamdi

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

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