JavaScript. Робота з dom

ЛАБОРАТОРНА РОБОТА № 6
Тема: JavaScript. Робота з DOM
Мета роботи: вивчити засоби по роботі з об’єктною моделлю документа; навчитися додавати, змінювати та видаляти елементи веб-сторінки; засвоїти принципи роботи з CSS-стилями
Завдання на лабораторну роботу
Завдання №1

JS:
var arr = document.getElementsByTagName("img");
for(var i = 0; i < arr.length; i++)
{
arr[i].onmousedown = change;
}
function change(){
var elem = this;
var color = elem.style.filter;
if(color == "grayscale(0%)") {
elem.style.filter = "grayscale(100%)";
elem.style.opacity = "100%";
} else {
elem.style.filter = "grayscale(0%)";
elem.style.opacity = "100%";
}
}

Результат виконання:

Завдання №2

JS:
var arr = document.getElementsByClassName("Field");
var input = document.getElementsByClassName("Text");
for(var i = 0; i < arr.length; i++)
{
arr[i].onmouseover = arr[i].onmouseout = change;
}
function change() {
let elem = this;
if(elem.style.backgroundColor != "cornflowerblue") {
elem.style.backgroundColor = "cornflowerblue";
} else {
elem.style.backgroundColor = "white";
}
}

Результат виконання:

Завдання №3

JS:
document.querySelector('#test').onmousemove = function (event)
{
document.querySelector('#offx').innerHTML = event.offsetX;
document.querySelector('#offy').innerHTML = event.offsetY;
}

Результат виконання:

Завдання №4

JS:
let block1 = document.getElementById('block1');
let block2 = document.getElementById('block2');

let toRight = document.getElementById('toRight');

let toLeft = document.getElementById('toLeft');

let arr1 = new Array(6);

for(let i = 0; i < 6; i++) {
arr1[i] = document.querySelectorAll('#block1 label')[i];
}
let arr2= new Array(6);

toRight.addEventListener('click', function ()

{
for(let i = 0; i < arr1.length; i++) {
if (arr1[i] === undefined) {
continue;
}
arr2[i] = undefined;
if (arr1[i].children[0].checked) {
arr1[i].children[0].checked = false;
arr2[i] = arr1[i];
block1.removeChild(arr1[i]);
arr1[i] = undefined;
}
}
let childs = document.querySelectorAll('#block2 label');
let block2 = document.getElementById('block2');
for(let i = 0; i < childs.length; i++)
block2.removeChild(childs[i]);
for(let i = 0; i < arr2.length; i++) {
if(arr2[i] === undefined)
continue;
block2.appendChild(arr2[i]);
}
});

toLeft.addEventListener('click', function ()
{
for(let i = 0; i < arr2.length; i++) {
if (arr2[i] === undefined) {
continue;
}
arr1[i] = undefined;
if (arr2[i].children[0].checked) {
arr2[i].children[0].checked = false;
arr1[i] = arr2[i];
block2.removeChild(arr2[i]);
arr2[i] = undefined;
}
}
let childs = document.querySelectorAll('#block1 label');

for(let i = 0; i < childs.length; i++)

block1.removeChild(childs[i]);

for(let i = 0; i < arr1.length; i++) {

if(arr1[i] === undefined)
continue;
block1.appendChild(arr1[i]);
}
});

Результат виконання: