Узнайте о некоторых основных, но важных методах DOM в JavaScript.

Приведенный ниже код - это то, что мы будем использовать для доступа и управления нашими методами DOM JavaScript:

<div id="parent"> 
  <div class="child one"> < /div>
  <div class="child children second"> < /div>
  <div class="child third"> < /div>
</div>
  1. Выберите и элемент id. Он всегда будет возвращать 1 элемент, поскольку id должны быть уникальными.
document.getElementById(element_id);
Example:
document.getElementById('parent');

2. Выделите все элементы по class имени.

document.getElementsByClassName(class_name); 
// return all elements with class name as an array
Example: 
document.getElementsByClassName('child'); // return child element
document.getElementsByClassName('child children');
// the above returns element which has both child & children class

3. Выберите и элемент по имени тега.

document.getElementsByTagName(tag_name);
Example: 
document.getElementsByTagName('div');

4. Выберите первый элемент с помощью селектора, который возвращает первый элемент в документе, который соответствует указанной группе селекторов.

document.querySelector(selector);
Example
document.querySelector('.child');

5. Выбрать все элементы селектором.

document.querySelectorAll(selector);
Example 
document.querySelectorAll('.child');

6. Получить дочерние элементы элемента.

var parent = document.getElementById('parent');
parent.childNodes; returns NodeList
parent.children; returns HTMLCollection

7. Найдите количество детей.

var parent = document.getElementById('parent');
parent.childElementCount; // 2

8. Найдите родительский узел.

var child = document.querySelector('.child');
child.parentElement;

9. Создание нового элемента DOM.

var div = document.createElement('div');

10. Создание текстового элемента.

var h1 = document.createTextNode("This is text element");

11. Добавьте элемент в качестве дочернего узла в качестве последнего брата соседних узлов.

var parent = document.getElementById('parent');
var div = document.createElement('div');
parent.append(div);

12. Добавьте элемент в качестве дочернего узла в качестве первого элемента смежных узлов.

var parent = document.getElementById('parent');
var div = document.createElement('div');
parent.prepend(div);

Спасибо 😊 🙏 за чтение 📖.

Следуй за мной JavaScript Jeep🚙💨.

Сделайте пожертвование здесь. 80% вашего пожертвования передается тому, кому нужна еда 🥘. Заранее спасибо.