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

Работа с классами

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

Дан элемент #elem. Добавьте ему класс www.

Решение:

<p id="elem"></p>
var elem = document.getElementById('elem');
elem.classList.add('www');  

Дан элемент #elem. Удалите у него класс www.

Решение:

<p id="elem" class="www bbb"></p>
var elem = document.getElementById('elem');
elem.classList.remove('www');  

Дан элемент #elem. Проверьте наличие у него класса www.

Решение:

<p id="elem" class="www"></p>
var elem = document.getElementById('elem');
var check = elem.classList.contains('www');
alert(check);  

Дан элемент #elem. Добавьте ему класс www, если его нет и удалите - если есть.

Решение:

<p id="elem" class="www"></p>
var elem = document.getElementById('elem');
elem.classList.toggle('www');  

Дан элемент #elem. Узнайте количество его классов.

Решение:

<p id="elem" class="www zzz aaa"></p>
var elem = document.getElementById('elem');
alert(elem.classList.length);

Дан элемент #elem. Выведите последовательно алертом его классы.

Решение:

<p id="elem" class="www zzz aaa"></p>
var elem = document.getElementById('elem');
for (var i = 0; i < elem.classList.length; i++) {
	alert(elem.classList[i]);
 }   

Работа с CSS

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

Дан элемент #elem. Сделайте его красного цвета, размером 30px, добавьте ему границу. Решите задачу с помощью свойства cssText.

Решение:

<p id="elem">Я учу javascript!</p>
var elem = document.getElementById('elem');
elem.style.cssText = 'color: red; font-size: 30px; border: solid 1px black;';   

Свойство tagName

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

Дан элемент #elem. По клику на него выведите название его тега.

Решение:

<p id="elem" onclick="func()">Элемент</p>
function func() {
	var elem = document.getElementById('elem');
	alert(elem.tagName);
}

Дан элемент #elem. По клику на него выведите название его тега в нижнем регистре.

Решение:

<p id="elem" onclick="func()">Элемент</p>
function func() {
	var elem = document.getElementById('elem');
	alert(elem.tagName.toLowerCase());
}

Даны элементы с классом www. Добавьте каждому элементу в конец название его тега в нижнем регистре.

Решение:

<h1 class="www">Элемент 1</h1>
<p class="www">Элемент 2</p>
<div class="www">Элемент 3</div>
var elems = document.querySelectorAll('.www');
for (var i = 0; i < elems.length; i++) {
	elems[i].innerHTML = elems[i].innerHTML + elems[i].tagName.toLowerCase();
}

Вставка элементов через appendChild

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

Дан ol. Вставьте ему в конец li с текстом 'пункт'.

Решение:

<ol id="ol"></ol>
var ol = document.getElementById('ol');
var li = document.createElement('li');
li.innerHTML = 'пункт';
elem.appendChild(li);   

Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li.

Решение:

<ul id="ul"></ul>
var ul = document.getElementById('ul');
var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
	var li = document.createElement('li');
 	li.innerHTML = arr[i];
	ul.appendChild(li);
}

Привязывание событий при вставке

Дан ul. Дан массив. Вставьте элементы этого массива в конец ul так, чтобы каждый элемент стоял в своем li. Сделайте так, чтобы к вставляемым li было привязано следующее событие: по нажатию на li она должна вывести на экран свой текст.

Решение:

<ul id="ul"></ul>
var ul = document.getElementById('ul');
var arr = [1, 2, 3];
for (var i = 0; i < arr.length; i++) {
	var li = document.createElement('li');
 	li.innerHTML = arr[i];
	li.addEventListener('click', func); //привяжем событие
	ul.appendChild(li);
}

function func() {
	alert(this.innerHTML);
}

Вставка элементов через insertBefore

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

Дан элемент ul, а в нем li #elem. Вставьте перед элементом #elem новую li с текстом '!!!'.

Решение:

