13 Что нужно знать: работа с DOM с помощью JavaScript

Автор: Милош Протич

Переводчик: Front-end Xiaozhi

Источник: впечатляющие веб-сайты.

DOM или объектная модель документа является корнем всех объектов на веб-странице. Он представляет структуру документа и связывает страницы с языком программирования. Его структура представляет собой логическое дерево. Каждая ветвь заканчивается узлом, и каждый узел содержит дочерние узлы, объекты.DOM APIОчень большой, в этой статье мы обсуждаем только наиболее часто используемые и полезные.API.

document.querySelector / document.querySelectorAll

document.querySelectorМетод возвращает первый документ в документе, который соответствует указанному селектору или группе селекторов.htmlэлемент. Если совпадений не найдено, вернутьnull.

document.querySelectorAllМетод возвращает список элементов в документе, соответствующих указанной группе селекторов (обход узлов документа с использованием предварительного порядка в глубину). Возвращаемый объектNodeList.

// 返回第一个 ul 元素
const list = document.querySelector('ul')
// 返回所有类名为 info 或者 warning 的 div 元素
const elements = document.querySelectorAll('div.info, div.warning');

document.createElement

В HTML-документеDocument.createElement(tagName)метод, созданныйtagNameуказанный элемент HTML илиHTMLUnknownElement,еслиtagNameне опознано.

Node.appendChild

Node.appendChild()метод добавляет узел в конец списка дочерних элементов данного родительского узла. Обратите внимание, что если данный потомок является ссылкой на существующий узел в документе, он будет перемещен в новую позицию. Взгляните на пример:

let list = document.createElement('ul');
['北京', '上海', '深圳'].forEach(city => {
  let listItem = document.createElement('li')
  listItem.innerText = city
  list.appendChild(listItem)
})
document.body.appendChild(list)

Node.insertBefore

Этот метод вставляет данный узел перед дочерним узлом, на который ссылаются, в данном родительском узле (и возвращает вставленный узел)

Псевдокод выглядит так:

• Пекин
• Шанхай
• Шэньчжэнь
• ↓

Node.insertBefore('厦门','北京')

• ↓
• Сямэнь
• Пекин
• Шанхай
• Шэньчжэнь

    let list = document.querySelector('ul');
    let firstCity = list.querySelector('ul > li');
    let newCity = document.createElement('li');
    newCity.textContent = 'San Francisco';
    list.insertBefore(newCity, firstCity);

Node.removeChild

Node.removeChildметод изDOMЧтобы удалить детский узел и удаленные узлы возврата. Обратите внимание, что возвращенный узел больше неDOMчасть, но все еще существует в памяти. Если не обращаться должным образом, это может привести к утечке памяти.

let list = document.querySelector('ul');
let firstItem = list.querySelector('li');
let removedItem = list.removeChild(firstItem);

Node.replaceChild

Этот метод заменяет дочерний узел в родительском узле (и возвращает старый дочерний узел после замены). Обратите внимание, что этот метод может привести к ошибкам сNode.removeChildАналогичная проблема с утечкой памяти.

let list = document.querySelector('ul');
let oldItem = list.querySelector('li');
let newItem = document.createElement('li');
newItem.innerHTML = '前端小智';
let replacedItem = list.replaceChild(newItem, oldItem);

Node.cloneNode

Node.cloneNode(deep)Метод возвращает копию узла, вызвавшего метод, **deep(необязательно)** указывает, следует ли использовать глубокое клонирование, если оноtrue, все узлы-потомки этого узла также будут клонированы, если онfalse, клонируйте только сам узел.

let list = document.querySelector('ul');
let clone = list.cloneNode();

Element.getAttribute / Element.setAttribute

Element.getAttributeметод возвращает значение данного атрибута элемента и наоборот,Element.setAttributeУстанавливает значение атрибута на данном элементе.

let list = document.querySelector('ul');
list.setAttribute('id', 'my-list');
let id = list.getAttribute('id');
console.log(id); // outputs my-list

Element.hasAttribute / Element.removeAttribute

Element.hasAttributeМетод проверяет, имеет ли данный элемент указанный атрибут, возвращаемое значениеboolean. позвонивElement.removeAttributeметод, мы можем удалить атрибут с заданным именем из элемента.

let list = document.querySelector('ul');
if (list.hasAttribute('id')) {
    console.log('list has an id');
    list.removeAttribute('id');
};

Element.insertAdjacentHTML

element.insertAdjacentHTML(position, text)Преобразует указанный текст в HTML или XML и вставляет полученный узел в дерево DOM в указанной позиции. Он не выполняет повторный анализ используемого элемента, поэтому он не уничтожает существующие элементы внутри элемента. Это позволяет избежать дополнительного шага сериализации, делая его быстрее, чем прямые манипуляции с innerHTML.

position— это позиция относительно элемента и должна быть одной из следующих строк:

beforebegin: перед самим элементом.afterbegin: Вставить перед первым дочерним узлом внутри элемента.beforeend: Вставить после последнего дочернего узла внутри элемента.afterend: за самим элементом.

textэто строка, которую нужно преобразовать в HTML или XML и вставить в дерево DOM.

<!-- beforebegin -->
<div>
  <!-- afterbegin -->
  <p>Hello World</p>
  <!-- beforeend -->
</div>
<!-- afterend -->

Пример:

var list = document.querySelector('ul');
list.insertAdjacentHTML('afterbegin', '<li id="first-item">First</li>');

Суммировать

Я надеюсь, что эта статья была вам полезна и помогла вам понять DOM. Правильная обработка дерева DOM очень важна, и неправильное выполнение может иметь серьезные последствия.

оригинал:Woohoo.impressiveWeb.com/10-Эссен вопрос ах...

общаться с

Статья постоянно обновляется каждую неделю. Вы можете выполнить поиск «Big Move to the World» в WeChat, чтобы прочитать и обновить ее как можно скорее (на одну или две статьи раньше, чем в блоге). Эта статья находится на GitHub.GitHub.com/QQ449245884…Он был включен, и многие мои документы были разобраны. Добро пожаловать в Звезду и совершенство. Вы можете обратиться в тестовый центр для ознакомления во время собеседования. Кроме того, обратите внимание на паблик-аккаунт и ответьте в фоновом режиме.Благосостояние, вы можете увидеть преимущества, вы знаете. [1]:woohoo.fun на bug.com/?UTM_source…