15 Методи JavaScript для маніпулювання DOM для веб-розробників
Як веб-розробник, вам часто доводиться маніпулювати DOM, об'єктна модель, яка використовується браузерами Вкажіть логічну структуру веб-сторінок і на основі цієї структури відображати елементи HTML на екрані.
HTML визначає структура DOM за замовчуванням. Однак у багатьох випадках вам може знадобитися маніпулювати цим за допомогою JavaScript, як правило, для того, щоб додайте додаткові функції на сайт.
У цій публікації ви знайдете список 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"
Приклад коду
У цьому прикладі перший абзац перший абзац другий абзац третій Перевірте На відміну від Відповідні елементи повертаються як У прикладі нижче використовується той самий HTML, що й попередній. Однак у цьому прикладі всі абзаци вибираються за допомогою абзац перший абзац другий абзац третій Події зверніться до того, що відбувається з елементом HTML, таким як натискання, фокусування або завантаження, до яких ми можемо реагувати з JavaScript. Ми можемо призначити функції JS слухайте для цих подій в елементах і робити щось, коли подія відбулася. Є три способи призначити функцію певній події. Якщо Спосіб Припиняє виникнення події, тобто запобігає виклику будь-яких слухачів подій для одного і того ж типу подій у предків елемента. Щоб скористатися цією функцією, можна використовувати 2 синтаксису: Слухач викликається лише в перший раз, коли відбувається подія, після чого він автоматично від'єднується від події, і він більше не буде викликаний ним.. Дія події за умовчанням не може бути зупинена методом preventDefault (). У цьому прикладі ми додаємо викликає подію слухача подій Призначення The Використовує той же синтаксис, що й вищезгаданий Дотримуючись прикладу коду, який ми використовували в The Пізніше ви можете додати цей елемент до веб-сторінки, використовуючи різні методи для вставки DOM, як от У наступному прикладі можна створити новий елемент абзацу: The Дитина, яку потрібно вставити, може бути або a щойно створений елемент, або вже існуючий. В останньому випадку вона буде переміщена з попередньої позиції на позицію останньої дитини. У цьому прикладі ми вставляємо a У наступній інтерактивній демонстрації, листи від Перевірте, як The У цьому прикладі ми видаляємо The У цьому прикладі дочірній елемент Коли ви повинні створити новий елемент, який повинен бути те ж, що й вже існуючий елемент на веб-сторінці можна просто створити копію вже існуючого елемента за допомогою У цьому прикладі ми створюємо копію для Як результат, The Якщо дочірний елемент, на який посилається, не існує або ви явно передаєте У цьому прикладі ми створюємо нове Ця інтерактивна демонстрація працює аналогічно нашому попередньому демо, що належить до The Це створює a Чому ми просто не додаємо елементи безпосередньо до дерева DOM? Тому що вставка DOM викликає зміни макета, і це процес дорогих браузерів оскільки багато послідовні вставки елементів призведуть до більших змін у макеті. З іншого боку, додавання елементів до a У цьому прикладі ми створюємо кілька рядків і клітин таблиці з Як результат, п'ять рядків - кожен з яких містить одну клітинку з числом від 1 до 5 як вміст - буде вставлено всередину таблиці. Іноді хочеться перевірте значення властивостей CSS елемента перед внесенням будь-яких змін. Ви можете використовувати У цьому прикладі ми отримуємо та оповіщаємо обчислені The У цьому прикладі ми додаємо The У цьому прикладі ми сповіщаємо значення The У цьому прикладі ми видаляємо querySelector ()
Метод і його колір змінюється на червоний.
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"
Приклад коду
querySelectorAll ()
, і забарвлені в синій колір.
var par = document.querySelectorAll ('p'); для (var p з абзаців) p.style.color = 'blue';
3.
addEventListener ()
foo ()
це спеціальна функція, яку ви можете зареєструвати як слухач подій натискання (викликати його після натискання елемента кнопки) трьома способами:
var btn = document.querySelector ('кнопка'); btn.onclick = foo;
var btn = document.querySelector ('кнопка'); btn.addEventListener ('click', foo);
addEventListener ()
(третій розчин) деякі плюси; це останній стандарт, який дозволяє присвоювати більше однієї функції слухачам подій до однієї події - і містить корисний набір параметрів.Синтаксис
ele.addEventListener (evt, слухач, [варіанти]);
еле
- Елемент HTML, для якого слухає слухач подій.evt
- Цільова подія.слухач
- Як правило, функція JavaScript.опції
- (необов'язково) Об'єкт з набором логічних властивостей (перелічено нижче).Опції Що відбувається, коли вона встановлена на вірно
?захоплення
ele.addEventListener (evt, listener, true)
ele.addEventListener (evt, слухач, capture: true);
один раз
пасивний
Приклад коду
foo
, до Тег HTML.
var btn = document.querySelector ('кнопка'); btn.addEventListener ('click', foo); function foo () alert ('hello');
Інтерактивна демонстрація
foo ()
користувацька функція як слухач подій до будь-якого з трьох наступних подій: введення
, натисніть
або наведення курсору миші
& ініціювати вибрану подію в нижньому полі введення, наведіть курсор, натисніть або введіть у ньому.4.
removeEventListener ()
removeEventListener ()
метод відключає слухача події раніше додано з addEventListener ()
метод від події, на яку він слухає.Синтаксис
ele.removeEventListener (evt, слухач, [варіанти]);
addEventListener ()
метод (за винятком один раз
опція виключена). Параметри використовуються для того, щоб бути дуже конкретними щодо ідентифікації слухача для від'єднання.Приклад коду
addEventListener ()
, тут ми видаляємо викликається подію, що викликає клік foo
від елемент.
btn.removeEventListener ('click', foo);
5.
createElement ()
createElement ()
метод створює новий елемент HTML за допомогою ім'я тега HTML бути створеними, наприклад 'p'
або "div"
.AppendChild ()
(див. далі в цій публікації).Синтаксис
document.createElement (тегName);
tagName
- Ім'я тега HTML, який потрібно створити. Приклад коду
var pEle = document.createElement ('p')
6.
appendChild ()
appendChild ()
метод додає елемент як останню дитину до елемента HTML, який викликає цей метод.Синтаксис
ele.appendChild (childEle)
еле
- Елемент HTML, до якого дитина
додано як остання дитина.дитина
- Елемент HTML, доданий як остання дочірня еле
.Приклад коду
елементом є як дитина a
appendChild ()
і вищезазначене createElement ()
методів.
var div = document.querySelector ('div'); var strong = document.createElement ('сильний'); strong.textContent = 'Привіт'; div.appendChild (сильний);
Інтерактивна демонстрація
#a
до #r
є дочірніми елементами # батько-один
, # батько-два
, і # батько-три
селектори ідентифікаторів.appendChild ()
Метод працює набравши одне батьківське і одне доменне ім'я селектора у поля введення нижче. Ви також можете вибрати дітей, що належать до іншого батька.7.
removeChild ()
removeChild ()
метод видаляє вказаний дочірній елемент з елемента HTML, який викликає цей метод.Синтаксис
ele.removeChild (дитяче)
еле
- Батьківський елемент дитина
.дитина
- Дочірній елемент еле
.Приклад коду
елемент, який ми додали як дитину до
appendChild ()
метод. div.removeChild (сильний);
8.
replaceChild ()
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 ()
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 ()
createDocumentFragment ()
Метод може бути не так добре відомий, як інші в цьому списку, тим не менше є важливим, особливо якщо хочете вставити декілька елементів навалом, наприклад, додавання декількох рядків до таблиці.Фрагмент документа
об'єкт, що по суті є вузол DOM, який не є частиною дерева DOM. Це як буфер, де ми можемо додавати та зберігати інші елементи (наприклад, кілька рядків), перш ніж додати їх до потрібного вузла дерева DOM (наприклад, до таблиці).Фрагмент документа
об'єкт не викликає жодних змін у макеті, так що ви можете додати до нього стільки елементів, скільки потрібно, перш ніж передати їх у дерево DOM, викликаючи зміну макета лише в цій точці.Синтаксис
document.createDocumentFragment ()
Приклад коду
createElement ()
метод, а потім додати їх до Фрагмент документа
об'єкт, нарешті, додає цей фрагмент документа до HTML за допомогою
appendChild ()
метод.
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 ()
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 ()
setAttribute ()
методом додає новий атрибут до елемента HTML або оновлює значення атрибута, який вже існує.Синтаксис
ele.setAttribute (назва, значення);
еле
- Елемент HTML, до якого додано атрибут, або з якого атрибута оновлено.ім'я
- Назва атрибута.значення
- Значення атрибута.Приклад коду
Зміствідповідних
атрибут a setAttribute ()
метод, який перетворить його зміст. var div = document.querySelector ('div'); div.setAttribute ("contenteditable", ")
14.
getAttribute ()
getAttribute ()
метод повертає значення заданого атрибута що належать до певного елементу HTML.Синтаксис
ele.getAttribute (назва);
еле
- Елемент HTML, з якого запитується атрибут.ім'я
- Назва атрибута.Приклад коду
Зміствідповідних
атрибут, що належить getAttribute ()
метод. var div = document.querySelector ('div'); alert (div.getAttribute ("contenteditable"))
15.
removeAttribute ()
removeAttribute ()
метод видаляє заданий атрибут певного елемента HTML.Синтаксис
ele.removeAttribute (назва);
еле
- Елемент HTML, з якого потрібно видалити атрибут.ім'я
- Назва атрибута.Приклад коду
Зміствідповідних
атрибут з var div = document.querySelector ('div'); div.removeAttribute ('contenteditable');