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

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

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

    HTML определяет структура DOM по умолчанию. Однако во многих случаях вы можете манипулировать этим с помощью JavaScript, обычно для того, чтобы добавить дополнительные функции на сайт.

    ИЗОБРАЖЕНИЕ: Разработчики Google

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

    1. querySelector ()

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

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

    Хотя getElementById () все еще полезный метод, но с более новым querySelector () а также querySelectorAll () методы, которые мы свободны целевые элементы на основе любого селектора CSS, таким образом, у нас больше гибкости.

    Синтаксис
    var ele = document.querySelector (селектор);
    • Ele - Первый соответствующий элемент или ноль (если ни один элемент не соответствует селекторам)
    • селектор - один или несколько селекторов CSS, таких как "#FooId", ".FooClassName", ».Class1.class2", или же ".class1, .class2"
    Пример кода

    В этом примере первый

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

     
    абзац первый
     
    абзац второй
     
    разделить один
     
    абзац третий
     
    Див два
     
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'red';
    Интерактивная Демо

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

    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'); for (var p параграфов) p.style.color = 'blue';

    3. 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, слушатель, [опции]);
    • Ele - HTML-элемент, который прослушивает прослушиватель событий.
    • ЭВТ - Целевое мероприятие.
    • слушатель - Как правило, функция JavaScript.
    • опции - (необязательно) Объект с набором логических свойств (перечисленных ниже).
    Опции Что происходит, когда установлено правда?
    захватить

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

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

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

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

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

    В этом примере мы добавляем прослушиватель события click Foo, к 

     var btn = document.querySelector ('button'); btn.addEventListener ( 'нажмите', Foo); function foo () alert ('hello');
    Интерактивная Демо

    Назначьте Foo () Пользовательская функция в качестве прослушивателя событий для любого из трех следующих событий: вход, щелчок или же Mouseover & вызвать выбранное событие в нижнем поле ввода, наведя на него курсор, щелкнув или введя его.

    4. removeEventListener ()

    removeEventListener () метод отсоединяет слушателя события ранее добавлено с addEventListener () метод от события, которое он слушает.

    Синтаксис
    ele.removeEventListener (evt, слушатель, [параметры]);

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

    Пример кода

    Следуя примеру кода, который мы использовали в addEventListener (), здесь мы удаляем обработчик события click под названием Foo от