Javascript пошук за тегом. Javascript та jquery вибірка елемента за класом (атрибут class). Отже пишемо скрипт із нуля

З допомогою документа, що збирається конкретний selector, або група selectors. Якщо не збираються, то null is returned.

Note : Показує, що ця стаття використовує десяткову першу послідовну записку документів з nodes starting з першим елементом в документі з маркуванням і iterating через sequential nodes з числа номерів nodes.

Увага! Since JavaScript також використовує backslash escaping, бути особливо корисним, коли писати string literals using these characters. See for more information.

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

Для того, щоб отримати ID або selectors, що не слідувати за стандартом CSS syntax (використовуючи колону або простір у відповідності, для прикладу), ви повинні скинути character with backslash (" \ "). Як backslash is also escape character in JavaScript, if you are entering a literal string, you must escape it twice(once для JavaScript string, і інший час для пошукуSelector()):

console.log("#foo\bar"); // "#fooar" (\b is the backspace control character) document.querySelector("#foo\bar"); // Does not match anything console.log("#foo\bar"); // "#foo\bar" console.log("#foo\bar"); // "#foo\bar" document.querySelector("#foo\bar"); // Match the first div document.querySelector("#foo:bar"); // Does no match anything document.querySelector("#foo\:bar"); // Match the second div

У цьому прикладі перший елемент у документі з class " myclass " is returned:

Var el = document.querySelector(".myclass");

Selectors може бути дійсно потужним, як показано в наступному прикладі. Тут, перший елемент з ім'ям "login" () розташований всередині класу, який є "user-panel main" () в документі є відновлений:

Var el = document.querySelector("div.user-panel.main input");

Компактність таблиці на цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на https://github.com/mdn/browser-compat-data і пишуть.

Update compatibility data on GitHub

Крім того, що на веб-сторінках можна вибирати елементи за їх ID, ми можемо також вибирати елементи за атрибутом class.

Завдання теж дуже поширене. Коли я пишу свої скрипти, користуватися цим селектором дуже часто доводиться.

Припустимо, що ми маємо наступний код на сторінці.

Завдання просте, потрібно вибрати елемент із класом class=»elem» і зробити з ним якісь дії за допомогою Javascript.

Давайте розглянемо кілька варіантів, як це можна зробити.

Варіант 1. Користуватися методом Javascript getElementsByClassName.

