Головна » Кодування » 15 Методи JavaScript для маніпулювання DOM для веб-розробників

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

    Як веб-розробник, вам часто доводиться маніпулювати DOM, об'єктна модель, яка використовується браузерами Вкажіть логічну структуру веб-сторінок і на основі цієї структури відображати елементи HTML на екрані.

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

    IMAGE: розробники Google

    У цій публікації ви знайдете список 15 основних методів JavaScript що допомога DOM маніпуляції. Можливо, ви часто будете використовувати ці методи у вашому коді, і ви також будете входити до них у наші уроки JavaScript.

    1. querySelector ()

    The querySelector () метод повертає перший елемент, що відповідає одному або декільком селекторам CSS. Якщо відповідність не знайдено, вона повертається нуль.

    Раніше querySelector () була введена, розробники широко використовували getElementById () метод, який вибирає елемент з вказаним id значення.

    Хоча getElementById () як і раніше корисний метод, але з новими querySelector () і querySelectorAll () методи, якими ми вільні цільові елементи на основі будь-якого селектора CSS, таким чином, ми маємо більше гнучкості.

    Синтаксис
    var ele = document.querySelector (селектор);
    • еле - Перший відповідний елемент або нуль (якщо жоден елемент не відповідає селекторам)
    • селектора - один або більше CSS-селекторів, таких як "#fooId", ".fooClassName", ".class1.class2", або ".class1, .class2"
    Приклад коду

    У цьому прикладі перший

    вибирається за допомогою querySelector () Метод і його колір змінюється на червоний.

     

    абзац перший

    абзац другий

    div один

    абзац третій

    div два
     var firstDiv = document.querySelector ('div'); firstDiv.style.color = 'червоний'; 
    Інтерактивна демонстрація

    Перевірте querySelector () Метод у наступному інтерактивному демо. Просто введіть селектор, що відповідає тим, які можна знайти всередині синіх полів (наприклад,. #three), і натисніть кнопку Вибрати. Зверніть увагу, що якщо ви вводите .блок, тільки його перша інстанція буде вибрано.

    2. querySelectorAll ()

    На відміну від querySelector () що повертає тільки перший екземпляр всіх відповідних елементів, querySelectorAll () повертає всі елементи, які відповідають вказаному селектору CSS.

    Відповідні елементи повертаються як NodeList об'єкт, який буде пустим об'єктом, якщо не знайдено відповідних елементів.

    Синтаксис
    var eles = document.querySelectorAll (селектор);
    • ель - A NodeList об'єкт з усіма відповідними елементами як значення властивостей. Об'єкт порожній, якщо не знайдено відповідності.
    • селектора - один або більше CSS-селекторів, таких як "#fooId", ".fooClassName", ".class1.class2", або ".class1, .class2"
    Приклад коду

    У прикладі нижче використовується той самий HTML, що й попередній. Однак у цьому прикладі всі абзаци вибираються за допомогою querySelectorAll (), і забарвлені в синій колір.

     

    абзац перший

    абзац другий

    div один

    абзац третій

    div два
     var par = document.querySelectorAll ('p'); для (var p з абзаців) p.style.color = 'blue'; 

    3. addEventListener ()

    Події зверніться до того, що відбувається з елементом HTML, таким як натискання, фокусування або завантаження, до яких ми можемо реагувати з JavaScript. Ми можемо призначити функції JS слухайте для цих подій в елементах і робити щось, коли подія відбулася.

    Є три способи призначити функцію певній події.

    Якщо foo () це спеціальна функція, яку ви можете зареєструвати як слухач подій натискання (викликати його після натискання елемента кнопки) трьома способами:

    1.  
    2.  var btn = document.querySelector ('кнопка'); btn.onclick = foo;
    3.  var btn = document.querySelector ('кнопка'); btn.addEventListener ('click', foo);

    Спосіб addEventListener () (третій розчин) деякі плюси; це останній стандарт, який дозволяє присвоювати більше однієї функції слухачам подій до однієї події - і містить корисний набір параметрів.

    Синтаксис
    ele.addEventListener (evt, слухач, [варіанти]);
    • еле - Елемент HTML, для якого слухає слухач подій.
    • evt - Цільова подія.
    • слухач - Як правило, функція JavaScript.
    • опції - (необов'язково) Об'єкт з набором логічних властивостей (перелічено нижче).
    Опції Що відбувається, коли вона встановлена ​​на вірно?
    захоплення

    Припиняє виникнення події, тобто запобігає виклику будь-яких слухачів подій для одного і того ж типу подій у предків елемента.

    Щоб скористатися цією функцією, можна використовувати 2 синтаксису:

    1. ele.addEventListener (evt, listener, true)
    2. ele.addEventListener (evt, слухач, capture: true);
    один раз

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

    пасивний

    Дія події за умовчанням не може бути зупинена методом preventDefault ().

    Приклад коду

    У цьому прикладі ми додаємо викликає подію слухача подій foo, до

     var btn = document.querySelector ('кнопка'); btn.addEventListener ('click', foo); function foo () alert ('hello'); 
    Інтерактивна демонстрація

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

    4. removeEventListener ()

    The removeEventListener () метод відключає слухача події раніше додано з addEventListener () метод від події, на яку він слухає.

    Синтаксис
    ele.removeEventListener (evt, слухач, [варіанти]);

    Використовує той же синтаксис, що й вищезгаданий addEventListener () метод (за винятком один раз опція виключена). Параметри використовуються для того, щоб бути дуже конкретними щодо ідентифікації слухача для від'єднання.

    Приклад коду

    Дотримуючись прикладу коду, який ми використовували в addEventListener (), тут ми видаляємо викликається подію, що викликає клік foo від