15 методов JavaScript для управления DOM для веб-разработчиков

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

HTML определяет структуру DOM по умолчанию. Однако во многих случаях вы можете захотеть манипулировать этим с помощью JavaScript, обычно для добавления дополнительных функций на сайт.
ИЗОБРАЖЕНИЕ: Разработчики GoogleВ этом посте вы найдете список из 15 основных методов JavaScript, которые помогают манипулировать DOM. Скорее всего, вы будете часто использовать эти методы в своем коде, а также познакомитесь с ними в наших руководствах по JavaScript.

Читайте также: 4 полезных утверждения JavaScript, которые вы должны знать

1. querySelector ()
   Метод querySelector () возвращает первый элемент, который соответствует одному или нескольким селекторам CSS. Если совпадений не найдено, возвращается ноль.

До появления querySelector () разработчики широко использовали getElementById () метод, который выбирает элемент с указанным значением id.

Хотя getElementById () по-прежнему является полезным методом, но с более новыми методами querySelector () и querySelectorAll () мы можем нацеливать элементы на основе любого CSS селекторТаким образом, у нас больше гибкости.
Синтаксис
var ele = document.querySelector (селектор);

• ele – Первый соответствующий элемент или ноль (если ни один элемент не соответствует селекторам)
• селектор – один или несколько CSS-селекторов, таких как “#fooId”, “.fooClassName”, “.class1.class2” или “.class1, .class2”

Пример кода
В этом примере первый

<

div> выбирается методом querySelector (), а его цвет меняется на красный.

абзац первый

абзац второй

абзац третий

var firstDiv = document.querySelector (‘div’);
firstDiv.style.color = ‘red’;

Интерактивная Демо

