Примеры решения задач

Задача . Изменение текста в span

Задача. Повторите поведение кнопки по нажатию на нее (она меняет текст в span):

Это span с текстом.

Решение:

<button onclick="buttonClick()">Нажми на меня</button>
<span id="elem">Это span с текстом.</span>
function buttonClick() {
	var elem = document.getElementById('elem');
	elem.innerHTML = '!!!';
}

Задача . Замена span на тег b без изменения текста

Задача. Повторите поведение кнопки по нажатию на нее (она меняет span на тег b, не изменяя при этом текст внутри тега):

Это span с текстом.

Решение: просто так заменить теги, не трогая их внутреннего содержимого, невозможно. В данном случае необходимо найти внутреннее содержимое тега span, а затем заменить этот span на тег b, внутри которого будет стоять то, что было внутри span. Чтобы тег span исчез совсем, нужно поменять его outerHTML, а не innerHTML (в этом случае тег b оказался бы внутри span, а это нам не нужно по условию задачи):

<button onclick="buttonClick()">Нажми на меня</button>
<span id="elem">Это span с текстом.</span>
function buttonClick() {
	var elem = document.getElementById('elem');
	elem.outerHTML = '<b>' + elem.innerHTML + '</b>';
}

Задача . На getElementsByTagName

Задача. Дан HTML код (см. под задачей). Поменяйте содержимое абзацев на их порядковый номер в коде.

<h2>Заголовок, не поменяется.</h2>
<p>Абзац, поменяется.</p>
<p>Абзац, поменяется.</p>
<p>Абзац, поменяется.</p>

Решение: создадим кнопку, по нажатию на которую будет вызываться функция func, которая выполнит указанные в условии задачи действия:

<input type="submit" onclick="func()">

Получим теперь элементы по имени тега и переберем их циклом, используя метод getElementsByTagName:

function func() {
	var elems = document.getElementsByTagName('p');
	for (var i = 0; i < elems.length; i++) {
		elems[i].innerHTML = i+1;
	}
}

HTML код станет выглядеть так:

<h2>Заголовок, не поменяется.</h2>
<p>1</p>
<p>2</p>
<p>3</p>
<input type="submit" onclick="func()">

Задача . На getElementsByClassName

Задача. Дан HTML код (см. под задачей). Поменяйте содержимое элементов с классом zzz на их порядковый номер в коде.

<h2 class="zzz">Заголовок с классом zzz.</h2>
<p class="zzz">Абзац с классом zzz.</p>
<p class="zzz">Абзац с классом zzz.</p>
<p>Просто абзац, не поменяется.</p>

Решение: создадим кнопку, по нажатию на которую будет вызываться функция func, которая выполнит указанные в условии задачи действия:

<input type="submit" onclick="func()">

Получим теперь элементы по имени класса и переберем их циклом, используя метод getElementsByClassName:

function func() {
	var elems = document.getElementsByClassName('zzz');
	for (var i = 0; i < elems.length; i++) {
		elems[i].innerHTML = i+1;
	}
}

HTML код станет выглядеть так:

<h2 class="zzz">1</h2>
<p class="zzz">2</p>
<p class="zzz">3</p>
<p class="zzz">4</p>
<p>Просто абзац, не поменяется.</p>
<input type="submit" onclick="func()">

Задача . На querySelectorAll

Задача. Дан HTML код (см. под задачей). Поменяйте содержимое абзацев с классом zzz на их порядковый номер в коде.

<h2 class="zzz">Заголовок с классом zzz, не поменяется.</h2>
<p class="zzz">Абзац с классом zzz.</p>
<p class="zzz">Абзац с классом zzz.</p>
<p>Просто абзац, не поменяется.</p>

Решение: создадим кнопку, по нажатию на которую будет вызываться функция func, которая выполнит указанные в условии задачи действия:

<input type="submit" onclick="func()">

Получим теперь элементы с помощью селектора p.zzz (абзацы с классом zzz) и переберем их циклом, используя метод querySelectorAll:

function func() {
	var elems = document.querySelectorAll('p.zzz');
	for (var i = 0; i < elems.length; i++) {
		elems[i].innerHTML = i+1;
	}
}

HTML код станет выглядеть так:

<h2 class="zzz">Заголовок с классом zzz, не поменяется.</h2>
<p class="zzz">1</p>
<p class="zzz">2</p>
<p class="zzz">3</p>
<p>Просто абзац, не поменяется.</p>
<input type="submit" onclick="func()">

Задачи для решения

Ответы на задачи смотрите в исходном коде страниц по ссылкам.

Свойства innerHTML, outerHTML

Для решения задач данного блока вам понадобятся следующие свойства: innerHTML, outerHTML.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Метод getElementsByTagName

Для решения задач данного блока вам понадобятся следующие методы: getElementsByTagName.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Метод getElementsByClassName

Для решения задач данного блока вам понадобятся следующие методы: getElementsByClassName.

Дан HTML код (см. под задачей). Поменяйте содержимое элементов с классом www на их порядковый номер в коде.

<h2 class="www">Заголовок с классом www.</h2>
<p class="www">Абзац с классом www.</p>
<p class="www">Абзац с классом www.</p>
<p>Просто абзац, не поменяется.</p>

Метод querySelectorAll

Для решения задач данного блока вам понадобятся следующие методы: querySelectorAll.

Дан HTML код (см. под задачей). Поменяйте содержимое абзацев с классом www на их порядковый номер в коде.

<h2 class="www">Заголовок с классом www, не поменяется.</h2>
<p class="www">Абзац с классом www.</p>
<p class="www">Абзац с классом www.</p>
<p class="www">Абзац с классом www.</p>
<p>Просто абзац, не поменяется.</p>

Методы setAttribute, getAttribute, removeAttribute, hasAttribute

Для решения задач данного блока вам понадобятся следующие методы: setAttribute, getAttribute, removeAttribute, hasAttribute.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Задачи

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (по ссылкам не переходите, нажмите на кнопку):

Вы можете открыть этот пример в отдельной вкладке браузера.

Закрепление пройденного

Повторите страницу по данному по образцу:

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (при нажатии на кнопку текст в каждом абзаце поменяется на порядковый номер абзаца):

Вы можете открыть этот пример в отдельной вкладке браузера.

Повторите страницу по данному по образцу (при нажатии на кнопку текст в каждом абзаце поменяется - спереди добавится порядковый номер абзаца):

Вы можете открыть этот пример в отдельной вкладке браузера.