Работа с DOM средствами javascript - веб программирование - Каталог статей

Главная » Статьи » веб программирование

Работа с DOM средствами javascript

<!DOCTYPE html>

<head>

<title>lecture №22 - об'єктна модель документа</title>

<style>

.first {

color: red;

}

.second {

color: blue;

}

.third {

color: green;

background-color: yellow;

}

.fourth {

color: gray;

}

.border {

border: solid red 1px;

}

.title {

padding: 1rem 2rem;

border: double 2px violet;

}

</style>

</head>

<body>

const classes = ['first', 'second', 'third', 'fourth'];

// 1 -----------------------------------

//Отримати всі елементи з тегом h1.

/*const h1Elements = document.getElementsByTagName('h1');

//Вивести на консоль тип отриманого об'єкту та його розмір

console.log(`Тип : ${typeof h1Elements}`); // object

console.log(`Рoзмiр : ${h1Elements.length}`); // 4

// Використовуючи цикл for, вивести на консоль кожний елемент з отриманого об'єкту.

for (let i = 0; i < h1Elements.length; i++) {

console.log(h1Elements[i]); // Вывод текущего элемента h1 на консоль

}*/

//--------------------------------------------------

// 2 Отримати перший абзац за допомогою document.querySelector('#id') за його ідентифікатором p1. Встановити для нього стиль background-color = "gold"

//const firstPar = document.querySelector('#p1');

//Встановити для нього стиль background-color = "gold"

//firstPar.style.backgroundColor = 'gold';

//----------------------------------------------

// 3 Отримати другий абзац за допомогою document.querySelector('#id') за його ідентифікатором p2. Встановити для нього стилі background-color:gold; color: blue; font-size: 2rem;

// Отримати другий абзац за допомогою document.querySelector('#id')

//const secondPar = document.querySelector('#p2');

// стилі background-color:gold; color: blue; font-size: 2rem;

//secondPar.style.backgroundColor = 'gold';

//secondPar.style.color = 'blue';

//secondPar.style.fontSize = '2rem';

//-----------------------------------------------------

// 4 Отримати третій абзац за допомогою document.querySelector('#id') за його ідентифікатором p3. Призначити для нього клас third

//Отримати третій абзац за допомогою document.querySelector('#id')

//const thirdPar = document.querySelector('#p3');

//за ідентифікатором p3. Призначити для нього клас third

//thirdPar.classList.add('third');

//---------------------------------------------------------------------

// 5 Отримати четвертий абзац за допомогою document.querySelector('#id') за його ідентифікатором p4. Призначити для нього класи fourth та border

// Отримати четвертий абзац за допомогою document.querySelector('#id')

//const fourthPar = document.querySelector('#p4');

// за ідентифікатором p4. Призначити для нього класи fourth та border

//fourthPar.classList.add('fourth', 'border');

// 6 Знайти всі елементи з класом container. Використовуючи цикл for, вивести на консоль перший елемент для кожного зі знайдених елементів.

// Знайти всі елементи з класом container

/*const containers = document.querySelectorAll('.container');

for (let i = 0; i < containers.length; i++) {

// Отримати перший елемент усередині поточного контейнера

const firstElement = containers[i].querySelector(':first-child');

// вивести на консоль перший елемент для кожного зі знайдених елементів

console.log(firstElement);

}*/

//----------------------------------------------------------------

// 7 Знайти всі елементи з класом container. Використовуючи цикл for, вивести на консоль вміст першого елементу для кожного першого елемента зі знайдених елементів.

const containers = document.querySelectorAll('.container');// Знайти всі елементи з класом container

for (let i = 0; i < containers.length; i++) {

//console.log(containers[i]); // повний вміст контейнерів

// Отримати перший дочірній елемент поточного контейнера

const firstChild = containers[i].querySelector(':first-child');

// Якщо є перший дочірній елемент, вивести його на консоль

if (firstChild) {

console.log(firstChild.textContent);

}

//----------------------------------------------------------------

// 8 Знайти колекцію всіх елементів з селектором '.container header', зберегти її в змінній headers. Використовуючи цикл for для отриманої колекції headers, замінити заголовки h1 таким чином

// перший залишити h1

//другий замінити на h2

//третій замінити на h3

//четвертий замінити на h4 зберегти початкові атрибути id та class

// Використовуючи цикл for для колекції headers та масив classes

const classes = ['first', 'second', 'third', 'fourth'];

const headers = document.querySelectorAll('.container header');

for (let i = 1; i < headers.length; i++) {

const h1 = headers[i].querySelector('h1');// Отримати поточний заголовок h1

const textH1 = h1.innerHTML;// строкове HTML-коду + внутрішній HTML-контент без відkрив і закрив тегів

const classAttribute = h1.getAttribute('class');// Отримати атрибути класу

const idAttribute = h1.getAttribute('id');// Отримати атрибути id

// Замінити заголовок на новий тег

let newTag;

if (i === 1) {

newTag = 'h2';

} else if (i === 2) {

newTag = 'h3';

} else if (i === 3) {

newTag = 'h4';

}

// Створити новий заголовок із включенням вмісту та атрибутів класу та id

const newHeader = document.createElement(newTag); // Створити новий DOM елемент з заголовком

newHeader.innerHTML = textH1; //новий DOM елемент приймає значення(контент) старого н1

if (classAttribute) {

newHeader.setAttribute('class', classAttribute); //додаємо клас

}

if (idAttribute) {

newHeader.setAttribute('id', idAttribute); //додаємо id

}

headers[i].replaceChild(newHeader, h1); // старий н1 замінюємо на сформований "newHeader"

console.log(headers[i]); // повний вміст контейнерів

}

// Використовуючи цикл for для колекції headers та масив classes, додати до отриманих тегів-заголовків класи таким чином

//до h1 додати клас first

//до h2 додати клас second

//до h3 додати клас third

// h4 додати клас fourth

for (let i = 0; i < headers.length; i++) {

const header = headers[i].querySelector('h1, h2, h3, h4');

// Отримуємо тип заголовка (h1, h2, h3, h4)

const headerType = header.tagName.toLowerCase();

// Встановлюємо відповідний клас залежно від типу заголовка

switch (headerType) {

case 'h1':

header.classList.add('first');

break;

case 'h2':

header.classList.add('second');

break;

case 'h3':

header.classList.add('third');

break;

case 'h4':

header.classList.add('fourth');

break;

default:

//Якщо заголовок не є жодним з очікуваних типів, не додаємо клас

break;

}

</script>

</body>

</html>

Категория: веб программирование | Добавил: nirhasia (20.03.2024)

Просмотров: 27 | Рейтинг: 0.0/0

Всего комментариев: 0