На уроці буде розглянуто початок теми: об'єктна модель документа (javaScript DOM) — основа динамічного HTML, буде вивчено методи доступу до об'єктів та розглянуто способи обробки подій javascript

• В цілому об'єкт– це складовий тип даних, що поєднує безліч значень у загальний модуль і дозволяє зберігати та витягувати за запитом значення за їхніми іменами.

Раніше ми вже розпочали знайомство з поняттям у javascript.

• У javascript є таке поняття як DOM Document Object Model- Об'єктна модель веб-сторінки (html-сторінки).
• Теги документа або, як ще кажуть, вузли документа — це його об'єкти.

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

У елемента script є атрибути:

Приклад:

Властивості та атрибути об'єкта document в javaScript

Об'єкт document є веб-сторінкою.

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

тобто. спочатку пишеться сам об'єкт, потім через точку і без пробілів вказується його властивість, атрибут чи метод

Розглянемо приклад:

Приклад:нехай у html-документі є тег

і певний для нього стиль css (навіть два стилі, другий знадобиться для завдання):

Необхідно:

1. задати нову властивість об'єкта, надати йому значення і вивести це значення;
2. вивести значення атрибута об'єкта;
3. змінити значення атрибута об'єкта.

Так як це мова javascript, то об'єкту можна придумати та задати будь-яку властивість з будь-яким значенням. Але для початку отримаємо доступ до об'єкта (про доступ до об'єкта буде докладно розказано нижче в цьому уроці):

// отримуємо доступ до об'єкта з його id var element = document.getElementById("MyElem"); element.myProperty = 5; // Призначаємо властивість alert(element.myProperty); // Виводимо в діалогове вікно

Наступне завдання пов'язане із атрибутом об'єкта. Атрибут об'єкту- Це атрибути тега. Тобто. у нашому випадку їх два: атрибут class зі значенням small та атрибут id . Працюватимемо з атрибутом class.

Тепер додамо JavaScript для виведення значення атрибута нашого об'єкта. Код повинен бути післяосновних тегів:

// отримуємо доступ до об'єкта з його id var element = document.getElementById("MyElem"); alert(element.getAttribute("class")); // Виводимо в діалогове вікно

І останнє завдання: змінюємо значення атрибуту. Для цього у нас заготовлений стиль «big». Замінимо значення атрибута class на цей стиль:

// отримуємо доступ до об'єкта з його id var element = document.getElementById("MyElem"); element.setAttribute("class","big");

В результаті наш елемент стане більшого розміру та забарвиться у синій колір (клас big).

Тепер докладніше розглянемо використані прикладі методи роботи з атрибутами.

Методи роботи з атрибутами в JavaScript

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

• Додавання атрибута (встановлення для нього нового значення):

getAttribute(attr)

• Перевірка наявності даного атрибуту:

removeAttribute(attr)

Різні способи роботи з атрибутами

Приклад:Вивести значення атрибута значення текстового блоку.

• Нехай є текстовий блок:

var elem = document.getElementById("MyElem"); var x = "value";

• Розглянемо кілька способів отримання значення атрибута (для виводу використовуйте метод alert()):

elem.getAttribute ("value" )

elem.getAttribute("value")

2. точкова нотація:

elem.attributes .value

elem.attributes.value

3. скобкова нотація:


Встановити значення атрибутівтакож можна декількома способами:

var x = "key"; // key - назва атрибута, val - значення атрибута // 1. elem.setAttribute("key", "val") // 2. elem.attributes.key = "val" // 3. elem.attributes[" key"] = "val" // 4. elem.setAttribute(x, "val")

Властивості елемента body

Через об'єкт document можна звернутися до тіла документа – тегу body – з його деякими корисними властивостями.

Наприклад, тег body має дві властивості: ширина та висота клієнтського вікна:

document.body.clientHeight - висота клієнтського вікна
document.body.clientWidth — ширина вікна клієнта


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

Важливо:При такому зверненні до тегів сторінки скрипт повинен знаходитися в кінці дерева елементів перед закриттям body ! Оскільки до моменту виконання скрипта всі елементи вже мають бути намальовані браузером на екрані

Завдання js8_1. Видавати повідомлення про розмір вікна браузера: наприклад, "розміри вікна браузера 600 х 400"

Доступ до елементів документа в javaScript

Для доступу до об'єктів або пошуку об'єктів передбачено кілька варіантів:

1. Пошук по id(або метод getElementById), повертає конкретний елемент
2. Пошук за назвою тега(або метод getElementsByTagName), повертає масив елементів
3. Пошук за атрибутом name(або метод getElementsByName), повертає масив елементів
4. Через батьківські елементи(Отримання всіх нащадків)

Розглянемо кожен із варіантів докладніше.

1. Доступ до елемента через його атрибут id

Синтаксис: document.getElementById(id)

Метод getElementById() повертає сам елемент, який можна використовувати для доступу до даних

Приклад:На сторінці є текстове поле з атрибутом id="cake":

...

Необхідно



✍ Рішення:

alert(document.getElementById("cake").value); // повертає "у тортів"

Можна виконати те саме, реалізувавши звернення до об'єкта через змінну:

var a=document.getElementById("cake"); alert (a.value); // виведемо значення атрибута value, тобто. текст "у тортів"

Важливо:Скрипт повинен бути обов'язково після тега!

Синтаксис:
document.getElementsByTagName(name);

Приклад:На сторінці є текстове поле (тег input) з атрибутом value:

...

Необхідно: вивести значення атрибута value

Метод getElementsByTagName через змінну організує доступ всім елементам input (тобто. до масиву елементів input), навіть якщо цей елемент єдиний на сторінці. Щоб звернутися до конкретного елемента, наприклад першого, то вказуємо його індекс (масив починається з нульового індексу).

✍ Рішення:

Звертаємось до конкретного елемента за індексом:

var a =document.getElementsByTagName("input"); alert(a.value); // повертає "у тортів"

Синтаксис:
document.getElementsByName(name);

Метод getElementsByName("...") повертає масив об'єктів, у яких атрибут name дорівнює вказаному як параметр методу значенню. Якщо такий елемент лише один на сторінці, метод все одно повертає масив (тільки з одним єдиним елементом).

Приклад:припустимо в документі є елемент:

var element = document.getElementsByName("MyElem"); alert(element.value);

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

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

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

Доступ до нащадків у javascriptвідбувається за допомогою властивості childNodes. Властивість належить об'єкту-батькові.

document.getElementById (roditel) .childNodes ;

document.getElementById(roditel).childNodes;

Розглянемо приклад, де теги зображень поміщені в контейнер — тег div . Таким чином, тег div є батьком даних зображень, а самі теги img відповідно є нащадками тега div:

Тепер виведемо модальне вікно значення елементів масиву з нащадками, тобто. тегами img:

var myDiv=document.getElementById("div_for_img"); // звертаємось до батька-контейнера var childMas=myDiv.childNodes; // масив нащадків for (var i = 0; i< childMas.length;i++){ alert(childMas[i].src); }

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

For (var a in childMas)( alert(childMas[a].src); )

Інші способи розглянемо на прикладі:

Доступ:

... // небажані та застарілі методи доступу до елементів: alert(document.forms.name); // f alert(document.forms.elements.type); // text alert(document.forms.elements.options.id); // o2 alert(document.f.b.type); // button alert(document.f.s.name); // ss alert(document.f.s.options.id); // o2 // кращі методи доступу до елементів alert(document.getElementById("t").type); // text alert(document.getElementById("s").name); // ss alert(document.getElementById("s").options.id); // 02 alert(document.getElementById("o3").text); // 4 ...

Приклад:У html-документі створити кнопку та текстове поле. За допомогою скрипта розфарбовувати фон кнопки (властивість style.backgroundColor кнопки) та виводити напис "Вітаю!"у текстовому полі (трибут value).

HTML-код:

document.getElementById("t1").value = "(!LANG:Привіт!""; document.getElementById("b1").style.backgroundColor = "red";!}

Варіант 2:

document.getElementById("t1").setAttribute("value","Привіт!"); document.getElementById("b1").style.backgroundColor = "red";

Завдання Js8_2.Створіть теги текстових полів відповідно до зображення на малюнку. Задайте їм відповідні (зазначені малюнку) значення атрибутів id . За допомогою скрипта додайте до всіх числових полів (що передбачають чисельні значення) значення « 0 »

Перевірка правильності внесення даних форми

Чи не залишилося поле порожнім?

Даним довіряти не можна. Припустити, що користувачі під час введення даних їх перевірятимуть, нерозумно. Значить, необхідно для цього використовувати javascript.

Для того, щоб перевірити, чи не залишилося текстове поле порожнім(наприклад, після заповнення користувачем даних будь-якої анкети), слід звернутися до якості value . Якщо значенням властивості є порожній рядок (""), то необхідно якось сповістити про це користувача.

if(document.getElementById("name").value=="") ( якісь дії, наприклад, виведення повідомлення з вимогою заповнити поле );

Крім того, можна обійтися без скрипта. Тег input текстового поля має атрибут pattern . як його значення вказується регулярне вираз перевірки даних у даному текстовому полі форми. Якщо є атрибут pattern, то форма не надсилатиметься, поки це текстове поле не буде заповнено правильно.
Наприклад, для перевірки, чи не залишилося поле порожнім:

Текст замість числового значення: функція isNaN

Якщо поле передбачає введення числового значення, а замість цього користувач вводить текст, необхідно використовувати функцію isNaN (з англ. «Чи не є числом?»), яка перевіряє тип даних, що вводяться, і повертає true у разі введення текстових даних замість числових.

Т.ч. якщо повернено true , необхідно сповістити користувача у тому, щоб він запровадив правильний формат, тобто. число.

if(isNaN(document.getElementById("minutes").value))( оповіщення з вимогою ввести числові дані);

Дана сторінка з елементами для заповнення:


Фрагмент коду html:

Необхідно:
Доповніть порожні місця фрагмента коду, розташованого нижче, який перевіряє правильність заповнення двох текстових полів: ім'я(id="name") та хвилин(id="minutes"). Використовуйте перевірку на залишення поля порожнім ("") та правильного формату заповнення числового поля (isNaN).

* Виконати завдання також за допомогою атрибута pattern текстових полів за допомогою .

Фрагмент скрипту:

У коді використовуються для побудови складних умов, пройдені раніше.

Новим поняттям для вас є виклик функції як обробник події кнопки:
onclick="placeOrder();"
По клацанню на кнопці буде викликатись функція placeOrder()

На цьому уроці ми розглянемо методи об'єкта document, які призначені для пошуку вузла або колекції вузлів у всьому документі. Також методи об'єкта node (вузла), які виконують аналогічні дії, але вже серед своїх дочірніх вузлів.

Методи, призначені для пошуку вузла або колекції вузлів у дереві

На попередньому уроці ми розглянули властивості, за допомогою яких ми можемо пересуватися по дереву та знаходити потрібні нам вузли. Проте, пошук вузлів з допомогою їхніх властивостей заняття дуже важке і ефективне. Тому, щоб знайти вузли в дереві, веб-розробники зазвичай використовують спеціально призначені для цього методи об'єкта document або вузла (node).

Метод getElementById()

Метод getElementById(elementID) повертає елемент у документі, що має вказаний ідентифікатор (id="elementID"), як об'єкт Node (вузла). Якщо елемента із зазначеним ідентифікатором не існує, цей метод повертає значення null .

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

document.getElementById(elementID)

Цей метод має один обов'язковий параметр (elementID), що є рядком, що містить значення атрибута id елемента, який Ви хочете отримати.

Наприклад, змінити колір тексту елемента, який має id="nameArticie" .

Назва статті

• 1 пункт
• 2 пункт
• 3 пункт

Метод getElementsByClassName()

Метод getElementsByClassName(className) повертає всі знайдені елементи в документі (для document) або серед дочірніх вузлів (для node), які мають вказане ім'я класу (class="className"), як об'єкт NodeList (колекції вузлів). Тобто цей спосіб повертає об'єкт NodeList , що є колекцією елементів (вузлів), що мають зазначене в параметрі цього методу ім'я класу.

Для отримання кількості знайдених вузлів необхідно використовувати властивість length об'єкта NodeList . А для того, щоб перебрати всі вузли в колекції, можна скористатися наступним циклом:

Var elementsList = document.getElementsByClassName("list"); for (var i=0; i

document.getElementByClassName(className);
node(вузол).getElementByClassName(className);

Цей метод має один обов'язковий параметр (className), що є рядком, що містить назву класу елементів, які Ви хочете отримати. Якщо ви хочете отримати елементи, що мають кілька зазначених класів, їх необхідно в параметрі даного методу розділити за допомогою пробілу. Наприклад, отримати колекцію вузлів, які мають класи classl та class2:

Document.getElementsByClassName("classl class2");

Наприклад, змінити колір фону елементів, які мають клас list:

Назва статті

• 1 пункт
• 2 пункт
• 3 пункт

• 1 пункт
• 2 пункт

Наприклад, одержати колекцію елементів (вузлів), які мають клас list . Далі отримати 2 вузол у колекції, тобто. вузол, що має індекс 1. Після цього змінити колір фону отриманого вузла.

//Отримати колекцію елементів, які мають клас list var elementsList = document.getElementsByClassName("list"); //Отримати 2 вузол у колекції var secondList = elementsList; //Змінити колір тла елемента secondList.style.backgroundColor = "red";

Метод getElementsByTagName()

Метод getElementsByTagName(tagname) повертає всі знайдені елементи в документі (для document) або серед дочірніх вузлів (для node), які мають вказаний тег, як об'єкт NodeList (колекції вузлів). Отримання певного вузла колекції здійснюється за індексом. Відлік елементів (вузлів) у колекції починається з 0.

document.getElementsByTagName(tagname);
node(вузол).getElementsByTagName(tagname);

Даний метод має один обов'язковий параметр (tagname), що є рядком, що містить ім'я тега, яке вказується великими літерами. Якщо в якості параметра вказати рядок, що містить зірочку ("*"), ми отримаємо всі елементи в документі (для об'єкта document) або всі дочірні елементи вузла (для об'єкта node).

Для отримання кількості знайдених вузлів, що містяться в колекції, необхідно використовувати властивість length об'єкта NodeList. А для того, щоб перебрати всі вузли в колекції, можна скористатися наступним циклом:

Var elementsList = document.getElementsByTagName("LI"); for (var i=0; i

Наприклад, змінити колір фону елементів LI:

Назва статті

• 1 пункт
• 2 пункт
• 3 пункт

Наприклад, отримати колекцію елементів UL . Далі отримати 1 вузол у колекції, тобто. вузол, що має індекс 0. Після цього отримати колекцію дочірніх вузлів LI для цього вузла. І насамкінець змінити розмір шрифту кожного елемента в цій колекції.

//Отримати колекцію елементів UL var elementsUL = document.getElementsByTagName("UL"); //Отримати 1 вузол у цій колекції var elementUL = elementsUL; //Отримати колекцію Дочірніх елементів LI вузла elementUL var elementsLI = elementUL.getElementsByTagName("LI"); //Перебрати всі елементи в колекції for (var i = 0; i

Метод getElementsByName()

Метод getElementsByName(name) повертає всі знайдені елементи в документі, що мають вказане ім'я (значення атрибута name), як об'єкт NodeList (колекції вузлів).

Елементи (вузли) додаються до колекції у порядку, у якому зустрічаються у дереві. Отримання певного вузла колекції здійснюється за індексом. Відлік елементів (вузлів) у колекції починається з 0.

Var elementsList = document.getElementsByName("phone"); for (var i=0; i

Примітка: HTML5 атрибут name визнаний застарілим, і він був замінений для більшості елементів атрибутом id .

document.getElementsByName(name)

Даний метод має один обов'язковий параметр (name), що є рядком, що містить значення атрибута name .

Наприклад, змінити колір фону елементів, що мають атрибут name зі значенням phone (name="phone"):

Phone: Інші телефони:

Метод querySelector()

Метод querySelector() повертає перший знайдений елемент у документі (для document) або серед дочірніх вузлів (для node), який відповідає CSS селектору, зазначеному як параметр даного методу. Якщо жоден елемент не відповідає CSS селектору, цей метод повертає null .

document.querySelector(cssSelector)
node.querySelector(cssSelector)

Цей метод має один обов'язковий параметр (cssSelector), що є рядком, що містить CSS селектор, відповідно до якого вибирається елемент.

Наприклад, змінити колір тексту першого знайденого елемента, який відповідає селектору #main p:

Наприклад, отримати колекцію елементів DIV у документі. Далі отримати 1 вузол у колекції, тобто. вузол, що має індекс 0. Для цього вузла знайти серед його дочірніх вузлів перший елемент, який відповідає CSS селектору h1+p . Після цього змініть розмір шрифту цього елемента.

//Отримати колекцію елементів DIV var elementsDIV = document.getElementsByTagName("DIV"); //Отримати 1 вузол у цій колекції var elementDIV = elementsDIV; //Отримати вузол p, розташований відразу ж після вузла h1 //Пошук вузла робити серед дочірніх вузлів вузла, який зберігається в змінній elementDIV var elementP = elementDIV.querySelector("h1+p"); //Змінити розмір шрифту елемента elementP.style.fontSize = "30px";

Метод querySelectorAll()

Метод querySelectorAll() повертає всі знайдені елементи в документі (для document) або серед дочірніх вузлів (для node), які відповідають CSS селектору, вказаному як параметр даного методу, у вигляді об'єкта NodeList (колекції вузлів). Звертання до вузлів у колекції здійснюється за індексом. Відлік елементів (вузлів) у колекції починається з 0.

Для отримання кількості знайдених вузлів необхідно використовувати властивість length об'єкта NodeList. А для того, щоб перебрати всі вузли в колекції, можна скористатися наступним циклом:

Var elementsList = document.querySelectorAll("#main p"); for (var i=0; i

document.querySelectorAll(cssSelector);
node(вузол).querySelectorAll(cssSelector);

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

Наприклад, змінити колір тексту елементів, які відповідають селектору #main p:

Наприклад, отримати дочірній вузол, що має атрибут id зі значенням sidebar . Змінити колір фону дочірніх елементів p-вузла, отриманого на попередньому кроці:

//отримати елемент (вузол), що має id="sidebar" var sidebar = document.getElementById("sidebar"); //отримати колекцію вузлів, що відповідають селектору "p" var elementsListP = sidebar.querySelectorAll("p"); //Перебрати всі елементи в колекції for (var i = 0; i

Завдання

Написати код на мові JavaScript використовуючи методи getElementById() , getElementsByClassName() , getElementsByTagName() , querySelector() , querySelectorAll() для наступних завдань:

1. Отримати всі елементи p, розташовані в блоці main;
2. Отримати блок aside, розташований у контейнері div;
3. Отримати блок footer, розташований у контейнері body.

Кожне завдання виконати якомога більшою кількістю різних способів.

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

Пошук по id

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

document.getElementById (id)

Параметри:

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

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

HTML код:

JavaScript:

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

Так як посік по 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-бібліотеки.

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