У програмуванні скриптовими мовами періодично виникає необхідність створити паузу – призупинити виконання програми на деякий час, а потім продовжити роботу. Наприклад, у сценаріях VBS та PHP можливі такі методи:
VBS: wscript.sleep 1500 (зупинка на 1.5 секунди)
PHP: sleep(10); (зупинка на 10 секунд)
Під час подібних пауз виконуюча система (PHP або VBS) нічого не робить. Розробник, спробувавши інтуїтивно використовувати щось подібне у Javascript, буде неприємно здивований. Типова помилка при спробі створити паузу в Javascript виглядає так:
Function badtest() ( for (var i = 1; i< 10; i++) { window.setTimeout("document.getElementById("test1").value += " + i, 900) } }
Ви думаєте, що коли при проходженні циклу черга дійде до малювання чергової цифри, ваш setTimeout чесно зупинить роботу Javascript, почекає 0.9 сек., додасть в кінець поля введення потрібну цифру і потім продовжить роботу. Але насправді це не так: setInterval і setTimeout в Javascript відкладають виконання лише тієї дії (або функції), яка вказана у дужках. У нашому прикладі відбудеться таке:
Негайно означає, наприклад, 1 мс (тобто незрівнянно мало, порівняно з 900 мс): цикл проведе свою роботу практично миттєво, створивши кілька відкладених завдань від однієї і тієї ж точки часу. Це означає, що всі відкладені завдання з "малювання" будуть виконані практично в один і той же час, без пауз між додаванням нових цифр. Цикл запускається; все завмирає на 0.9; і ширрр - всі цифри вистрілюються в ряд одна за одною.
А як у такому випадку правильно застосувати setTimeout? Це складно. Прийде викликати функцію рекурсивно(зсередини функції ту саму функцію), а щоб цей процес не був нескінченним, задати умову зупинки (наприклад, величину друкованого числа):
Function welltest() ( if (i< 9) { document.getElementById("test2").value += ++i window.setTimeout("welltest()", 400) } }
І ще змінну i доведеться ініціалізувати поза функцією – наприклад, так:
Ось тепер все працює, як треба (ми зменшили час затримки з 0.9 до 0.4 с). Але для подібних завдань логічніше все-таки застосовувати не setTimeout а setInterval (хоча при цьому знадобиться дві функції):
Function besttest() ( window.i = 0 window.timer1 = window.setInterval("draw()", 400) ) function draw() ( document.getElementById("test3").value += ++i if (i >= 9) clearInterval(window.timer1) )
Особливість методу Javascirpt setInterval в тому, що він не проходить «сам собою», його треба зупиняти спеціальним методом clearInterval . А щоб було зрозуміло, що саме зупиняти, задачі відкладеної дії присвоюється спеціальний ідентифікатор – таймер: window.timer1 = window.setInterval(...) .
Ідентифікатори можна надавати так само і завданням, створюваним методом setTimeout. Усі ідентифікатори таймерів повинні відрізнятись один від одного (бути унікальними в межах поточного вікна браузера). Тоді можна створити у вікні кілька різних завдань, що використовують відкладені дії, і ці завдання виконуватимуться паралельно (начебто одночасно, якщо у комп'ютера вистачає ресурсів), що в принципі неможливо в PHP або VBS.
Ось приклад сторінки з кількома Javascript-таймерами, що працюють одночасно: setinterval.htm(Javascript-функції у файлі setinterval.js). Роботу всіх таймерів сторінки (крім меню) можна припинити клавішею Esc . Усі таймери прикладів спираються на «природний» (а чи не абстрактне i++ ) відлік – часу чи відстані. Всі «годинники» спеціально розсинхронізовані (для наочності). Таймери, що залежать від відстані, використовуються в «індикаторі» і в меню, що випадає («виїжджає»).
Випадаюче менюНаше меню, що виїжджає – реально виїжджає (з-під «шапки»): між елементами спеціально залишені зазори, щоб бачити, як воно виїжджає. Несподівано виявилося, що ми не можемо зробити однаково плавний виїзд для списків різної довжини – ймовірно через низьку продуктивність комп'ютера (AMD Athlon 999 МГц).
Досить очевидно, що для краси та гармонії потрібно, щоб списки різних пунктів меню випадали за той самий час. Тобто довші списки повинні випадати з вищою швидкістю, короткі – з меншою швидкістю. Здавалося б, це можна реалізувати так:
За цією логікою, якщо список, що випадає, має висоту 200 px, ми повинні рухати його вниз по одному пікселу за 1 мс. Але така швидкість на нашому комп'ютері не прокочує - браузер просто не встигає малювати нове положення списку за одну мілісекунду. Так. Javascript рахувати встигає (що там рахувати?), а браузер (Firefox) відображати не встигає. Типова ситуація для Інтернету.
Тому більш-менш зрівняти час виїжджання меню можна тільки за допомогою милиць, і ще неясно, як це працюватиме на швидшому комп'ютері. Але ж ми повинні розраховувати на найповільніший? Алгоритм (без урахування швидкодії комп'ютера) виходить приблизно такий:
Ось тепер списки більш-менш виїжджають. За більш-менш схожий час. На сторінці setinterval.htm.
А ось і Брю-ус:
Function slide_do(obj, maxtop, offset) ( if (getTopLeft(obj).top< maxtop) { obj.style.top = getTopLeft(obj).top + offset } else { if (obj && obj.timer1) { clearInterval(obj.timer1) obj.timer1 = null } } }
Сама функція, що висуває вкладені списки меню, як бачимо, дуже проста. Залишилося тільки запустити її приблизно таким рядком:
Ts.timer1 = setInterval(function()(slide_do(ts, maxtop, offset)), delay)
Ну а перед запуском тільки обчислити всі ці maxtop і offset, а також помістити список в положення mintop. Чим і займається «попередня» функція slide() розміром 40 рядків. А все разом – у файлі setinterval.js. Так, і ця хрень ні хрону не працюватиме без підключеного файлу стилів
З допомогою документа, що відображає конкретний selector, або група selectors. Якщо не беруть участь, null is returned.
Note : Показує, що ця стаття використовує десяткову першу послідовну послідовність документів з nodes starting з першим елементом в документі з маркуванням і ітераціями через sequential nodes відповідно до числа дітей nodes.
Syntax element = document.querySelector(selectors); Parameters selectors A DOMString containing one or more selectors to match. Цей string повинен бути правильним CSS selector string; if it isn"t, a SYNTAX_ERR exception is thrown. See Locating DOM elements using selectorsдля більше про selectors and how to manage them.Note: Характеристики, які не є частиною стандарту CSS syntax, повинні бути escaped using backslash character. Since JavaScript також використовує backslash escaping, бути особливо корисним, коли реєстрація string literals використовує ці характеристики. See for more information.
Return value Exceptions SYNTAX_ERR Синтакта з конкретними selectors is invalid. Usage notesЯкщо конкретний selector збирається на ID, що неправильно використовувалося більше, ніж один в документі, перший елемент з тим, що ID буде відновлено.
Escaping special charactersДля того, щоб отримати 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 not match anything document.querySelector("#foo\:bar"); // Match the second div
Examples Finding the first element matching a classУ цьому прикладі перший елемент у документі з class " myclass " is returned:
Var el = document.querySelector(".myclass");
A more complex selectorSelectors може бути дійсно потужним, як показано в наступному прикладі. Here, the first element with the name "login" () located inside a whose class is "user-panel main" () in the document is returned:
Var el = document.querySelector("div.user-panel.main input");
Specifications| DOM Визначення "document.querySelector()" в цій specification. |
Living Standard |
Компактність таблиці на цій сторінці генерується з структурованих даних. Якщо ви знайдете, щоб дізнатися про ваші дані, клацніть на 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 Internet | |||||||||||
| Chrome Full support 1 | Edge Full support 12 | Firefox Full support 3.5 | IE Full support 8 | Opera Full support 10 | Safari Full support 3.2 | WebView Android Full support Yes | Chrome Android Full support Yes | Firefox Android Full support Yes | Opera Android Full support 10.1 | Safari iOS Full support 3.2 | Samsung Internet Android? |
Щоб скрипт міг працювати з якимось елементом сторінки, цей елемент спочатку потрібно знайти. Для цього JavaScript є кілька способів. Знайдений елемент зазвичай присвоюється змінною, і надалі, через цю змінну сркіпт звертається до елемента і робить з ним якісь дії.
Пошук по idЯкщо в коді сторінки елементу заданий атрибут id, елемент можна знайти за id. Це найпростіший спосіб. Пошук елемента здійснюється за допомогою методу getElementById() глобального об'єкта document.
document.getElementById (id)
Параметри:
id – id елемента, який потрібно знайти. id - це рядок, тому він має бути в лапках.
Створимо сторінку, додамо на неї елемент і задаємо йому id, а в скрипті знайдемо цей елемент:
HTML код:
JavaScript:
| var block = document.getElementById("block"); console.log(block); |
Знайдений елемент ми привласнили змінній block та вивели змінну у консоль. Відкрийте консоль браузера, в ній має бути вказаний елемент.
Так як посік по id - це найпростіший і найзручніший спосіб, часто використовують саме його. Якщо з якимсь елементом потрібно працювати в скрипті, то в коді сторінки цього елемента встановлюють атрибут id навіть якщо він не був встановлений раніше. І знаходять елемент з id.
Пошук за класомМетод getElementsByClassName() дозволяє знайти всі елементи, які стосуються певного класу.
document.getElementsByClassName (клас)
Параметри:
клас – клас елементів, які потрібно знайти
Метод повертає псевдомасив, який містить знайдені елементи. Псевдомассивом він називається тому, що для нього не працюють багато методів масивів. Але головна властивість залишається – можна звернутися до будь-якого елементу масиву. Навіть якщо знайдено лише один елемент, він все одно знаходиться у масиві.
Додамо на сторінку елементи та задамо їм клас. Частину елементів розмістимо всередині блоку, який ми створили раніше. Іншу частину створимо поза блоком. Сенс цього буде зрозумілий трохи згодом. Тепер сторінка виглядатиме так:
HTML код:
JavaScript:
Тепер знайдено лише ті елементи, які у блоці.
Пошук по тегуМетод getElementsByTagName() знаходить усі елементи з конкретним тегом. Він також повертає псевдомасив із знайденими елементами.
document.getElementsByTagName (тег)
Параметри:
тег - тег елементів, які потрібно знайти
Знайдемо всі теги p , які є на сторінці:
| var p = document.getElementsByTagName("p"); console.log(p); |
Цей метод можна застосовувати не до всього документа, а до конкретного елемента. Знайдіть усі теги p , що знаходяться в блоці.
Пошук по селекторуІснують методи querySelector() і querySelectorAll() , які знаходять елементи, що відповідають певному селектору. Тобто, будуть знайдені елементи, до яких був би застосований стиль, якби він був зазначений такому селектору. При цьому наявність такого селектора в стилі сторінки зовсім не обов'язково. Ці методи не пов'язані з CSS. Метод querySelectorAll() знаходить усі елементи, що відповідають селектору. А метод querySelector() знаходить один елемент, який є першим у коді сторінки. Ці методи можуть замінити всі способи пошуку елементів, розглянуті раніше, адже є селектор за id, селектор за тегом та багато інших.
document.querySelector (селектор)
document.querySelectorAll (селектор)
Селектори пишуться так само, як у CSS, тільки не забувайте ставити лапки.
Додамо на сторінку список та знайдемо його за селектором. Ми шукаємо лише один елемент і ми точно знаємо, що він буде першим, тому що він один на сторінці. Тому у разі зручніше використовувати метод querySelector() . Але при використанні цього методу потрібно враховувати, що надалі на сторінку можуть бути додані такі ж елементи. Втім, це стосується більшості методів.
HTML код:
Дані методи можуть шукати елементи не у всьому документі, а всередині конеретного елемента.
У прикладі ми використовували лише селектори за тегом. Спробуйте знайти елементи сторінки за допомогою інших селекторів.
Сусідні елементиДля знайденого елемента можна знайти сусідів. Кожен елемент є об'єктом і сусідні елементи можна отримати через властивості цього об'єкта. Властивість попередньогоелементасибліювання містить попередній елемент, а властивість nextElementSibling містить наступний елемент.
елемент.previousElementSibling
елемент.nextElementSibling
Знайдемо елемент, наступний за блоком:
Дочірні елементиВластивість дітей містить масив з дочірніми елементами.
елемент.children
Знайдемо дочірні елементи блоку.
