3.html - master - Codeboy1/lab6

3.html
54 строки2 KB
Codeboy1
create: 1.html, 2.html, 3.html, 4.html, 5.html, 6.html, 7.html, 8.html, 9.html
01 апр 2026, 14:10
01 апр 2026, 14:10b887c38
<html>
<body>
<div>Пользователи:</div>
<ul>
<li>Джон</li>
<li>Пит</li>
</ul>

<script>
    // 1. Получение элемента <div>
    // Способ 1: по тегу
    const divElement = document.getElementsByTagName('div')[0];
    console.log('1. <div> элемент:', divElement);
    console.log('Текст <div>:', divElement.textContent);
    
    // Способ 2: через querySelector
    const divElement2 = document.querySelector('div');
    console.log('Альтернативный способ:', divElement2);
    
    // 2. Получение элемента <ul>
    // Способ 1: по тегу
    const ulElement = document.getElementsByTagName('ul')[0];
    console.log('2. <ul> элемент:', ulElement);
    
    // Способ 2: через querySelector
    const ulElement2 = document.querySelector('ul');
    console.log('Альтернативный способ:', ulElement2);
    
    // 3. Получение второго <li> (с именем Пит)
    // Способ 1: через коллекцию по тегу
    const allLi = document.getElementsByTagName('li');
    const secondLi = allLi[1]; // индексация с 0, поэтому второй элемент имеет индекс 1
    console.log('3. Второй <li> элемент:', secondLi);
    console.log('Текст второго <li>:', secondLi.textContent);
    
    // Способ 2: через querySelector с индексом
    const secondLi2 = document.querySelectorAll('li')[1];
    console.log('Альтернативный способ:', secondLi2);
    
    // Способ 3: через псевдокласс nth-child
    const secondLi3 = document.querySelector('li:nth-child(2)');
    console.log('Еще один способ:', secondLi3);
    
    // Демонстрация работы на странице
    alert('Проверьте консоль браузера (F12) для просмотра результатов!');
    
    // Вывод в виде алертов для наглядности
    alert(`Найден <div> с текстом: "${divElement.textContent}"\n` +
          `Найден <ul> с количеством li: ${ulElement.children.length}\n` +
          `Найден второй <li> с именем: "${secondLi.textContent}"`);
</script>

</body>
</html>