Назад Вперед Зміст

Розв'язання задач, використовуючи методи DOM

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

Властивість innerHTML

Приклад 1

Дана сторінка. При натисканні на кнопку вивести вміст абзацу на консоль.

Приклад 2

Дана сторінка. При натисканні на кнопку до тексту абзацу з id="test" додатися текст ",а син писав скрипт.".

Приклад 3

Замінимо всі абзаци на !

Скрипт:

Властивість children

Властивість children зберігає в собі псевдомасив дочірніх елементів. Дочірніми елементами вважаються всі теги, які безпосередньо розташовані усередині блоку.

Синтаксис

елемент.children

Приклад 4

Давайте переберемо у циклі всіх нащадків елемента і виведемо їх вміст:


<div id="parent"> 
	<p>1</p> 
	<p>2</p> 
	<p>3</p> 
	<p>4</p> 
	<p>5</p> 
</div>

Скрипт:

Властивість childNodes

Властивість childNodes зберігає в собі псевдомасив дочірніх вузлів елемента (теги, коментарі та текстові вузли).

Синтаксис

елемент.childNodes

Приклад 5

Отримаємо всі дочірні вузли елемента та виведемо на екран їх вміст: 

<div id="parent">текст
<p>абзац</p>
<!-- коментарий --></div>

	let parent = document.querySelector('#parent');

let nodes = parent.childNodes;


for (let node of nodes) {

	console.log(node.textContent);

}

Приклад 6

Виведемо вміст першого вузла: 

<div id="parent">текст
<p>абзац</p>
 <!-- коментарів --></div>

let parent = document.querySelector('#parent');

console.log(parent.childNodes[0].textContent);

Результат виконання коду:

'текст'

Приклад 7

Виведемо вміст вузла з номером 1: 

<div id="parent">текст<p>абзац</p><!-- коментарій --> ;</div>

let parent = document.querySelector('#parent');

console.log(parent.childNodes[1].textContent);

Результат виконання коду:

' коментар '

Метод createElement

Метод createElement дозволяє створити новий елемент, передавши у параметрі ім'я тега. Після створення з елементом можна працювати як із звичайним елементом, а також його можна додати на сторінку методами prepend, append, appendChild, insertBefore або insertAdjacentElement.

Якщо записати результат роботи createElement у змінну, то в цій змінній буде такий елемент, начебто ми отримали його через querySelector або getElementById.

Єдина відмінність – наш елемент не буде розміщено на сторінці. А так ми можемо міняти йому innerHTML, атрибути, навішувати обробники подій і врешті-решт розмістити його на сторінці.

Синтаксис

