Coding for Future in Lutsk. JavaScript. Part 11

DOM.
Об’єктна модель документа
Об'єктна модель документа (DOM) надає
можливість керувати структурою і стилем
HTML-сторінки. Елементи сторінки можна
змінювати, видаляти і додавати методами
JavaScript.

HTML DOM
(Document Object Model)
Коли веб-сторінка завантажена, браузер створює
DOM сторінки – Об’єктну Модель Документа.
HTML DOM-модель виглядає як дерево об’єктів:

Приклад:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>About DOM</title>
</head>
<body>
DOM. Intro.
</body>
<script>
document.body.style.backgroundColor = 'red';
alert( 'Змінили колір BODY' );
document.body.style.backgroundColor = '';
alert( 'Скинули колір BODY' );
document.body.innerHTML = 'New Text';
</script>
</html>

Задача 48
Що виведе такий alert?
<html>
<head>
<script>
alert( document.body ); // ?
</script>
</head>
<body>
Привіт!
</body>
</html>

Розв’язок
Виведе null, бо на момент виконання скрипта тег <body> ще
не оброблений браузером. Порівняйте:
<html>
<head>
</head>
<body>
Привіт!
</body>
<script>
alert( document.body ); // [object
HTMLBodyElement]
</script>
</html>

JavaScript - HTML DOM методи
HTML DOM методи є діями, які ви можете
виконувати над HTML елементами.
HTML DOM властивості є величинами
(HTML елементів), які ви можете
встановлювати чи змінювати.

Приклад.
Зміна вмісту (innerHTML) елементу <p> з ідентифікатором
id="demo":
<html>
<body>
<p id="demo"></p>
<script>
document.getElementById("demo").innerHTML =
"Hello World!";
</script>
</body>
</html>
Тут getElementById є методом, а innerHTML – властивістю.

Пошук HTML елементів
Пошук по id
var myElement =
document.getElementById("intro");
Якщо елемент знайдений, метод поверне цей елемент як
об’єкт (з ім’ям myElement).
Якщо елемент не знайдений, myElement отримає
значення null.

Приклад.
<!DOCTYPE html>
<html><body>
<p id="intro">Hello World!</p>
<p>This example demonstrates the <b>getElementById</b>
method!</p>
<p id="demo"></p>
<script>
var myElement = document.getElementById("intro");
var nullElement = document.getElementById("null");
"The text from the intro paragraph is " +
myElement.innerHTML + " Value of nullElement is " +
nullElement;
</script>
</body>
</html>
Hello World!
This example demonstrates the getElementById method!
The text from the intro paragraph is Hello World! Value of nullElement is null

Задача 49
Напишіть сторінку, яка міститиме абзац
<p id="demo">Початковий текст</p>.
Після нього додайте скрипт, який
видаватиме запит (prompt) користувачу з
текстом "Який текст Ви хочете бачити у
demo?" Після натискання OK текст у
demo повинен замінятись на новий.

Розв’язок
<!DOCTYPE html>
<html>
<head>
<title>Заміна тексту в id</title>
</head>
<body>
<p id="demo">Початковий текст</p>
<script>
var x = document.getElementById("demo");
var newText = prompt("Який текст Ви хочете бачити у demo?",
x.innerHTML);
x.innerHTML = newText;
</script>
</body>
</html>

Пошук за іменем тега
var x = document.getElementsByTagName("p");
Метод повертає колекцію (псевдомасив) елементів.
Доступ до них можна виконувати так: x[0], x[1]…
Зауваження. При пошуку за id використовується
getElement..., а при пошуку за іменем тега –
getElements... (бо id має бути унікальним, а
тегів може бути скільки завгодно).

Приклад 1:
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p>The DOM is very useful.</p>
<p>This example demonstrates the
<b>getElementsByTagName</b> method</p>
<p id="demo"></p>
<script>
var x = document.getElementsByTagName("p");
'The first paragraph (index 0) is: ' + x[0].innerHTML;
alert( x.length ); // 4, довжина псевдомасива
</script>
</body>
</html>

Елемент може бути всередині іншого елемента. Тоді пошук може бути
заданий так:
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
Приклад 2:
…
<div id="main">
<p>The DOM is very useful.</p>
<p>This example demonstrates the
<b>getElementsByTagName</b> method</p>
</div>
<p id="demo"></p>
<script>
var x = document.getElementById("main");
var y = x.getElementsByTagName("p");
'The first paragraph (index 0) inside "main" is: ' +
y[0].innerHTML;
</script>
…

