Погружение в JavaScript DOM: изучение селекторов и манипулирование элементами - Fcodenotes

Готовы ли вы погрузиться в захватывающий мир JavaScript DOM? В этой статье блога мы рассмотрим различные методы выбора элементов и манипулирования ими, используя разговорный язык и примеры кода. Итак, начнём!

Выбор элементов

getElementById: этот метод позволяет выбрать элемент по его уникальному идентификатору.
```
const element = document.getElementById('myElement');
```
querySelector: с помощью этого метода вы можете выбирать элементы с помощью селекторов в стиле CSS.
```
const element = document.querySelector('.myClass');
```
querySelectorAll: аналогично querySelector, этот метод выбирает все элементы, соответствующие селектору CSS, и возвращает их в виде NodeList.
```
const elements = document.querySelectorAll('p');
```
getElementsByClassName: этот метод выбирает элементы на основе имени их класса и возвращает их как живую HTMLCollection.
```
const elements = document.getElementsByClassName('myClass');
```
getElementsByTagName: используйте этот метод для выбора элементов по имени их тега.
```
const elements = document.getElementsByTagName('div');
```

Управление элементами

innerHTML: это свойство позволяет получить доступ к содержимому HTML внутри элемента или изменить его.
```
const element = document.getElementById('myElement');
element.innerHTML = '<p>Hello, world!</p>';
```

Подобно innerHTML, это свойство позволяет получить доступ к текстовому содержимому элемента или изменить его.

const element = document.getElementById('myElement');
element.textContent = 'Hello, world!';

setAttribute: используйте этот метод для установки или изменения значения атрибута элемента.
```
const element = document.getElementById('myElement');
element.setAttribute('class', 'newClass');
```
appendChild: этот метод позволяет добавить новый дочерний элемент к существующему элементу.
```
const parent = document.getElementById('parentElement');
const child = document.createElement('div');
parent.appendChild(child);
```
removeChild: с помощью этого метода вы можете удалить дочерний элемент из его родительского элемента.
```
const parent = document.getElementById('parentElement');
const child = document.getElementById('childElement');
parent.removeChild(child);
```

classList: это свойство предоставляет методы для добавления, удаления, переключения или проверки наличия классов CSS в элементе.

const element = document.getElementById('myElement');
element.classList.add('newClass');
element.classList.remove('oldClass');
element.classList.toggle('active');
element.classList.contains('newClass'); // returns true or false

Это всего лишь несколько способов начать работу с DOM в JavaScript. Поэкспериментируйте с ними и изучите огромные возможности создания интерактивных веб-страниц!