<ul id="ul">
	<li>Элемент</li>
	<li id="elem">Элемент #test</li>
	<li>Элемент</li>
</ul>
var ul = document.getElementById('ul');
var test = document.getElementById('elem');

var li = document.createElement('li');
li.innerHTML = '!!!';

ul.insertBefore(li, test);         

Вставка элементов через insertAdjacentHTML

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

Дан элемент #elem. Вставьте перед ним span с текстом '!!!'.

Решение:

<p id="elem">Элемент</p>
var elem = document.getElementById('elem');
elem.insertAdjacentHTML('beforeBegin','<span>!!!</span>');        

Дан элемент #elem. Вставьте после него span с текстом '!!!'.

Решение:

<p id="elem">Элемент</p>
var elem = document.getElementById('elem');
elem.insertAdjacentHTML('afterEnd','<span>!!!</span>');    

Дан элемент #elem. Вставьте ему в начало span с текстом '!!!'.

Решение:

<p id="elem">Элемент</p>
var elem = document.getElementById('elem');
elem.insertAdjacentHTML('afterBegin','<span>!!!</span>');

Дан элемент #elem. Вставьте ему в конец span с текстом '!!!'.

Решение:

<p id="elem">Элемент</p>
var elem = document.getElementById('elem');
elem.insertAdjacentHTML('beforeEnd','<span>!!!</span>');

Потомки

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

Дан элемент #elem. Найдите первого потомка этого элемента и сделайте его текст красного цвета.

Решение:

<ul id="elem">
	<li>пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
</ul>
var elem = document.getElementById('elem');
elem.firstElementChild.style.color = 'red';         

Дан элемент #elem. Найдите последнего потомка этого элемента и сделайте его текст красного цвета.

Решение:

<ul id="elem">
	<li>пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
</ul>
var elem = document.getElementById('elem');
elem.lastElementChild.style.color = 'red';   

Дан элемент #elem. Найдите всех потомков этого элемента и добавьте им в конец текст '!'.

Решение:

<ul id="elem">
	<li>пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
</ul>
var elem = document.getElementById('elem');
for (var i = 0; i < elem.children.length; i++) {
	elem.children[i].innerHTML += ' !';
}

Соседи

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

Дан элемент #elem. Найдите его соседа сверху и добавьте ему в конец текст '!'.

Решение:

<ul>
	<li>пункт 1</li>
	<li id="elem">пункт 2</li>
	<li>пункт 3</li>
</ul>
var elem = document.getElementById('elem');
var prev = elem.previousElementSibling;
prev.innerHTML = prev.innerHTML + '!';

Дан элемент #elem. Найдите его соседа снизу и добавьте ему в конец текст '!'.

Решение:

<ul>
	<li>пункт 1</li>
	<li id="elem">пункт 2</li>
	<li>пункт 3</li>
</ul>
var elem = document.getElementById('elem');
var prev = elem.nextElementSibling;
prev.innerHTML = prev.innerHTML + '!';

Дан элемент #elem. Найдите его соседа снизу его соседа снизу (следующий элемент за соседним) и добавьте ему в конец текст '!'.

Решение:

<ul>
	<li id="elem">пункт 1</li>
	<li>пункт 2</li>
	<li>пункт 3</li>
</ul>
var elem = document.getElementById('elem');
var prev = elem.nextElementSibling.nextElementSibling;
prev.innerHTML = prev.innerHTML + '!';

Родители

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

Дан элемент #elem. Найдите его родителя и покрасьте его в красный цвет.

Решение:

<p>
	Текст родителя <span id="elem">потомок</span>
</p>
var elem = document.getElementById('elem');
elem.parentElement.style.color = 'red';

Дан элемент #elem. Найдите родителя его родителя и покрасьте его в красный цвет.

Решение:

<div>
	<p>Lorem ipsum dolor sit amet.</p>
	<p>Lorem ipsum dolor sit amet.<span id="elem">потомок</span></p>