document.createElement('ім'я тега')

Приклад 8

Давайте створимо абзац, встановимо текст і помістимо на сторінку в кінець блоку #parent: 


<div id="parent"> 
	<p>1</p> 
	<p>2</p> 
	<p>3</p> 
</div>
let parent = document.querySelector('#parent');

let p = document.createElement('p'); 
p.innerHTML = '!'; 

parent.appendChild(p);

Результат виконання коду: 


	<p>1</p>
	<p>2</p>
	<p>3</p>
	<p>!</p>
</div>

Приклад 9

Даний ul. Давайте розмістимо в ньому 9 тегів li, при цьому їх текстом зробимо порядкові номери: 


	<ul id="parent"></ul>

	let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {

	let li = document.createElement('li');

	li.innerHTML = i;

	parent.appendChild(li);

}

Результат виконання коду: 

<ul>
	<li>1</li>

	<li>2</li>

	<li>3</li>

	<li>4</li>

	<li>5</li>

	<li>6</li>

	<li>7</li>

	<li>8</li>

	<li>9</li>

</ul>

Метод append

Метод append дозволяє вставити в кінець будь-який інший елемент. Параметром метод приймає елемент, як правило, створений через createElement, чи рядок. Можна додати відразу кілька елементів або рядків, перерахувавши їх через кому.

Синтаксис

батько.append(елемент або рядок)

Приклад 10

Давайте створимо абзац, встановимо текст і помістимо на сторінку в кінець блоку #parent: 

<div id="parent">
	<p>1</p>

	<p>2</p>

	<p>3</p>

</div>

let p = document.createElement('p');
p.innerHTML = '!';

parent.append(p);

Результат виконання коду: 

<div id="parent">
	<p>1</p>

	<p>2</p>

	<p>3</p>

	<p>!</p>

</div>

Приклад 11

Помістимо відразу кілька абзаців у кінець блоку #parent: 

<div id="parent"> 
	<p>1</p>

	<p>2</p>

	<p>3</p>

</div>

let parent = document.querySelector('#parent');
let p1 = document.createElement('p');
p1.innerHTML = 'a';
let p2 = document.createElement('p');
p2.innerHTML = 'b';
parent.append(p1, p2);

Результат виконання коду: 

<div id="parent"> <div id="parent">

	<p>1</p>

	<p>2</p>

	<p>3</p>

	<p>a</p>

	<p>b</p>

</div>

Приклад 12

Давайте як параметр методу використовуємо рядок: 

<div id="parent">

	<p>1</p>

	<p>2</p>

	<p>3</p>

</div>

	let parent = document.querySelector('#parent');

parent.append('!');

Результат виконання коду: 

<div id="parent">

	<p>1</p>

	<p>2</p>

	<p>3</p>

	!
</div>

Приклад 13

Даний ul. Давайте розмістимо в ньому 9 тегів li,при цьому їх текстом зробимо порядкові номери: 

<ul id="parent"></ul>
let parent = document.querySelector('#parent');
parent.append('!');
for (let i = 1; i <= 9; i++) {
parent.append('!');
	let li = document.createElement('li');
parent.append('!');
	li.innerHTML = i;
parent.append('!');
	parent.append(li);
}

Результат виконання коду: 

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
	<li>4</li>
	<li>5</li>
	<li>6</li>
	<li>7</li>
	<li>8</li>
	<li>9</li>
</ul>

Приклад 14

Давайте заповнимо таблицю tr-ками та td-шками: 

<table id="table"></table>
let parent = document.querySelector('#parent');
for (let i = 1; i <= 3; i++) {

	let tr = document.createElement('tr'); // создаем tr-ку	
	// Заполняем tr-ку td-шками:
	for (let j = 1; j <= 3; j++) {
		let td = document.createElement('td'); // создаем td-шку
		td.innerHTML = j; // пишем в нее текст		
		tr.append(td); // добавляем созданную td-шку в конец tr-ки
	}	
	table.append(tr); // добавляем созданную tr-ку в конец таблицы
}

Результат виконання коду: 

<table id="table"> 
		<td>1</td>  
		<td>2</td> 
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
	<tr>
		<td>1</td>
		<td>2</td>
		<td>3</td>
	</tr>
</table>

Варіанти завдань

  1. Дан <div>. Усередині нього спочатку знаходиться просто текст, а потім span: 

    <div> text <span>span</span></div>
    Виведіть на екран текст, що знаходиться на початку дива.

  2. Дан <div>. Усередині нього спочатку знаходиться просто текст, а потім span: 

    <div> text <span>span</span></div>
    Поміняйте текст на знак оклику.

  3. Дан <div>. Усередині нього спочатку знаходиться span, а потім просто текст: 

    <div><span>span</span>text </div>
    Поміняйте текст на знак оклику.

  4. Дан <div> з коментарем: 

    <div><!--comment--><span>span</span>text </div>
    На екрані виведіть текст коментаря.

  5. Дан <div> з коментарем: 

    <div><!--comment--><span>span</span> text </div>
    Змініть текст коментаря на знак оклику.

  6. Є кілька способів отримання елементів, наприклад: 

    DOM-вузол елемента <div> :document.body.firstElementChild
// або

    document.body.children[0]
// або (перший вузол пробіл, тому обираємо другий)

    document.body.childNodes[1]
DOM-вузол елемента <ul> :
document.body.lastElementChild
// або
document.body.children[1]
Другий <li> (з ім'ям Піт):
// отримуємо <ul>, та її останню дитину
document.body.lastElementChild.lastElementChild

    1. Напишіть код, який отримає елемент &lidiv>?

    2. Напишіть код, який отримає <ul>?

    3. Напишіть код, який отримає другий <li> (з ім'ям Піт)?

    Тисни сюди!!! -> Подивитись приклад універсального генератора таблиць

  7. Напишіть код, який виділить червоним кольором усі комірки у таблиці по діагоналі. Вам потрібно отримати з таблиці <table> усі діагональні <td> і виділити їх, використовуючи код: td.style.backgroundColor = 'red';

    Повинно вийти так:

  8. Створити таблицю методами

    Повинно вийти так:

  9. Створити таблицю методами DOM

    Повинно вийти так:

Назад Вперед Зміст