Якщо не використовувати жодних додаткових бібліотек, звернутися до елемента можна за допомогою методу getElementsByClassName(«ім'я_класу»).

Наприклад, стосовно вихідного коду, можна додати наступні рядки коду.

Вміст блоку. alert(document.getElementsByClassName("elem").innerHTML);

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

Зверніть увагу, що результатом виконання методу getElementsByClassName буде масив елементів, т.к. елементів із однаковим класом на сторінці може бути декілька.

Саме тому в кінці конструкції document.getElementsByClassName("elem") потрібно вказати, що виводиться нульовий елемент масиву (). Рахунок Javascript починається з нуля, а не з одиниці.

Але проблема використання методу getElementsByClassName полягає в тому, що цей метод не підтримується у старих версіях браузерів.

Є деякі хитрощі, як це можна обійти, але це зайвий код. Наприклад, можна скористатися регулярними виразами:

If(document.getElementsByClassName == undefined) ( document.getElementsByClassName = function(cl) ( var retnode = ; var myclass = new RegExp("\b"+cl+"\b"); var elem = this.getElementsByTagName( "*");< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

Це один із способів, як можна вирішити проблему. Але, чесно кажучи, для мене не дуже прийнятно засмічувати сторінку зайвим кодом, тому найчастіше користуюся другим варіантом вирішення проблеми.

Варіант 2. За допомогою бібліотеки Jquery.

Використання бібліотеки Jquery дозволяє вирішити проблему вибору елементів за їх атрибутом class набагато легше. Потрібно скористатися конструкцією:

Тут elem – ім'я класу, присвоєне елементу.

Потрібно пам'ятати, що для того, щоб це працювало, бібліотеку Jquery потрібно спочатку підключити. Додається вона в розділі , одним із способів, як це можна зробити, потрібно додати наступний рядоккоду:

Щоб бібліотека могла підвантажитися, має бути з'єднання з Інтернет.

Погляньмо, як це працює на прикладі.

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

Таким чином, ось два способи, як можна взаємодіяти з елементами, які мають атрибут class. Вибирайте той, який вам найбільше підходить, та використовуйте його на практиці.

Щоб скрипт міг працювати з якимось елементом сторінки, цей елемент спочатку потрібно знайти. Для цього в JavaScript є кілька способів. Знайдений елемент зазвичай присвоюється змінною, і надалі, через цю змінну сркіпт звертається до елемента і робить з ним якісь дії.

Якщо в коді сторінки елементу заданий атрибут id, елемент можна знайти по id. Це найпростіший спосіб. Пошук елемента здійснюється за допомогою методу getElementById() глобального об'єкта document.

document.getElementById (id)

Параметри:

id – id елемента, який потрібно знайти. id - це рядок, тому він має бути в лапках.

Створимо сторінку, додамо на неї елемент і задаємо йому id, а в скрипті знайдемо цей елемент:

HTML код:

JavaScript:

Знайдений елемент ми привласнили змінній block та вивели змінну у консоль. Відкрийте консоль браузера, в ній має бути вказаний елемент.

Так як посік по id - це найпростіший і зручний спосібчасто використовують саме його. Якщо з якимсь елементом потрібно працювати в скрипті, то в коді сторінки цього елемента встановлюють атрибут id навіть якщо він не був встановлений раніше. І знаходять елемент з id.

Метод getElementsByClassName() дозволяє знайти всі елементи, які стосуються певного класу.

document.getElementsByClassName (клас)

Параметри:

клас – клас елементів, які потрібно знайти

Метод повертає псевдомасив, який містить знайдені елементи. Псевдомассивом він називається тому, що для нього не працюють багато методів масивів. Але головна властивість залишається – можна звернутися до будь-якого елементу масиву. Навіть якщо знайдено лише один елемент, він все одно знаходиться у масиві.

Додамо на сторінку елементи та задамо їм клас. Частину елементів розмістимо всередині блоку, який ми створили раніше. Іншу частину створимо поза блоком. Сенс цього буде зрозумілий трохи згодом. Тепер сторінка виглядатиме так:

HTML код:

JavaScript:

Тепер знайдено лише ті елементи, які у блоці.

Метод getElementsByTagName() знаходить усі елементи з конкретним тегом. Він також повертає псевдомасив із знайденими елементами.

document.getElementsByTagName (тег)

Параметри:

тег - тег елементів, які потрібно знайти

Знайдемо всі теги p , які є на сторінці:

Цей метод також можна застосовувати не до всього документа, а до конкретного елемента. Знайдіть усі теги p , що знаходяться в блоці.

Існують методи querySelector() і querySelectorAll() , які знаходять елементи, що відповідають певному селектору. Тобто, будуть знайдені елементи, до яких був би застосований стиль, якби він був зазначений такому селектору. При цьому наявність такого селектора в стилі сторінки зовсім не обов'язково. Ці методи не пов'язані з CSS. Метод querySelectorAll() знаходить усі елементи, що відповідають селектору. А метод querySelector() знаходить один елемент, який є першим у коді сторінки. Ці методи можуть замінити всі способи пошуку елементів, розглянуті раніше, адже є селектор за id, селектор за тегом та багато інших.

document.querySelector (селектор)

document.querySelectorAll (селектор)

Селектори пишуться так само, як у CSS, тільки не забувайте ставити лапки.

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

HTML код:

Дані методи можуть шукати елементи не у всьому документі, а всередині конеретного елемента.

У прикладі ми використовували лише селектори за тегом. Спробуйте знайти елементи сторінки за допомогою інших селекторів.

Для знайденого елемента можна знайти сусідів. Кожен елемент є об'єктом і сусідні елементи можна отримати через властивості цього об'єкта. Властивість попередньогоелементасибліювання містить попередній елемент, а властивість nextElementSibling містить наступний елемент.

елемент.previousElementSibling

елемент.nextElementSibling

Знайдемо елемент, наступний за блоком:

Властивість дітей містить масив з дочірніми елементами.

елемент.children

Знайдемо дочірні елементиблоку.

Стандарт DOM передбачає кілька засобів пошуку елемента. Це методи getElementById, getElementsByTagName та getElementsByName.

Більш сильні методи пошуку пропонують javascript-бібліотеки.

Найзручніший спосіб знайти елемент у DOM - це отримати його за id. Для цього використовується виклик document.getElementById(id)

Наприклад, наступний код змінить колір тексту на блакитний у div "е c id="dataKeeper" :

Document.getElementById("dataKeeper").style.color = "blue"

Наступний спосіб - це отримати всі елементи з певним тегом і серед них шукати потрібний. Для цього служить document.getElementsByTagName(tag). Вона повертає масив із елементів, що мають такий тег.

Наприклад, можна отримати другий елемент (нумерація в масиві йде з нуля) з тегом li:

Document.getElementsByTagName("LI")

Що цікаво, getElementsByTagName можна викликати не тільки для document, але й взагалі для будь-якого елемента, який має тег (не текстового).

При цьому будуть знайдені лише об'єкти, які знаходяться під цим елементом.

Наприклад, наступний виклик отримує список елементів LI , що знаходяться всередині першого div тега:

Document.getElementsByTagName("DIV").getElementsByTagName("LI")

Виклик elem.getElementsByTagName("*") поверне список всіх дітей вузла elem у порядку їх обходу.

Наприклад, на такому DOM:

Такий код:

Var div = document.getElementById("d1") var elems = div.getElementsByTagName("*") for(var i=0; i