Задача 50
Напишіть сторінку, яка застосовує метод
getElementsByTagName до тега body і
поміщає на сторінку два абзаци:
Абзац 1
Абзац 2

Розв’язок
<!DOCTYPE html>
<html>
<head>
<title>Заміна тексту з тегу</title>
</head>
<body>
<script>
x = document.getElementsByTagName("body");
x[0].innerHTML="<p>Абазац 1</p><p>Абазац 2</p>";
</script>
</body>
</html>

Пошук за іменем класу
var x =
document.getElementsByClassName("intro");
Метод повертає список елементів з класом intro.
document.getElementsByClassName('test');
- отримуються всі елементи класу test.
document.getElementsByClassName('red test');
- всі елементи, у яких є клас red і клас test.
document.getElementById('main').getElementsByC
lassName('test');
- всі елементи з класом test, які є дочірніми до
елемента з id main.

Приклад:
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the
<b>getElementsByClassName</b> method.</p>
<p id="demo"></p>
<script>
var x = document.getElementsByClassName("intro");
'The first paragraph (index 0) with class="intro": ' +
x[0].innerHTML;
</script>
</body>
</html>

Задача 51
Розмістіть на сторінці абзац
<p class="test">Change me!</p>
Напишіть скрипт для заміни цього
тексту на "Another text".

Розв’язок
<!DOCTYPE html>
<html>
<head>
<title>Заміна тексту в класі</title>
</head>
<body>
<p class="test">Change me!</p>
<script>
document.getElementsByClassName("test")[0].innerHTML
= "Another text";
</script>
</body>
</html>

Пошук за CSS селектором
var x = document.querySelectorAll("p.intro");
Метод повертає список всіх елементів <p> з класом
intro.
Можна робити пошук не тільки по класу, але й по
псевдокласу:
document.querySelectorAll(':hover')
document.querySelectorAll(':active')
document.querySelector(css) повертає не всі
елементи, а тільки перший елемент з селектором
css. Зручно, якщо ми точно знаємо, що такий
елемент єдиний.

Приклад:
<!DOCTYPE html>
<html>
<body>
<p>Hello World!</p>
<p class="intro">The DOM is very useful.</p>
<p class="intro">This example demonstrates the
<b>querySelectorAll</b> method.</p>
<p id="demo"></p>
<script>
var x = document.querySelectorAll("p.intro");
'The first paragraph (index 0) with class="intro": ' +
x[0].innerHTML;
</script>
</body>
</html>

Доступні також такі HTML об’єкти (і колекції
об’єктів):
• document.anchors
• document.body
• document.documentElement
• document.embeds
• document.forms
• document.head
• document.images
• document.links
• document.scripts
• document.title

Деякі приклади:
document.body.innerHTML – вміст тегу
<body>.
document.images.length – число зображень
в документі.
document.links.length – число
гіперпосилань в документі.
document.scripts.length – число скриптів.
document.title – отримує і встановлює
титул документа.

Зміна HTML
document.write()
Метод document.write() можна використовувати,
щоб писати прямо у вихідний потік HTML.
Приклад:
<script>
document.write("<p>Text</p>");
document.write(Date());
</script>
Застереження. Не слід використовувати
document.write() після того, як документ повністю
завантажено, оскільки це може переписати вміст
документа.

Задача 52
Напишіть скрипт для виведення на
сторінці чисел від 1 до 400 по 20 в рядок.
Вказівки:
- перехід на новий рядок можна задати
тегом <br>;
- перевірку закінчення ряду з 20 чисел
можна виконати за допомогою операції
знаходження остачі від ділення %.

Розв’язок
<!DOCTYPE html>
<html>
<head>
<title>1...400</title>
</head>
<body>
<script>
for (var i = 1; i <= 400; i++){
document.write( i + " " );
if (i%20 == 0) document.write("<br>");
}
</script>
</body>
</html>
P.S. Придумайте спосіб належного вирівнювання масиву чисел.

Зміна вмісту через innerHTML
Типовий синтаксис:
document.getElementById(id).innerHTML = new
HTML
Приклади використання:
<h1 id="id01">Old Heading</h1>
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML = "New
text!";
var element = document.getElementById("id01");
element.innerHTML = "New Heading";
</script>

Coding for Future in Lutsk. JavaScript. Part 11

Recommended

Recommended

More Related Content

Similar to Coding for Future in Lutsk. JavaScript. Part 11

Similar to Coding for Future in Lutsk. JavaScript. Part 11 (20)

More from Олег Вілігурський

More from Олег Вілігурський (20)

Recently uploaded

Recently uploaded (15)

Coding for Future in Lutsk. JavaScript. Part 11