Як уникнути розчарувань, вибравши правильний селектор JavaScript

Короткий посібник про те, як селектори впливають на ваш код

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

Виявляється, я використовував document.querySelectorAll () для присвоєння своїх елементів змінній, а потім я намагався змінити ці елементи. Єдина проблема полягає в тому, що певний селектор JavaScript повертає статичний список вузлів . Оскільки це не реальне представлення елементів, я не зміг змінити їх пізніше у своєму коді.

Припущення

У цій статті я припускаю, що кілька речей відповідають дійсності:

  • Ви працюєте в простому чи ванільному JavaScript (без фреймворку / бібліотеки)
  • Ви добре знаєте елементи / селектори JavaScript
  • Ви базово розумієте DOM

Крихітно-піщаний

Якщо я занадто багато припустив, я надав посилання на відповідні матеріали в статті, які, як я сподіваюся, будуть корисними.

JavaScript - це така величезна і багата екосистема, що не дивно, що існує безліч способів виконання одного і того ж завдання. Залежно від вашого завдання, спосіб його виконання певною мірою має значення.

Ви можете викопати яму руками, але набагато простіше і ефективніше це зробити лопатою.

З цією метою я сподіваюся “вручити тобі лопату” після прочитання цієї статті.

Вибір правильного інструменту для роботи

У мене виникло запитання: "Який селектор елементів слід використовувати?" кілька разів. До цього часу я не мав особливого бажання чи потреби вивчати різницю, поки мій код давав бажаний результат. Врешті-решт, який колір таксі має значення, доки він безпечно та своєчасно доставить вас до місця призначення? Так?

Почнемо з деяких способів вибору елементів DOM у JavaScript. Є більше способів (я вважаю) відібрати елементи, але перераховані тут на сьогоднішній день є найбільш поширеними, з якими я стикався.

document.getElementById ()

Вони коли-небудь повернуть лише один (1) елемент, оскільки за своєю природою ідентифікатори унікальні, і одночасно на сторінці може бути лише один (з однаковим ім’ям).

Він повертає об'єкт, який відповідає переданому в нього рядку. Він повертає нуль, якщо у вашому HTML не знайдено відповідного ідентифікатора.

Приклад синтаксису - & g t; document.getElementById ('main_conten t')

На відміну від деяких селекторів, які ми розглянемо далі в статті, немає потреби в # для позначення ідентифікатора елемента.

document.getElementsByTagName ()

Зверніть увагу на “S” в елементах - цей селектор повертає кратніу масивноподібній структурівідомий як колекція HTML - шукається весь документ, включаючи кореневий вузол (об’єкт документа), щоб знайти відповідне ім’я. Цей селектор елементів починається вгорі документа і продовжує вниз, шукаючи теги, які відповідають переданому рядку.

Якщо ви хочете використовувати власні методи масивів, вам не пощастило. Тобто, якщо ви не перетворите повернені результати в масив для їх ітерації або не скористаєтеся оператором розкидання ES6 - обидва з яких виходять за рамки цієї статті. Але я хотів, щоб ви знали, що за бажання можна використовувати методи масивів.

Приклад синтаксису - & g t; document.getElementsByTagName ('header_li nks'). Цей селектор також приймає ts p, div, body або будь-який інший дійсний HTML t ag.

document.getElementsByClassName ()

Селектор імені класу - знову зверніть увагу на “S” в елементах - цей селектор повертає кратніу масивноподібній структурівідомий як HTML-колекція назв класів. Він відповідає переданому рядку (може приймати декілька назв класів, хоча вони розділені пробілом), здійснює пошук у всьому документі, може викликати будь-який елемент і повертає лише нащадків переданого в класі.

Також, ні. (крапка) потрібна для позначення назви класу

Приклад синтаксису: document.getElementsByClassName ('classNam e')

document.querySelector ()

Цей селектор повертає лише один (1) елемент.

Буде повернено лише перший елемент, що відповідає переданому рядку. Якщо збіги для наданого рядка не знайдені, нульповертається.

Приклад синтаксису: document.querySelector ('# side_note ') або document.querySelector ('. Header_link s')

На відміну від усіх наших попередніх прикладів, цей селектор вимагає. (крапка) для позначення класу або # (октоторп) для позначення ідентифікатора і працює з усіма селекторами CSS.

document.querySelectorAll ()

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

Як і в деяких попередніх прикладах, у списку вузлів не можна використовувати власні методи масиву, такі як .forEach (). Отже, якщо ви хочете використовувати їх, спочатку потрібно перетворити список вузлів у масив. Якщо ви не хочете конвертувати, ви все одно можете перебирати список вузлів із заявою for….

Переданий у рядок повинен відповідати дійсному селектору CSS - ідентифікатору, іменам класів, типам, атрибутам, значенням атрибутів тощо.

Приклад синтаксису: document.querySelectorAll ('. Footer_link s')

Підведенню

Вибравши правильний селектор для ваших потреб кодування, ви уникнете багатьох пасток, в які я потрапив. Це може бути неймовірно неприємно, коли ваш код не працює, але, переконавшись, що ваш селектор відповідає вашим ситуаційним потребам, у вас не буде проблем "копати лопатою" :)

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