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

var ele = document.querySelector (селектор);

вибирається за допомогою 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 синтаксису: ele.addEventListener (evt, listener, true) ele.addEventListener (evt, слухач, capture: true);
один раз	Слухач викликається лише в перший раз, коли відбувається подія, після чого він автоматично від'єднується від події, і він більше не буде викликаний ним..
пасивний	Дія події за умовчанням не може бути зупинена методом preventDefault ().

Приклад коду

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

Натисніть Мене

 var btn = document.querySelector ('кнопка'); btn.addEventListener ('click', foo); function foo () alert ('hello'); 

Інтерактивна демонстрація

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

4. removeEventListener ()

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

Синтаксис

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

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

Приклад коду

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

 btn.removeEventListener ('click', foo);

5. createElement ()

The createElement () метод створює новий елемент HTML за допомогою ім'я тега HTML бути створеними, наприклад 'p' або "div".

Пізніше ви можете додати цей елемент до веб-сторінки, використовуючи різні методи для вставки DOM, як от AppendChild () (див. далі в цій публікації).

Синтаксис

document.createElement (тегName);

• tagName - Ім'я тега HTML, який потрібно створити.

Приклад коду

У наступному прикладі можна створити новий елемент абзацу:

var pEle = document.createElement ('p')

6. appendChild ()

The appendChild () метод додає елемент як останню дитину до елемента HTML, який викликає цей метод.

Дитина, яку потрібно вставити, може бути або a щойно створений елемент, або вже існуючий. В останньому випадку вона буде переміщена з попередньої позиції на позицію останньої дитини.

Синтаксис

ele.appendChild (childEle)

• еле - Елемент HTML, до якого дитина додано як остання дитина.
• дитина - Елемент HTML, доданий як остання дочірня еле.

Приклад коду

У цьому прикладі ми вставляємо a елементом є як дитина a

елемент за допомогою appendChild () і вищезазначене createElement () методів.

 var div = document.querySelector ('div'); var strong = document.createElement ('сильний'); strong.textContent = 'Привіт'; div.appendChild (сильний);

Інтерактивна демонстрація

У наступній інтерактивній демонстрації, листи від #a до #r є дочірніми елементами # батько-один, # батько-два, і # батько-три селектори ідентифікаторів.

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

7. removeChild ()

The removeChild () метод видаляє вказаний дочірній елемент з елемента HTML, який викликає цей метод.

Синтаксис

ele.removeChild (дитяче)

• еле - Батьківський елемент дитина.
• дитина - Дочірній елемент еле.

Приклад коду

У цьому прикладі ми видаляємо елемент, який ми додали як дитину до

тега на прикладі коду для попереднього appendChild () метод.

div.removeChild (сильний);

8. replaceChild ()

The replaceChild () метод замінює дочірній елемент на інший що належать до батьківського елемента, який викликає цей метод.

Синтаксис

ele.replaceChild (newChildEle, oldChileEle)

• еле - Батьківський елемент, з якого повинні бути замінені діти.
• newChildEle - Дитячий елемент еле що замінить oldChildEle.
• oldChildEle - Дитячий елемент еле, які будуть замінені на newChildEle.

Приклад коду

У цьому прикладі дочірній елемент що належать до

