Главная » Статьи » веб программирование
Замена тегов заголовка html  с помощью JS

отличие метода .outerHTML от .innerHTML

 

.outerHTML представляет весь HTML-код элемента, включая его собственные открывающий и закрывающий теги, а также весь его внутренний HTML-контент, в то время как .innerHTML представляет только внутренний HTML-контент элемента, исключая его собственные теги.

 

 

Имеем веб страницу с кодом:

<!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>

заменить заголовки н1 на н3:  

// Найти все элементы с классом container и header

const headers = document.querySelectorAll('.container.header'); //                                                                         for (let i = 0; i < headers.length; i++) {

headers[i].querySelector('h1').outerHTML = '<h3>' + headers[i].querySelector('h1').innerHTML + '</h3>'; }

 

headers[i].querySelector('h1').outerHTML = '<h3>' + headers[i].querySelector('h1').innerHTML + '</h3>';

Давайте разберем эту строку по частям:

  1. headers[i]: Это обращение к i-тому элементу в коллекции headers, которая была получена с помощью querySelectorAll('.container.header'). headers[i] представляет собой один из этих элементов.

  2. .querySelector('h1'): Этот метод вызывается на элементе headers[i]. Он ищет первый дочерний элемент, который соответствует CSS-селектору 'h1'. В этом случае он ищет первый элемент <h1> внутри headers[i].

  3. .outerHTML: Это свойство представляет собой весь HTML-код элемента, включая его открывающий и закрывающий теги. Таким образом, headers[i].querySelector('h1').outerHTML предоставляет HTML-код найденного элемента <h1>.

  4. '<h2>' + headers[i].querySelector('h1').innerHTML + '</h2>': Это строка, которая создает новый HTML-код для элемента <h2>. Она начинается с открывающего тега <h2>, затем следует содержимое элемента <h1>, найденного в headers[i], которое получается через .innerHTML, и, наконец, закрывающий тег </h2>. Таким образом, это создает строку, содержащую HTML-код, который вы хотите использовать для замены элемента <h1>.

  5. headers[i].querySelector('h1').outerHTML = '<h2>' + headers[i].querySelector('h1').innerHTML + '</h2>';: Весь этот фрагмент кода заменяет HTML-код элемента <h1> на HTML-код элемента <h2> с сохранением его содержимого.

Внимание при использовании метода .innerHTML будут потеряны классы и id ,и т д если они были внутри заменяемого тега

Категория: веб программирование | Добавил: kuzma (16.03.2024)
Просмотров: 32 | Рейтинг: 0.0/0
Всего комментариев: 0
Войдите:
avatar

Программирование игр на Python

Django - создание сайтов с нуля

Javascript - просто используем готовые решения