Как получить, менять title через javascript примеры

Поддержи проект!!!

Сегодня будем менять title в javascript. Заменить title через js - это очень просто! Что такая изменение title было живым - мы сделаем скрипт с кнопкой!

Заменить title через javascript пример

1. Кнопка для живого примера замены title
2. Обратимся к title через js
3. Скрипт замены title через javascript
4. Как работает замена title через js
5. Как получить значение title через javascript
6. Скачать можно здесь

Кнопка для живого примера замены title

Для того, чтобы заменить title через javascript нам понадобится кнопка button - ведь я хочу вам показать живой пример, как будет меняться title по нашему воздействию на кнопку!
Простая кнопка с id


<button id="the_button">Нажми на меня!</button>

Обратимся к title через js

Нам нужно обратиться к тегу к title любым способом, который мы знаем... давайте воспользуемся [queryselector]


the_title = document.querySelector("title");

innerHTML + onclick

Еще нам понадобится innerHTML? чтобы положить вовнутрь тега новый текст + ещё нам потребуется onclick:

document.querySelector("#the_button").onclick = function (){ the_title.innerHTML = "Привет мир!"; }

</script>

Скрипт замены title через javascript

Соединим все перечисленное выше вместе и получим скрипт, который и испытаем чуть ниже:

<button id="the_button">Нажми на меня!</button>

<script>

the_title = document.querySelector("title");

document.querySelector("#the_button").onclick = function (){ the_title.innerHTML = "Привет мир!"; }

</script>

Как работает замена title через js

Вот так будет выглядеть наша кнопка и наш пример замены текста в title на странице:

Изменить title через js Но вначале нажмите исследовать элемент и нужно нам найти тег title, как видим внутри у нас title находится текст - Изменить title через js, теперь возвращаемся к нашей кнопке и нажимаем Изменить title через js!


Видим результат, что наше содержания тега title изменилось!

Эту картинку, скриншот, можно увеличить в отдельном окне нажмите по нему!


Как получить значение title через javascript

Для того, чтобы получить значение из тега title нам опять потребуется кнопка:

<button id="the_button1">Получить title через js </button>

Длаее опять обратимся к тегу title через querySelector:

<script>the_title = document.querySelector('title'); </script>

И далее нам только и всего-то вывести результат получения содержания тега title :

<script>the_button1.onclick = function (){ alert(the_title.innerHTML); } </script>

Соберем весь код получения данных из тега title вместе:

<button id="the_button1">Получить title через js </button>

<script>the_title = document.querySelector('title'); </script>

<script>the_button1.onclick = function (){ alert(the_title.innerHTML); } </script>

Пример получения и вывода содержания тега title

Для того, чтобы получить значение из тега title нажмите по кнопке -> Получить title через js Получить title через js