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

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

HTML определяет структуру DOM по умолчанию. Однако во многих случаях вы можете захотеть манипулировать этим с помощью JavaScript, обычно для добавления дополнительных функций на сайт.
DOM TreeИЗОБРАЖЕНИЕ: Разработчики 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. var btn = document.querySelector (‘button’);
    btn.onclick = Foo;

  2. 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, к

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 из

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *