Як маніпулювати DOM у ванільному JavaScript

Отже, ви вивчили змінні, структури виділення та цикли. Тепер настав час дізнатися про маніпуляції з DOM і почати виконувати декілька цікавих проектів на JavaScript.

У цьому уроці ми дізнаємося, як маніпулювати DOM за допомогою ванільного JavaScript. Без зайвих сумнівів, давайте перейдемо прямо до цього.

1. Перш за все

Перш ніж заглибитися в кодування, давайте дізнаємося, що насправді є Dom:

Об'єктна модель документа (DOM) - це інтерфейс програмування для документів HTML і XML. Він представляє сторінку, щоб програми могли змінювати структуру, стиль та вміст документа. DOM представляє документ як вузли та об'єкти. Таким чином, мови програмування можуть підключатися до сторінки. Джерело

В основному, коли браузер завантажує сторінку, він створює об’єктну модель цієї сторінки та друкує її на екрані. Об’єктна модель представлена ​​у деревній структурі даних, кожен вузол є об’єктом із властивостями та методами, а найвищий вузол - об’єктом документа.

Мова програмування може бути використана для доступу та модифікації цієї об'єктної моделі, і ця дія називається маніпуляцією DOM. І ми зробимо це з JavaScript, тому що JS чудова.

2. Фактичний підручник

Для підручника нам знадобляться два файли, один index.html, а інший manipulation.js.

  DOM Manipulation 

DOM manipulation

Tutorial

Sibling

Medium Tutorial

Out of the div

Отже, у нас є наш HTML-файл, і як ви можете бачити, у нас є div з ідентифікатором поділу. Всередині цього у нас є елемент h1, і в цьому ж рядку ви зрозумієте, чому пізніше, у нас є два p-елементи та тег закриття div. Нарешті, ми маємо елемент ap з класом тексту.

2.1. Доступ до елементів

Ми можемо отримати доступ до одного елемента або декількох елементів.

2.1.1. Доступ до одного елемента

Для доступу до одного елемента ми розглянемо два методи: getElementByID та querySelector.

// the method below selects the element with the id ofheadlet id = document.getElementById('head');
// the code below selects the first p element inside the first divlet q = document.querySelector('div p');
/* Extra code */// this changes the color to redid.style.color = 'red';// give a font size of 30pxq.style.fontSize = '30px';

Тепер ми отримали доступ до двох елементів, елементу h1 з ідентифікатором head та першого елемента p всередині div.

getElementById приймає в якості аргументу ідентифікатор, а querySelector бере як аргумент селектор CSS і повертає перший елемент, що відповідає селектору. Як бачите, я призначив результати методів у змінні, а потім додав трохи стилю в кінці.

2.1.2. Доступ до декількох елементів

При доступі до кількох елементів повертається список вузлів. Це не масив, але він працює як один. Таким чином, ви можете прокрутити його та використовувати властивість length, щоб отримати розмір списку вузлів. Якщо ви хочете отримати певний елемент, ви можете використовувати позначення масиву або метод item. Ви побачите їх у коді.

Для доступу до декількох елементів ми будемо використовувати три методи: getElementsByClassName, getElementsByTagName і querySelectorAll.

// gets every element with the class of textlet className = document.getElementsByClassName('text');
// prints the node listconsole.log(className);
/* prints the third element from the node list using array notation */console.log(className[2]);
/* prints the third element from the node list using the item function */console.log(className.item(2));
let tagName = document.getElementsByTagName('p');let selector = document.querySelectorAll('div p');

Здається, код зрозумілий, але я все одно поясню його, бо я симпатичний чувак. :)

По-перше, ми використовуємо метод getElementsByClassName, який бере аргумент як назву класу. Він повертає список вузлів з кожним елементом, що має текст як клас. Потім ми друкуємо список вузлів на консолі. Ми також друкуємо третій елемент зі списку, використовуючи позначення масиву та метод item .

По-друге, ми обираємо кожен елемент p за допомогою методу getElementsByTagName, який приймає ім'я тегу як аргумент і повертає список вузлів цього елемента.

Нарешті, ми використовуємо метод querySelectorAll , який приймає в якості аргументу селектор CSS. У цьому випадку він приймає div p, тому він поверне список вузлів з p елементів всередині div.

Як практичну вправу надрукуйте всі елементи з tagName та списку вузлів селектора та дізнайтеся їх розмір.

2.2. Подолання DOM

Наразі ми знайшли спосіб доступу до конкретних елементів. Що робити, якщо ми хочемо отримати доступ до елемента поруч із елементом, до якого ми вже мали доступ, або отримати доступ до батьківського вузла попередньо доступного елемента? Властивості firstChild, lastChild, parentNode, nextSibling і previousSibling можуть виконати цю роботу за нас.

