!Lect_3_JS

Март 1, 2021

Содержание

2. Додавання inline-стилів myElement.style.color = 'blue'; // додає вказаний стиль myElement.style.cssText = 'color: blue; background: white'; //
3. Звернення до елементів let myElement = document.querySelector('.dev') myElement.children – повертає колекцією елементів DOM, які є дочірніми
4. Створення нових елементів let myNewElement = document.createElement('div') let myNewTextNode = document.createTextNode('some text') Методи .innerHTML та .textContent
5. Методи вставки myElement.append(...nodes or strings) – додає вузли або рядки в кінець myElement myElement.appendChild(childNode) – додає
6. Методи вставки (приклад) // файл HTML 0 1 2 // файл JavaScript ol.before('before'); // вставити рядок
7. Створення нових елементів let link = document.createElement('a') let text = document.createTextNode('continue reading...') let hr = document.createElement('hr')
8. Видалення елементів myParentElement.removeChild(myElement) – видаляє myElement з myParentElement в DOM та повертає посилання на myElement //
9. Задання функцій через «стрілку» => let func = x => 2*x; let func = function(x) {
11. Скачать презентацию

Слайд 2

Додавання inline-стилів
myElement.style.color = 'blue';
// додає вказаний стиль
myElement.style.cssText = 'color: blue; background: white';
//

додає декілька стилів
myElement.setAttribute ('style', 'color: blue; background: white');
// додає декілька стилів
Зазвичай стилі JavaScript аналогічні стилям в CSS, за винятком того, що стилі, написані через дефіс, змінені на camelCase. Наприклад, background-color стає backgroundColor.

Слайд 3

Звернення до елементів
let myElement = document.querySelector('.dev')
myElement.children – повертає колекцією елементів DOM, які

є дочірніми елементами
myElement.firstElementChild – повертає перший дочірній елемент myElement або значення null
myElement.lastElementChild – повертає останній дочірній елемент myElement або значення null
myElement.previousElementSibling – повертає елемент безпосередньо перед зазначеним у дочірньому списку його батьків або null, якщо вказаний елемент є першим у списку
myElement.nextElementSibling – повертає елемент безпосередньо після зазначеного у дочірньому списку його батьків або null, якщо вказаний елемент є останнім у списку

Слайд 4

Створення нових елементів
let myNewElement = document.createElement('div')
let myNewTextNode = document.createTextNode('some text')
Методи .innerHTML та

.textContent
myElement.innerHTML = '

New content

some text

'
Видалення
myElement.innerHTML = null
Додавання
myElement.innerHTML += '
continue reading...

Слайд 5

Методи вставки
myElement.append(...nodes or strings) – додає вузли або рядки в кінець myElement
myElement.appendChild(childNode)

– додає childNode в кінець myElement
myElement.prepend(...nodes or strings) – додає вузли або рядки на початок myElement
myElement.before(...nodes or strings) – додає вузли або рядки до myElement
myElement.after(...nodes or strings) – додає вузли або рядки після myElement
myElement.replaceWith(...nodes or strings) – заміняє myElement заданими вузлами або рядками
myElement.insertBefore(newNode, referenceNode) – додає newNode в myElement перед referenceNode.

Слайд 6

Методи вставки (приклад)
// файл HTML

0

1

2

// файл JavaScript

before
prepend
0
1
2
append
after

Слайд 7

Створення нових елементів
let link = document.createElement('a')
let text = document.createTextNode('continue reading...')
let hr =

document.createElement('hr')
link.href = 'about.html'
link.appendChild(text)
myElement.appendChild(link)
myElement.appendChild(hr)

Слайд 8

Видалення елементів
myParentElement.removeChild(myElement) – видаляє myElement з myParentElement в DOM та повертає посилання

на myElement
// файл HTML

// файл JavaScript
let d = document.getElementById("top");
let d_nested = document.getElementById("nested");
let removedNode = d.removeChild(d_nested);
myElement.remove() – видаляє елемент з дерева, якому він належить
// файл HTML

Here is div1

Here is div2

Here is div3

// файл JavaScript
let myElement = document.getElementById('div2');
myElement.remove(); // видалить div з ідентифікатором div2

Слайд 9

Задання функцій через «стрілку» =>
let func = x => 2*x; let func

= function(x) { return 2*x; };
let getTime = () => {
let date = new Date();
let hours = date.getHours();
let minutes = date.getMinutes();
return (hours + ':' + minutes);
};
alert( getTime() ); // поточний час
Без фігурних дужок повертають вираз expr: (args) => expr.
З фігурними дужками вимагають явного return.
Не мають своїх this і arguments, при зверненні одержують їх з навколишнього контексту.
Не можна використовувати як конструктори, з new.

!Lect_3_JS

Содержание

Додавання inline-стилівmyElement.style.color = 'blue';// додає вказаний стильmyElement.style.cssText = 'color: blue; background: white';//

Звернення до елементівlet myElement = document.querySelector('.dev')myElement.children – повертає колекцією елементів DOM, які

Створення нових елементівlet myNewElement = document.createElement('div')let myNewTextNode = document.createTextNode('some text')Методи .innerHTML та

New content

Методи вставкиmyElement.append(...nodes or strings) – додає вузли або рядки в кінець myElementmyElement.appendChild(childNode)

Створення нових елементівlet link = document.createElement('a')let text = document.createTextNode('continue reading...')let hr =

Видалення елементівmyParentElement.removeChild(myElement) – видаляє myElement з myParentElement в DOM та повертає посилання

Задання функцій через «стрілку» =>let func = x => 2*x; let func

Похожие презентации