батьківський елемент замінюється новоствореним тег.

 
 Здрастуйте 

 var em = document.createElement ('em'); var strong = document.querySelector ('сильний'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.replaceChild (em, strong);

9. cloneNode ()

Коли ви повинні створити новий елемент, який повинен бути те ж, що й вже існуючий елемент на веб-сторінці можна просто створити копію вже існуючого елемента за допомогою cloneNode () метод.

Синтаксис

var dupeEle = ele.cloneNode ([глибокий])

• dupeEle - Копія еле елемент.
• еле - Елемент HTML, який потрібно скопіювати.
• глибокий - (необов'язково) логічне значення. Якщо встановлено значення вірно, dupeEle буде мати всі дочірні елементи еле має, якщо встановлено помилковий вона буде клонована без дітей.

Приклад коду

У цьому прикладі ми створюємо копію для елемент з cloneNode (), потім додаємо його до

тег як дочірній елемент з вищезазначеним appendChild () метод.

Як результат,

буде містити два елементи, обидва з Здрастуйте рядок як вміст.

 
 Здрастуйте 

 var strong = document.querySelector ('сильний'); var copy = strong.cloneNode (true); var div = document.querySelector ('div'); div.appendChild (копія); 

10. insertBefore ()

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

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

Синтаксис

ele.insertBefore (newEle, refEle);

• еле - Батьківський елемент.
• newEle - Новий елемент HTML, який потрібно вставити.
• refEle - Дочірній елемент еле перед яким newEle буде вставлено.

Приклад коду

У цьому прикладі ми створюємо нове елемент з деяким текстом всередині і додати його раніше елемент всередині

батьківський елемент.

 
 Здрастуйте 

 var em = document.createElement ('em'); var strong = document.querySelector ('сильний'); var div = document.querySelector ('div'); em.textContent = 'hi'; div.insertBefore (em, strong); 

Інтерактивна демонстрація

Ця інтерактивна демонстрація працює аналогічно нашому попередньому демо, що належить до appendChild () метод. Тут потрібно лише ввести селектори ідентифікаторів двох дочірніх елементів (з #a до #r) у вікнах введення, і ви можете побачити, як insertBefore () Метод переміщує першу зазначену дитину раніше другий.

11. createDocumentFragment ()

The createDocumentFragment () Метод може бути не так добре відомий, як інші в цьому списку, тим не менше є важливим, особливо якщо хочете вставити декілька елементів навалом, наприклад, додавання декількох рядків до таблиці.

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

Чому ми просто не додаємо елементи безпосередньо до дерева DOM? Тому що вставка DOM викликає зміни макета, і це процес дорогих браузерів оскільки багато послідовні вставки елементів призведуть до більших змін у макеті.

З іншого боку, додавання елементів до a Фрагмент документа об'єкт не викликає жодних змін у макеті, так що ви можете додати до нього стільки елементів, скільки потрібно, перш ніж передати їх у дерево DOM, викликаючи зміну макета лише в цій точці.

Синтаксис

document.createDocumentFragment ()

Приклад коду

У цьому прикладі ми створюємо кілька рядків і клітин таблиці з createElement () метод, а потім додати їх до Фрагмент документа об'єкт, нарешті, додає цей фрагмент документа до HTML

за допомогою 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(td) df.appendChild(tr);  table.appendChild(df); 

12. getComputedStyle ()

Іноді хочеться перевірте значення властивостей CSS елемента перед внесенням будь-яких змін. Ви можете використовувати ele.style власність робити те ж саме, однак getComputedStyle () Метод був зроблений саме з цією метою повертає обчислювані значення лише для читання всіх властивостей CSS зазначеного елемента HTML.

Синтаксис

var style = getComputedStyle (ele, [pseudoEle])

• стиль - A CSSStyleDeclaration об'єкт, повернутий методом. Він містить всі властивості CSS та їх значення еле елемент.
• еле - Елемент HTML, з якого вибираються значення властивостей CSS.
• псевдоEle - (необов'язково) Рядок, що представляє псевдоелемент (наприклад, ': after'). Якщо це згадано, то властивості CSS зазначеного псевдоелемента пов'язані з еле буде повернуто.

Приклад коду

У цьому прикладі ми отримуємо та оповіщаємо обчислені ширина значення a

елемент за допомогою getComputedStyle () метод.

 var style = getComputedStyle (document.querySelector ('div')); alert (style.width); 

13. setAttribute ()

The setAttribute () методом додає новий атрибут до елемента HTML або оновлює значення атрибута, який вже існує.

Синтаксис

ele.setAttribute (назва, значення);

• еле - Елемент HTML, до якого додано атрибут, або з якого атрибута оновлено.
• ім'я - Назва атрибута.
• значення - Значення атрибута.

Приклад коду

У цьому прикладі ми додаємо Зміствідповідних атрибут a

шляхом використання setAttribute () метод, який перетворить його зміст.

Здрастуйте

 var div = document.querySelector ('div'); div.setAttribute ("contenteditable", ") 

14. getAttribute ()

The getAttribute () метод повертає значення заданого атрибута що належать до певного елементу HTML.

Синтаксис

ele.getAttribute (назва);

• еле - Елемент HTML, з якого запитується атрибут.
• ім'я - Назва атрибута.

Приклад коду

У цьому прикладі ми сповіщаємо значення Зміствідповідних атрибут, що належить

елемент за допомогою getAttribute () метод.

Здрастуйте

 var div = document.querySelector ('div'); alert (div.getAttribute ("contenteditable")) 

15. removeAttribute ()

The removeAttribute () метод видаляє заданий атрибут певного елемента HTML.

Синтаксис

ele.removeAttribute (назва);

• еле - Елемент HTML, з якого потрібно видалити атрибут.
• ім'я - Назва атрибута.

Приклад коду

У цьому прикладі ми видаляємо Зміствідповідних атрибут з

елемент. В результаті

більше не можна редагувати.

Здрастуйте

 var div = document.querySelector ('div'); div.removeAttribute ('contenteditable'); 

15 уроків «Мистецтво війни» вчить вас про перемогу в житті

15 Лайтбокс бібліотеки для мобільного реагування

15 ідей, щоб купити або побудувати свій ідеальний стоячий стіл

Наступна стаття

15 Плагіни jQuery для створення смарт-стикових елементів

Попередня стаття

15 Надихаючі презентаційні відеоролики для підприємців