JavaScript - DOM: методи для пошуку вузлів. Javascript і Jquery селектори. Вибір елемента по id Властивості і атрибути об'єкта document в javaScript

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

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

Пошук по id

самий зручний спосібзнайти елемент в 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

Виведе послідовність: ol1, li1, li2.

Пошук по name: getElementsByName

Метод document.getElementsByName (name) повертає всі елементи, у яких ім'я (атрибут name) дорівнює даному.

Він працює тільки з тими елементами, для яких в специфікації явно передбачений атрибут name: це form, input, a, select, textarea і ряд інших, більш рідкісних.

Метод document.getElementsByName не працюватиме з іншими елементами типу div, p і т.п.

інші способи

Існують і інші способи пошуку по DOM: XPath, cssQuery і т.п. Як правило, вони реалізуються javascript-бібліотеками для розширення стандартних можливостей браузерів.

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

Часта помилка пов'язана з відсутністю літери sв назві методу getElementById, в той час як в інших методах ця буква є: getElement s ByName.

Правило тут просте: один елемент - Element, багато - Element s. Всі методи * Element s* Повертають список вузлів.

У минулому уроці було розглянуто метод getElementsByTagName, який повертає масив ( групу) Елементів сторінки на ім'я тега.

Тут триває практична робота з javascript і буде розглянуто метод getElementById, який повертає посилання на елемент, Орієнтуючись на його унікальний ідентифікатор id.

Метод getElementById, як і getElementsByTagName є методом об'єкта document.

Назва методу перекладається буквально: отримати елемент по id.

Будь-якому елементу ( тегу) Веб-документа може бути призначений свій id -Ідентифікатор, завдяки якому елемент ставати унікальнимі до нього можна отримати доступ для роботи саме з ним.

Зверніть внимание: в імені методу в кінці слова Element немає літери s ( на відміну від методу getElementsByTagName). Це зроблено для зручності і говорить про те, що метод служить для вибору елемента.

Трохи пояснень для фрагмента коду вище ...

• тег img ( зображенняе) має id -Ідентифікатор penguin;
• за допомогою методу getElementById за ідентифікатором penguin вибирається саме цей тег img;
• в змінну unique заноситься посиланняна обраний тег;
• далі можна працювати з тегом, як з об'єктом через змінну unique, подібно до того, як проводилася робота з об'єктом Date через довільну змінну.

Після отримання доступу до елементу ( тегу) Веб-сторінки по id -Ідентифікатор за допомогою методу getElementById, ми вже працюємо з ним, як з об'єктом м, а значить, отримуємо доступ до атрибутів тега, як до властивостей Об'єкту.

Отже, значення атрибутів є вже значеннями властивостей.

Продовжимо працювати з попереднім прикладом ...

"Замислений пінгвін">

Пояснення для прикладу коду ...

• тег img ( зображенняе) має певні атрибути: src - адреса файлу, width і height - ширина і висота картинки, alt - альтернативний текст;
• отримавши доступ до тегу за допомогою методу getElementById, як до об'єкту, ми отримуємо доступ до атрибутів тега, як до властивостей об'єкта;
• А значення атрибутівтепер уже є значеннями властивостей;
• в javascript доступ до властивостей об'єкта здійснюється через точку. Далі виводимо alt - альтернативний текст тега img за допомогою методу alert на екран.

Сподіваюся, що Ви не заплуталися у всьому цьому. Потрібно розуміти одночасно, що відбувається на програмному рівні javascript і на рівні розмітки документа.

Тег img - це Об'єкт unique;

Атрибути тега width і alt - це властивості об'єкта;

Значення атрибутів "128" і "Замислений пінгвін"- це значення властивостей;

// Ось, як це виглядає з позиції javascript:

var unique = (

width: "128",

alt: "Замислений пінгвін"

}

Ось так працює метод getElementById, який повертає посилання на будь-який елемент ( тег) Веб-стрніци, якщо той має унікальний ідентифікатор id. Далі проводиться робота з цим елементом на рівні javascript вже як з об'єктом...

Слід врахувати що: Як і в попередньому уроці, тут - при роботі з методом getElementById рядок виклику скрипта слід розміщувати в кінці html-документа

В jQuery є й інші можливості вибору елементів веб-документа.

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

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

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

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

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

Варіант 1. Скористатися методом Javascript getElementsByClassName.

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

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

У підсумку, якщо все правильно працює, ми отримаємо спливаюче вікно, в якому буде виводитися текст, який знаходиться всередині блоку 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 ( "*"); for (var i = 0; i< elem.length; i++) { var classes = elem[i].className; if (myclass.test(classes)) { retnode.push(elem[i]); } } return retnode; } };

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

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

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

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

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

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

Давайте подивимося, як це працює на прикладі.