Javascript та Jquery селектори. Вибір елемента id. Метод getElementById - Вибір елемента по ID ідентифікатору Пошук елемента на сторінці javascript

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

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

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

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

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

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

/* Заносимо в змінну unique посилання на тег img по id-ідентифікатору penguin */

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

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

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

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

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

"Задумливий пінгвін" >

var unique = document .getElementById ("penguin");

alert (unique .alt); /* Виводимо на екран значення властивості alt об'єкту unique (значення атрибуту alt тега img) */

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

• тег 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 є інші можливості вибору елементів веб-документа.

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

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

Вміст блоку.

Як можна вибрати елемент з id=»elem» і зробити з ним ряд якихось дій?

Тут є кілька варіантів вирішення проблеми. Давайте їх зараз розглянемо.

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

Є спосіб, як можна звернутися до елемента за його id використовуючи «чистий» JavaScript, без використання якихось сторонніх бібліотек. Цей спосіб полягає у використанні методу ggetElementById(«id_елемента»). Таким чином ми звертаємося до потрібного нам елементу за його ID.

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

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

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

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

Давайте тепер подивимося, як можна вирішити це завдання іншим способом.

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

Другий варіант вибору елемента за його ID, полягає у використанні бібліотеки Jquery. На практиці, у сучасних скриптах, найчастіше користуються саме цим способом. Він набагато зручніший і легше запам'ятовується.

Для того, щоб звернутися до елемента з його id потрібно скористатися конструкцією:

$("#elem")

Тут elem – ім'я, що міститься в атрибуті id.

Т.к. ми будемо використовувати сторонню бібліотеку Javascript, яка називається Jquery, то цю бібліотеку потрібно спочатку підключити.

Додається вона в розділі , одним із способів, як це можна зробити, потрібно додати наступний рядок коду:

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

Вміст блоку. alert($("#elem").html());

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

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

Останнє оновлення: 1.11.2015

Для роботи зі структурою DOM у JavaScript призначений об'єкт document, визначений у глобальному об'єкті window. Об'єкт document надає ряд властивостей та методів для керування елементами сторінки.

Пошук елементів

Для пошуку елементів на сторінці застосовуються такі методи:

getElementById(value) : вибирає елемент, у якого атрибут id дорівнює value

getElementsByTagName(value) : вибирає всі елементи, у яких тег дорівнює value

getElementsByClassName(value) : вибирає всі елементи, які мають клас value

querySelector(value) : вибирає перший елемент, який відповідає css-селектору value

querySelectorAll(value) : вибирає всі елементи, які відповідають css-селектору value

Наприклад, знайдемо елемент за id:

Block Header var headerElement = document.getElementById("header"); document.write("Текст заголовка:" + headerElement.innerText);

За допомогою виклику document.getElementById("header") знаходимо елемент, у якого id="header". За допомогою властивості innerText можна отримати текст знайденого елемента.

Пошук за певним тегом:

Заголовок

Перший абзац

Другий абзац

var pElements = document.getElementsByTagName("p"); for (var i = 0; i< pElements.length; i++) { document.write("Текст параграфа: " + pElements[i].innerText + "
"); }

За допомогою виклику document.getElementsByTagName("p") знаходимо всі елементи параграфів. Цей дзвінок повертає масив знайдених елементів. Тому, щоб отримати окремі елементимасиву, необхідно пробігтися ними в циклі.

Якщо нам треба отримати лише перший елемент, то можна до першого елемента знайденої колекції об'єктів:

Var pElement = document.getElementsByTagName("p"); document.write("Текст параграфа:" + pElement.innerText);

Отримання елемента за класом:

заголовок статті

Перший абзац

Другий абзац

var articleDiv = document.getElementsByClassName("article"); console.log(articleDiv); var textElems = document.getElementsByClassName("text"); for (var i = 0; i< textElems.length; i++) { console.log(textElems[i]); }

Вибір по селектору CSS:

Анотація статті

Перший абзац

Другий абзац

var elem = document.querySelector(".annotation p"); document.write("Текст селектора:" + elem.innerText);

Вираз document.querySelector(".annotation p") знаходить елемент, який відповідає селектору.annotation p . Якщо на сторінці кілька елементів, що відповідають селектору, метод вибере перший з них. У результаті браузер виведе:

Анотація статті Перший абзац Другий абзац Текст селектора: Анотація статті

Щоб отримати всі елементи по селектору, можна подібним чином використати метод document.querySelectorAll, який повертає масив знайдених елементів:

Анотація статті

Перший абзац

Другий абзац

var elems = document.querySelectorAll(".text p"); for (var i = 0; i< elems.length; i++) { document.write("Текст селектора " + i + ": " + elems[i].innerText + "
"); }

Висновок браузера:

Анотація статті Перший абзац Другий абзац Текст селектора 0: Перший абзац Текст селектора 1: Другий абзац

Property matches the specified string. Деякі елементи ідентифікації вимагаються, щоб бути необхідними, якщо вони визначені, вони "використовують спосіб отримати доступ до конкретного елемента quickly.

Якщо ви хочете отримати доступ до елемента, який не має ID, ви можете використовувати querySelector(), щоб виконати елемент, використовуючи будь-який selector .

Syntax var element = document .getElementById(id); Параметри id ID з елемента для розташування. ID є case-sensitive string which is unique within the document; тільки один елемент може мати будь-який given ID. Return value

Примітка: Element object describing the DOM element object matching the specified ID, або null if no matching element був підписаний в документі.

Example HTML getElementById example

Some text here

blue red JavaScript функція changeColor(newColor) ( var elem = document.getElementById("para"); elem.style.color = newColor; ) Result Usage notes

Capitalization of "Id" in the name of this method must be correct for the code to function; getElementByID() is not valid and will not work, however natural it may seem.

Unlike деякі інші елементи-використовувати методи так, як Document.querySelector() and Document.querySelectorAll() , getElementById() є лише наявним як метод глобального документа, і not available as method on all element objects в DOM. Тому ID-відповідь повинні бути необхідними через вказівку документа, вони не потрібні для "місцевих" версій функції.

Example Document

hello word1

hello word2

hello word3

hello word4

var parentDOM = document.getElementById("parent-id"); var test1 = parentDOM.getElementById("test1"); //throw error //Uncaught TypeError: parentDOM.getElementById is not a function

Якщо не є елементом з given id , це функція відновлює null . Зверніть увагу на те, що цей ідентифікатор є випадку-sensitive, з document.getElementById("M ain") буде відновити null instead of the element because "M" і "m" є різним для цих методів.

Елементи не в документі не searched getElementById() . При створенні елемента і відповіді його на ID, ви повинні додати елемент до документа stromу з або подібним методом перед тим, як можна використовувати його з getElementById() :

Var element = document.createElement("div"); element.id = "testqq"; var el = document.getElementById("testqq"); // el will be null!

Non-HTML documents . У DOM implementation повинен мати інформацію про те, що свідчать про те, що atributes є тип ID. Атрибути з іменем "ID" не є типом ID без назви, що не визначено в документі" DTD. Цей ID буде визначений як ID типу в будь-яких випадках XHTML , XUL , та інших. Implementations that do not know whether attributes є в type ID або не expected to return null .

Specification Specification Status Comment

Document Object Model (DOM) Level 1 Specification	Obsolete	Initial definition for the interface
Document Object Model (DOM) Level 2 Core Specification Визначення "getElementById" в тому specification.	Obsolete	Supersede DOM 1
Document Object Model (DOM) Level 3 Core Specification Визначення "getElementById" в тому specification.	Obsolete	Supersede DOM 2
DOM Визначення "getElementById" в тому specification.	Living Standard	Intend to supersede DOM 3

Browser compatibility

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

Update compatibility data on GitHub

Desktop Mobile Chrome Edge Firefox Internet Explorer Opera Safari Android webview Chrome для Android Firefox for Android Opera for Android Safari on iOS Samsung InternetgetElementById

Chrome Full support 1	Edge Full support 12	Firefox Full support 1	IE Full support 5.5	Opera Full support 7	Safari Full support 1	WebView Android Full support Yes	Chrome Android Full support 18	Firefox Android Full support Yes	Opera Android Full support 10.1	Safari iOS Full support 1	Samsung Internet Android?

Legend Full support Full support Compatibility unknown Compatibility unknown

Стандарт 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