Стандарт 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* Повертають список вузлів.

Кілька днів тому отримав тестове завдання від компанії на вакансію Front-end dev. Звісно, ​​завдання складалося з кількох пунктів. Але зараз йтиметься лише про один з них - організація пошуку по сторінці. Тобто. банальний пошук за введеним у полі текстом (аналог Ctrl+F у браузері). Особливість завдання в тому, що використання будь-яких JS фреймворків або бібліотек заборонено. Все писати на рідному JavaScript.

Пошук готового рішення

Якщо комусь цікаво, код брав .

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

Чому скрипт працював некоректно?

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

Ви вже напевно зрозуміли, в чому проблема, але я все ж таки поясню докладніше. Уявіть, що поле пошуку ввели слово "div". Як ви розумієте, усередині bodyє безліч інших тегів, у тому числі div. І якщо ми всім до "div"застосовуємо стилі, зазначені вище, це вже буде блок, а незрозуміло що, оскільки конструкція ламається. У результаті після перезапису розмітки ми отримаємо повністю зламану веб-сторінку. Виглядає так.

Як бачите, сторінка повністю ламається. Коротше кажучи, скрипт виявився неробочим, і я вирішив написати свій із нуля, чому і присвячується ця стаття.

Отже пишемо скрипт із нуля

Нині нас цікавить форма із пошуком. Обвів її червоною лінією.

Давайте трохи розберемося. Я це реалізував так (поки чистий HTML). Форми з трьома тегами.

Перший- Для введення тексту;
Другий- для скасування пошуку (зняти виділення);
Третій- для пошуку (виділити знайдені результати).

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

Полю з текстом даємо id=«text-to-find» (тому id будемо звертатися до елементу з js).

Кнопці скасування даємо такі атрибути: type=«button» onclick=«javascript: FindOnPage("text-to-find", false); return false;»

- Тип: button
- При натисканні викликається функція FindOnPage("text-to-find", false); та передає id поля з текстом, false

Кнопці пошуку даємо такі атрибути: type=«button» onclick=«javascript: FindOnPage("text-to-find", true); return false;»

- Тип: submit (не кнопка тому, що тут можна юзати Enter після введення в поле, а так можете і button використовувати)
- При натисканні викликається функція FindOnPage("text-to-find", true); та передає id поля з текстом, true

Ви, напевно, помітили ще 1 атрибут: true/false . Його будемо використовувати для визначення, яку саме кнопку натиснули (скасувати пошук або почати пошук). Якщо тиснемо на відміну, то передаємо false. Якщо тиснемо на пошук, то передаємо true.

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

Отже, наступне регулярне вираз шукатиме лише текст слід. виду: ">... текст...<". Т.е. будет проходить поиск только текстовых объектов, в то время, как теги и атрибуты будут оставаться нетронутыми.

/>(.*?)Так ми знаходитимемо потрібні частини коду, які парситимемо і шукатимемо збіги з текстом, який ввів користувач. Потім додаватимемо стилі знайденим об'єктам і після цього замінюватимемо html - код на новий.

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

Var input,search,pr,result,result_arr, locale_HTML, result_store; //input - приймаємо текст, який ввів користувач //search - робимо з рядка регулярний вираз //pr - зберігаємо до неї поточний //result - вибірка тексту з pr (тобто відсікаємо теги та атрибути) //result_arr - аналог pr, але зі стилями для підсвічування //locale_HTML - оригінал який міняти не будемо, використовуємо для обнулення стилів
І одразу визначимо locale_HTMLзначення незалежно від того, шукаємо ми щось чи ні. Це необхідно, щоб одночасно зберегти оригінал сторінки і мати можливість обнулювати стилі.

Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // Зберігаємо в змінну весь body (Вихідний)
Ок, тепер вже варто створити функцію, яка викликається у нас із DOM. Відразу прикинемо, що всередині у нас повинні бути дві функції, кожна з яких спрацьовує залежно від натиснутої кнопки. Адже ми або проводимо пошук, або обнулюємо його. І контролюється це атрибутом true/falseяк ви пам'ятаєте. Також треба розуміти, що при повторному пошуку колишні стилі повинні обнулятися. Таким чином отримаємо наступне:

Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // зберігаємо в змінну весь body (Початковий) function FindOnPage(name, status) ( if(status) ( FindOnPageBack(); FindOnPageGo(); ) //чистимо минуле і Виділяємо знайдене if(!status) ( FindOnPageBack(); ) //Знімаємо виділення)
Ок, частина логіки реалізована, рухаємось далі. Необхідно перевіряти отримане слово на кількість символів. Адже навіщо нам шукати 1 букву/символ. Загалом я вирішив цю можливість обмежити 3+ символи.

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