firstChild використовується для отримання першого дочірнього елемента вузла. lastChild , як ви вже здогадалися, він отримує останній дочірній елемент вузла. parentNode євикористовується для доступу до батьківського вузла елемента. nextSibling отримує для нас елемент поруч із елементом, до якого вже здійснювався доступ, а previousSibling отримує для нас елемент, що передував елементу, до якого вже здійснювався доступ.

// gets first child of the element with the id of divisionlet fChild = document.getElementById('division').firstChild;console.log(fChild);
// gets the last element from element with the id of divisionlet lChild = document.querySelector('#division').lastChild;
// gets the parent node of the element with the id divisionlet parent = document.querySElector('#division').parentNode;console.log(parent);
// selects the element with the id of middlelet middle = document.getElementById('middle');// prints ond the console the next sibling of middleconsole.log(middle.nextSibling);

Наведений вище код спочатку отримує елемент firstChild елемента з ідентифікатором поділу, а потім друкує його на консолі. Потім він отримує елемент lastChild з того самого елемента з ідентифікатором поділу. Потім він отримує батьківський вузол елемента з ідентифікатором поділу та друкує його на консолі. Нарешті, він вибирає елемент з ідентифікатором middle і друкує його наступний вузол Sibling .

Most browsers treat white spaces between elements as text nodes, which makes these properties work differently in different browsers.

2.3. Get and Updating element content

2.3.1. Setting and getting text Content

We can get or set the text content of elements. To achieve this task we are going to use two properties: nodeValue and textContent.

nodeValue is used to set or get the text content of a text node. textContent is used to set or get the text of a containing element.

// get text with nodeValuelet nodeValue = document.getElementById('middle').firstChild.nodeValue;console.log(nodeValue);
// set text with nodeValuedocument.getElementById('middle').firstChild.nodeValue = "nodeValue text";
// get text with textContentlet textContent = document.querySelectorAll('.text')[1].textContent;console.log(textContent);
// set text with textContentdocument.querySelectorAll('.text')[1].textContent = 'new textContent set';

Did you notice the difference between nodeValue and textContent?

If you look carefully at the code above, you will see that for us to get or set the text with nodeValue, we first had to select the text node. First, we got the element with the middle id, then we got its firstChild which is the text node, then we got the nodeValue which returned the word Tutorial.

Now with textContent, there is no need to select the text node, we just got the element and then we got its textContent, either to set and get the text.

2.3.2. Adding and Removing HTML content

You can add and remove HTML content in the DOM. For that, we are going to look at three methods and one property.

Let’s start with the innerHTML property because it is the easiest way of adding and removing HTML content. innerHTML can either be used to get or set HTML content. But be careful when using innerHTML to set HTML content, because it removes the HTML content that is inside the element and adds the new one.

document.getElementById('division').innerHTML =`
  • Angular
  • Vue
  • React
`;

If you run the code, you will notice that everything else in the div with the id of division will disappear, and the list will be added.

We can use the methods: createElement(), createTextNode(), and appendChild() to solve this problem.

createElement is used to create a new HTML element. creatTextNode used to create a text node, and appendChild is used to append a new element into a parent element.

//first we create a new p element using the creatElementlet newElement = document.createElement('p');/* then we create a new text node and append the text node to the element created*/let text = document.createTextNode('Text Added!');newElement.appendChild(text);
/* then we append the new element with the text node into the div with the id division.*/document.getElementById('division').appendChild(newElement);

There is also a method called removeChild used to remove HTML elements.

// first we get the element we want to removelet toBeRemoved = document.getElementById('head');// then we get the parent node, using the parentNOde propertylet parent = toBeRemoved.parentNode;/* then we use the removeChild method, with the element to be removed as a parameter.*/parent.removeChild(toBeRemoved);

So first we get the element that we want to remove, and then we get its parent node. Then we called the method removeChild to remove the element.

2.4. Attribute node

Now we know how to handle elements, so let’s learn how to handle the attributes of these elements. There are some methods like GetAttribute, setAttribute, hasAttribute, removeAttribute, and some properties like className and id.

getAttribute as its name may suggest, it is used to get an attribute. Like the class name, the id name, the href of a link or any other HTML attribute.

setAttribute is used to set a new attribute to an element. It takes two arguments, first the attribute and second the name of the attribute.

hasAttribute used to check if an attribute exists, takes an attribute as an argument.

removeAttribute used to remove an attribute, it takes an attribute as an argument.

Id this property is used to set or get the id of an element.

ClassName is used to set or get the class of an element.

// selects the first divlet d = document.querySelector('div');// checks if it has an id attribute, returns true/falseconsole.log('checks id: '+d.hasAttribute('id'));// set a new class attributed.setAttribute('class','newClass');// returns the class nameconsole.log(d.className);

I know I am a good dude, but that code is just self-explanatory.

Conclusion

That is it! We have learned so many concepts, but there is more to learn about DOM manipulation. What we have covered here gives you a good foundation.

Go ahead and practice, and create something new to cement this new knowledge.

Good day, good coding.

Original text