Изучение JavaScript: Получение и Изменение Содержимого Тегов

Получение содержимого тега

Использование getElementById

Метод getElementById позволяет получить ссылку на элемент с указанным идентификатором (ID). Ниже приведен пример использования этого метода для получения содержимого тега <div> с ID "myDiv":

<!DOCTYPE html>
<html>
<head>
    <title>Получение содержимого тега</title>
</head>
<body>

<div id="myDiv">Содержимое div</div>

<script>
    // Получение содержимого тега с id="myDiv"
    var content = document.getElementById("myDiv").innerHTML;
    console.log(content); // Выведет: "Содержимое div"
</script>

</body>
</html>

Использование querySelector

Метод querySelector позволяет выбрать элемент, соответствующий указанному селектору CSS. Вот пример использования для получения содержимого тега <div> с ID "myDiv":

<!DOCTYPE html>
<html>
<head>
    <title>Получение содержимого тега</title>
</head>
<body>

<div id="myDiv">Содержимое div</div>

<script>
    // Получение содержимого тега с помощью селектора CSS
    var content = document.querySelector("#myDiv").innerHTML;
    console.log(content); // Выведет: "Содержимое div"
</script>

</body>
</html>

Изменение содержимого тега

Использование getElementById

<!DOCTYPE html>
<html>
<head>
    <title>Изменение содержимого тега</title>
</head>
<body>

<div id="myDiv">Содержимое div</div>

<script>
    // Изменение содержимого тега с id="myDiv"
    document.getElementById("myDiv").innerHTML = "Новое содержимое div";
</script>

</body>
</html>

Использование querySelector

<!DOCTYPE html>
<html>
<head>
    <title>Изменение содержимого тега</title>
</head>
<body>

<div id="myDiv">Содержимое div</div>

<script>
    // Изменение содержимого тега с помощью селектора CSS
    document.querySelector("#myDiv").innerHTML = "Новое содержимое div";
</script>

</body>
</html>

В этих примерах мы показали, как использовать методы getElementById и querySelector для получения ссылок на элементы, а также как использовать свойство innerHTML для изменения содержимого тегов. Эти примеры могут помочь вам лучше понять, как работает JavaScript в контексте манипуляции содержимым веб-страницы.

 

Комментарии

Коментарии отсутствуют, будьте первым(ой) кто напишет под этим постом!

Написать коментарий