<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( //виконуємо пошук ) function FindOnPageBack() ( document.body.innerHTML = locale_HTML; ) //обнулюємо стилі if(status) ( FindOnPageBack(); FindOnPageGo(); ) //чистимо минуле і Виділяємо знайдене if !status) ( FindOnPageBack(); ) //Знімаємо виділення )
Зараз поясню цю ділянку коду. Єдине, що могло стати не ясно - ось цей рядок:

function FindOnPageBack() ( document.body.innerHTML = locale_HTML; )

Тут все просто: метод innerHTMLповертає htmlкод об'єкта. В даному випадку ми просто замінюємо поточний bodyна оригінальний, який ми зберегли під час завантаження всієї сторінки.

Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // зберігаємо в змінну весь body (Початковий) function FindOnPage(name, status) (input = document.getElementById(name).value; //отримуємо значення з поля в html if(input.length)<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( function FindOnPageGo() ( search = "/"+input+"/g"; //робимо з рядка регулярний вираз pr = document.body.innerHTML; // зберігаємо в змінну весь body result = pr.match(/ >(.*?)Отже, на даному етапі ми вже маємо основні змінні та значення. Тепер треба надати потрібним ділянкам коду стилі з виділеним тлом. Тобто. перевірка вибраного тексту на регулярний вираз (по суті ми вибраний регулярним виразом текст знову парс регулярним виразом). Для цього треба із введеного тексту зробити регулярний вираз (зробили), а потім виконати метод, переданий у вигляді таксту. Тут нам допоможе метод eval().

Загалом після того, як ми замінимо текст і отримаємо результат зі стилями, треба поточний htmlзамінити на отриманий. Робимо.

Var input,search,pr,result,result_arr, locale_HTML, result_store; locale_HTML = document.body.innerHTML; // зберігаємо в змінну весь body (Початковий) function FindOnPage(name, status) (input = document.getElementById(name).value; //отримуємо значення з поля в html if(input.length)<3&&status==true) { alert("Для поиска вы должны ввести три или более символов"); function FindOnPageBack() { document.body.innerHTML = locale_HTML; } //обнуляем стили } if(input.length>=3) ( function FindOnPageGo() ( search = "/"+input+"/g"; //робимо з рядка регулярний вираз pr = document.body.innerHTML; // зберігаємо в змінну весь body result = pr.match(/ >(.*?)"+input+""); // знаходимо потрібні елементи, задаємо стиль і зберігаємо в новий масив) for (var i = 0; i По суті, все готове, і скрипт вже працює. Але додамо ще кілька деталей для краси.

1) Обріжемо пробіли у тексту, який вводить користувач. Вставляємо цей код:

Input = numer.replace(/^\s+/g,""); input = numer.replace(/(1,)/g," ");
Після цього рядка:

Input = document.getElementById(name).value; //отримуємо значення з поля в html
2) Зробимо перевірку на збіги (якщо збігів не знайдено – повідомимо про це). Цей код вставляємо функції функції FindOnPageGo() після змінних.

Тепер все. Звичайно, можна додати скролл до першого знайденого результату, живий пошук ajax, та й взагалі покращувати можна безкінечно. Зараз це досить примітивний пошук сайту. Метою статті було допомогти новачкам, якщо виникне таке саме питання, як у мене. Адже простого готового рішення не знайшов.

PS: для коректної роботи необхідно прибрати перенесення тексту в html документі в тих місцях, де є звичайний текст між тегами.

Наприклад, замість

Бла бла бла

Бла бла бла

Також, якщо хтось писав подібне, але з живим пошуком, поділіться вихідником, буде цікаво розібрати.

Радий вислухати конструктинну критику, думки, може, рекомендації.

Днями дописав трохи коду, зробив живий пошук по сторінці. Так що питання знято. Код HTMLне змінювався. JSможете подивитися .

Пошук ведеться за тегами із класом «place_for_live_search». Тож у тому, щоб алгоритм парсил необхідний контент, додаємо клас і готово.

Крім того, що на веб-сторінках можна вибирати елементи за їх 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 потрібно спочатку підключити. Додається вона у розділі , одним із способів, як це можна зробити, потрібно додати наступний рядок коду:

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

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