Протестируйте метод querySelector () в следующей интерактивной демонстрации. Просто введите селектор, соответствующий тем, которые вы можете найти внутри синих полей (например, #three), и нажмите кнопку «Выбрать». Обратите внимание, что если вы введете .block, будет выбран только его первый экземпляр.

Увидеть перо JS – querySelector HONGKIAT (@hkdc) на CodePen,
2. querySelectorAll ()
В отличие от querySelector (), который возвращает только первый экземпляр всех соответствующих элементов, querySelectorAll () возвращает все элементы, которые соответствуют указанному селектору CSS.

Соответствующие элементы возвращаются как NodeList объект, который будет пустым объектом, если не найдено подходящих элементов.
Синтаксис
var eles = document.querySelectorAll (селектор);

• eles – объект NodeList со всеми соответствующими элементами в качестве значений свойств. Объект пуст, если совпадений не найдено.
• селектор – один или несколько CSS-селекторов, таких как “#fooId”, “.fooClassName”, “.class1.class2” или “.class1, .class2”

Пример кода
В приведенном ниже примере используется тот же HTML, что и в предыдущем. Однако в этом примере все абзацы выделены с помощью querySelectorAll () и окрашены в синий цвет.

абзац первый

абзац второй

абзац третий

var paras = document.querySelectorAll (‘p’);
для (вар п абзацев)
p.style.color = ‘blue’;

1. addEventListener ()

События относятся к тому, что происходит с элементом HTML, таким как щелчок, фокусировка или загрузка, на которую мы можем реагировать с помощью JavaScript. Мы можем назначить функции JS Слушать для этих событий в элементах и ​​сделать что-то, когда событие произошло.

Есть три способа назначить функцию определенному событию.

Если foo () является пользовательской функцией, вы можете зарегистрировать ее как прослушиватель события щелчка (вызывать ее при нажатии на элемент кнопки) тремя способами:

1. бдительный

2. var btn = document.querySelector (‘button’);
   btn.onclick = Foo;

3. var btn = document.querySelector (‘button’);
   btn.addEventListener (‘click’, foo);

Метод addEventListener () (третье решение) имеет некоторые плюсы; это новейший стандарт, позволяющий назначать более одной функции в качестве прослушивателей событий для одного события – и поставляется с полезным набором опций.
Синтаксис
ele.addEventListener (evt, слушатель, [options]);

• ele – HTML-элемент, который прослушивает прослушиватель событий.
• evt – целевое событие.
• слушатель – как правило, функция JavaScript.
• options – (необязательно) Объект с набором логических свойств (перечисленных ниже).

Опции
Что происходит, когда оно установлено в true?
захватить

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

Чтобы использовать эту функцию, вы можете использовать 2 синтаксиса:

1. ele.addEventListener (evt, слушатель, правда)
2. ele.addEventListener (evt, слушатель, {capture: true});

один раз

Слушатель вызывается только в первый раз, когда происходит событие, затем он автоматически отсоединяется от события и больше не будет вызываться им.

пассивный

Действие по умолчанию для события не может быть остановлено с помощью preventDefault () метод.

Пример кода
В этом примере мы добавляем прослушиватель события click с именем foo, к HTML-тег

Нажми на меня

var btn = document.querySelector (‘button’);
btn.addEventListener ( ‘щелчок’, Foo);
function foo () {alert (‘hello’); }
Интерактивная Демо
Назначьте пользовательскую функцию foo () в качестве прослушивателя событий для любого из трех следующих событий: ввод, нажатие или наведение курсора мыши и запуск выбранного события в нижнем поле ввода путем наведения, щелчка или ввода его.

Увидеть перо JS – addEventListener HONGKIAT (@hkdc) на CodePen,
4. removeEventListener ()
Метод removeEventListener () отсоединяет прослушиватель событий, ранее добавленный с помощью метода addEventListener (), от события, которое он прослушивает.
Синтаксис
ele.removeEventListener (evt, слушатель, [options]);
Использует тот же синтаксис, что и вышеупомянутый метод addEventListener () (за исключением опции, которая была исключена). Эти параметры используются, чтобы быть очень конкретными при идентификации слушателя, который будет отсоединен.
Пример кода
Следуя примеру кода, который мы использовали в addEventListener (), здесь мы удаляем прослушиватель события click с именем foo из элемент.

btn.removeEventListener ( ‘щелчок’, Foo);
5. createElement ()
Метод createElement () создает новый элемент HTML, используя имя создаваемого тега HTML, например, «p» или «div».

Позже вы можете добавить этот элемент на веб-страницу, используя различные методы для вставки DOM, такие как AppendChild () (см. Далее в этом посте).
Синтаксис
document.createElement (тэгу);

• tagName – имя тега HTML, который вы хотите создать.

Пример кода
В следующем примере вы можете создать новый элемент абзаца:
var pEle = document.createElement (‘p’)
6. AppendChild ()
Метод appendChild () добавляет элемент в качестве последнего дочернего элемента к элементу HTML, который вызывает этот метод.

Дочерний элемент для вставки может быть либо вновь созданным элементом, либо уже существующим. В последнем случае он будет перемещен из своей предыдущей позиции в позицию последнего потомка.
Синтаксис
ele.appendChild (childEle)

• ele – HTML-элемент, к которому childEle добавляется как последний дочерний элемент.
• childEle – HTML-элемент, добавленный как последний дочерний элемент элемента ele.

Пример кода
В этом примере мы вставляем элемент как дитя

<

div> элемент, используя appendChild () и вышеупомянутые методы createElement ().

var div = document.querySelector (‘div’);
var strong = document.createElement (‘strong’);
strong.textContent = ‘Hello’;
div.appendChild (сильный);
Интерактивная Демо
В следующей интерактивной демонстрации буквы от #a до #r являются дочерними элементами селекторов идентификаторов # parent-one, # parent-two и # parent-three.

Проверьте, как работает метод appendChild (), введя одно родительское и одно дочернее имя селектора в поля ввода ниже. Вы также можете выбрать детей, принадлежащих другому родителю.

Увидеть перо JS – appendChild HONGKIAT (@hkdc) на CodePen,
7. RemoveChild ()
Метод removeChild () удаляет указанный дочерний элемент из элемента HTML, который вызывает этот метод.
Синтаксис
ele.removeChild (childEle)

• ele – родительский элемент childEle.
• childEle – дочерний элемент ele.

Пример кода
В этом примере мы удаляем элемент, который мы добавили в детстве к

<

div> тег в примере кода для предыдущего метода appendChild ().
div.removeChild (сильный);
8. replaceChild ()
Метод replaceChild () заменяет дочерний элемент другим, принадлежащим родительскому элементу, который вызывает этот метод.
Синтаксис
ele.replaceChild (newChildEle, oldChileEle)

• ele – Родительский элемент, дочерние элементы которого должны быть заменены.
• newChildEle – дочерний элемент элемента ele, который заменит oldChildEle.
• oldChildEle – Дочерний элемент элемента ele, который будет заменен на newChildEle.

Пример кода
В этом примере дочерний элемент принадлежность к

<

div> родительский элемент заменяется вновь созданным тег.

Привет

var em = document.createElement (’em’);
var strong = document.querySelector (‘strong’);
var div = document.querySelector (‘div’);
em.textContent = ‘hi’;
div.replaceChild (em, сильный);
9. cloneNode ()
Когда вам нужно создать новый элемент, который должен совпадать с уже существующим элементом на веб-странице, вы можете просто создать копию уже существующего элемента с помощью метода cloneNode ().
Синтаксис
var dupeEle = ele.cloneNode ([deep])

• dupeEle – Копия элемента ele.
• ele – HTML-элемент, который будет скопирован.
• глубокий – (необязательно) логическое значение. Если для него установлено значение true, dupeEle будет иметь все дочерние элементы, которые есть у ele, а если для него установлено значение false, он будет клонирован без дочерних элементов.

Пример кода
В этом примере мы создаем копию для элемент с cloneNode (), затем мы добавляем его в

<

div> тег как дочерний элемент с вышеупомянутым методом appendChild ().

В результате,

<

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

Привет

var strong = document.querySelector (‘strong’);
var copy = strong.cloneNode (true);
var div = document.querySelector (‘div’);
div.appendChild (копия);

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

Если указанный дочерний элемент не существует или вы передаете явно нуль на его место, вставляемый дочерний элемент добавляется как последний дочерний элемент родителя (аналогично appendChild ()).
Синтаксис
ele.insertBefore (newEle, refEle);

• ele – Родительский элемент.
• newEle – новый HTML-элемент для вставки.
• refEle – дочерний элемент элемента ele, перед которым будет добавлен newEle.

Пример кода
В этом примере мы создаем новый элемент с текстом внутри, и добавьте его перед элемент внутри

<

div> родительский элемент.

Привет

var em = document.createElement (’em’);
var strong = document.querySelector (‘strong’);
var div = document.querySelector (‘div’);
em.textContent = ‘hi’;
div.insertBefore (em, strong);

Интерактивная Демо
Эта интерактивная демонстрация работает аналогично нашей предыдущей демонстрации, относящейся к методу appendChild (). Здесь вам нужно только ввести селекторы идентификаторов двух дочерних элементов (от #a до #r) в поля ввода, и вы можете увидеть, как метод insertBefore () перемещает первого указанного дочернего элемента перед вторым.

Увидеть перо JS – insertBefore HONGKIAT (@hkdc) на CodePen,
11. createDocumentFragment ()
Метод createDocumentFragment () может быть не так хорошо известен, как другие в этом списке, тем не менее он важен, особенно если вы хотите массово вставить несколько элементов, например, добавить несколько строк в таблицу.

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

Почему бы нам просто не добавить элементы непосредственно в дерево DOM? Поскольку вставка DOM вызывает изменения макета, и это дорогостоящий процесс браузера, поскольку несколько последовательных вставок элементов будут вызывать больше изменений макета.

С другой стороны, добавление элементов в объект DocumentFragment не вызывает изменений макета, поэтому вы можете добавить к нему столько элементов, сколько захотите, прежде чем передавать их в дерево DOM, вызывая изменение макета только на этом этапе.
Синтаксис
document.createDocumentFragment ()
Пример кода
В этом примере мы создаем несколько строк и ячеек таблицы с помощью метода createElement (), затем добавляем их в объект DocumentFragment и, наконец, добавляем этот фрагмент документа в HTML

<

table> используя метод appendChild ().

В результате пять строк – каждая из которых содержит одну ячейку с номером от 1 до 5 в качестве содержимого – будут вставлены в таблицу.

var table = document.querySelector (“таблица”);
var df = document.createDocumentFragment ();

для (var i = 0; i <5; i ++) {
  var td = document.createElement (“td”);
  var tr = document.createElement (“tr”);
  td.textContent = i;
  tr.appendChild (тд)
  df.appendChild (тр);
}

table.appendChild (DF);

1. getComputedStyle ()
   Иногда вы хотите проверить значения свойств CSS элемента перед внесением каких-либо изменений. Вы можете использовать ele.style свойство делать то же самое, однако метод getComputedStyle () был создан только для этой цели, он возвращает вычисленные значения только для чтения всех свойств CSS указанного элемента HTML.
   Синтаксис
   var style = getComputedStyle (ele, [pseudoEle])

• стиль – А CSSStyleDeclaration объект, возвращаемый методом. Он содержит все свойства CSS и их значения элемента ele.
• ele – HTML-элемент, из которого извлекаются значения свойств CSS.
• pseudoEle – (необязательно) Строка, представляющая псевдоэлемент (например, ‘: after’). Если это упомянуто, то будут возвращены свойства CSS указанного псевдоэлемента, связанного с ele.

Пример кода
В этом примере мы получаем и оповещаем вычисленное значение ширины

<

div> элемент с помощью метода getComputedStyle ().

var style = getComputedStyle (document.querySelector (‘div’));
оповещения (style.width);

1. SetAttribute ()
   Метод setAttribute () либо добавляет новый атрибут в элемент HTML, либо обновляет значение атрибута, который уже существует.
   Синтаксис
   ele.setAttribute (имя, значение);

• ele – HTML-элемент, к которому добавлен атрибут, или атрибут которого обновлен.
• name – имя атрибута
• значение – значение атрибута.

Пример кода
В этом примере мы добавляем contenteditable приписать

<

div> используя метод setAttribute (), который сделает его содержимое редактируемым.

Привет

var div = document.querySelector (‘div’);
div.setAttribute (‘contenteditable’, ”)

1. GetAttribute ()
   Метод getAttribute () возвращает значение указанного атрибута, принадлежащего определенному элементу HTML.
   Синтаксис
   ele.getAttribute (имя);

• ele – HTML-элемент, атрибут которого запрашивается.
• name – имя атрибута

Пример кода
В этом примере мы предупреждаем значение атрибута contenteditable, принадлежащего

<

div> элемент с помощью метода getAttribute ().

Привет

var div = document.querySelector (‘div’);
Оповещение (div.getAttribute ( ‘contenteditable’))

1. removeAttribute ()
   Метод removeAttribute () удаляет заданный атрибут определенного элемента HTML.
   Синтаксис
   ele.removeAttribute (имя);

• ele – HTML-элемент, атрибут которого должен быть удален.
• name – имя атрибута

Пример кода
В этом примере мы удаляем атрибут contenteditable из

<

div> элемент. В результате

<

div> больше не будет редактируемым

Привет

var div = document.querySelector (‘div’);
div.removeAttribute ( ‘contenteditable’);

Программы для Windows, мобильные приложения, игры - ВСЁ БЕСПЛАТНО, в нашем закрытом телеграмм канале - Подписывайтесь:)