</div>
var elem = document.getElementById('elem');
elem.parentElement.parentElement.style.color = 'red';

Удаление и клонирование

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

Дан элемент #parent, внутри него дан элемент #child. Дана кнопка. По нажатию на эту кнопку удалите элемент #child.

Решение:

<p id="parent">Родитель <span id="child">потомок</span></p>
<input type="submit" id="button">
var button = document.getElementById('button');
button.addEventListener('click', func);

function func() {
	var parent = document.getElementById('parent');
	var child = document.getElementById('child');
	parent.removeChild(child);
}

Дан ol. По нажатию на кнопку получите его последнего потомка и удалите его.

Решение:

<ol id="parent">
	<li>пункт</li>
	<li>пункт</li>
	<li>пункт</li>
</ol>
<input type="submit" id="button">
var elem = document.getElementById('button');
elem.addEventListener('click', func);

function func() {
	var parent = document.getElementById('parent');
	parent.removeChild(parent.lastElementChild);
}

Дан элемент. Сделайте так, чтобы по нажатию по нему этот элемент удалялся.

Решение:

<p id="elem">Элемент</p>
var elem = document.getElementById('elem');
elem.addEventListener('click', func);

function func() {
	this.parentElement.removeChild(this);
}

Дан ol, а внутри него li. Сделайте так, чтобы по нажатию на любую li эта li удалялась.

Решение:

<ol>
	<li>html</li>
	<li>css</li>
	<li>js</li>
	<li>php</li>
</ol>
var elems = document.getElementsByTagName('li');
for (var i = 0; i < elems.length; i++) {
 	elems[i].addEventListener('click', func);
}

function func() {
	this.parentElement.removeChild(this);
}

Клонирование

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

Дан инпут. Дана кнопка. По нажатию на кнопку клонируйте этот инпут.

Решение:

<input type="submit" id="button">
<input type="text" id="input">
var input = document.getElementById('input');
var button = document.getElementById('button');

button.addEventListener('click', func);

function func(){
	var clone = input.cloneNode(true);
	input.parentElement.appendChild(clone);
}

Практика

Дан массив. Создайте ul через createElement, затем вставьте каждый элемент этого массива в отдельную li внутри этой ul, затем вставьте эту ul в конец body.

Решение:

var arr = [1, 2, 3];

var ul = document.createElement('ul');
for (var i = 0; i < arr.length; i++) {
	var li = document.createElement('li');
 	li.innerHTML = arr[i];
	ul.appendChild(li);
}

document.body.appendChild(ul);

Дан инпут. Рядом с ним находится кнопочка "+". По нажатию на эту кнопку под нашим инпутом должен появится еще один пустой инпут.

Решение:

<input type="submit" value="+" id="button">
<input type="text">
var button = document.getElementById('button');
button.addEventListener('click', func);

function func(){
	var parent = button.parentElement;
	var newInput = document.createElement('input');
	parent.appendChild(newInput);
}

Дан инпут. В него вводится число. По потери фокуса сделайте так, чтобы каждая цифра вставилась в новый инпут. Инпутов для цифр изначально не существует, они должны создаться в процессе работы скрипта.

Решение:

<input type="text" id="input">
var input = document.getElementById('input');
input.addEventListener('blur', func);

function func(){
	var digits = this.value.split(''); //массив цифр
	var parent = input.parentElement;

	for (var i = 0; i < digits.length; i++) {
		var newInput = document.createElement('input');
		newInput.value = digits[i];
		parent.appendChild(newInput);
	}
}

Дана кнопка. Сделайте так, чтобы по нажатию на эту кнопку, скрывался родитель этой кнопки.

Решение:

<div>
	<input type="text">
	<input type="submit" id="button">
</div>
var button = document.getElementById('button');
button.addEventListener('click', func);

function func() {
	this.parentElement.style.display = 'none';
}