| Главная » Статьи » веб программирование |
замена тегов html документа с сохранением внутренних классов и id.<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>lecture №22 - об'єктна модель документа</title> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon"> <link rel="stylesheet" href="app.css"> </head> <body> <div class="container"> <header> <h1 class='title' id='first-title'>First Title</h1> </header> <p id="p1">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore accusantium distinctio explicabo iure possimus natus obcaecati fugiat voluptas id, eveniet ab, voluptate repellat? Inventore voluptate perferendis sequi distinctio qui consectetur.</p> </div> <div class="container"> <header> <h1 class='title' id='second-title'>Second Title</h1> </header> <p id="p2">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore accusantium distinctio explicabo iure possimus natus obcaecati fugiat voluptas id, eveniet ab, voluptate repellat? Inventore voluptate perferendis sequi distinctio qui consectetur.</p> </div> <div class="container"> <header> <h1 class='title' id='third-title'>Third Title</h1> </header> <p id="p3">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore accusantium distinctio explicabo iure possimus natus obcaecati fugiat voluptas id, eveniet ab, voluptate repellat? Inventore voluptate perferendis sequi distinctio qui consectetur.</p> </div> <div class="container"> <header> <h1 class='title' id='fourth-title'>Fourth Title</h1> </header> <p id="p4">Lorem ipsum dolor sit amet consectetur, adipisicing elit. Labore accusantium distinctio explicabo iure possimus natus obcaecati fugiat voluptas id, eveniet ab, voluptate repellat? Inventore voluptate perferendis sequi distinctio qui consectetur.</p> </div> <!----> <script src="app.js"></script> </body> </html> Найти коллекцию всех элементов с селектором '.container header', сохранить ее в переменной headers. Используя цикл for для полученной коллекции headers, заменить заголовки h1 таким образом первый оставить h1 const headers = document.querySelectorAll('.container header');
for (let i = 1; i < headers.length; i++) { const h1 = headers[i].querySelector('h1');// Отримати поточний заголовок h1 // обрізаєм тегі н1 const inHTML = 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 = inHTML; //новий DOM елемент приймає значення(контент) старого н1 if (classAttribute) { newHeader.setAttribute('class', classAttribute); } if (idAttribute) { newHeader.setAttribute('id', idAttribute); } // Заменить старый заголовок новым headers[i].replaceChild(newHeader, h1); } | |
| Просмотров: 25 | |
| Всего комментариев: 0 | |