Учебник: методы JavaScript Dom

JavaScript — методы HTML DOM

Методы DOM в HTML — это действия, которые вы можете выполнять (в HTML-элементах). Значения (элементов HTML), которые вы можете установить или обновить, известны как свойства HTML DOM.

Интерфейс программирования DOM

JavaScript может обращаться к объектной модели документа HTML (DOM) (и с другими языками программирования). Все элементы HTML определяются как объекты в модели DOM. Свойства и методы каждого объекта составляют программный интерфейс.

Свойство — это значение, которое можно получить или изменить (например, изменить содержимое элемента HTML). Метод — это действие, которое вы можете выполнить (например, добавить или удалить элемент HTML).

Следующий код изменяет содержимое (innerHTML) элемента `‹p›` с id="demo":

```javascript
<html>
<body>
<p id=”demo”></p>
<script>document.getElementById(“demo”).innerHTML = “Hello World!”;</script>
</body>
</html>
```

В приведенном выше коде getElementById — это метод, а innerHTML — это свойство.

Метод getElementById

Наиболее частый метод доступа к элементу HTML — использование идентификатора элемента. Метод getElementById в приведенном выше коде использовал id="demo" для поиска элемента.

Свойство innerHTML

Свойство innerHTML — это самый простой способ доступа к содержимому элемента. Свойство innerHTML можно использовать для доступа или замены содержимого элемента HTML.

Любой элемент HTML, включая `‹html›` и `‹body›`, можно получить или изменить с помощью свойства innerHTML.

Документ JavaScript HTML DOM

Все остальные объекты на вашей веб-странице принадлежат объекту документа HTML DOM. Ваша веб-страница представлена объектом документа. Если вы хотите получить доступ к любому элементу на HTML-странице, вы должны сначала получить доступ к объекту документа.

Вот несколько примеров того, как вы можете читать и изменять HTML с помощью объекта документа.

Поиск элементов HTML

Изменение элементов HTML

Добавление и удаление элементов

JavaScript HTML-элементы DOM

На этой странице объясняется, как найти и использовать компоненты HTML в документе HTML.

JavaScript часто используется для управления элементами HTML.

Чтобы добиться этого, вы должны сначала найти элементы. Для этого существует множество вариантов:

- Идентификация элементов HTML на основе их идентификатора

- Идентификация элементов HTML по именам их тегов

- Поиск элементов HTML на основе их имен классов

- Селекторы CSS для поиска элементов HTML

- Использование коллекций объектов HTML для поиска элементов HTML.

- Поиск HTML-элемента по его идентификатору

Идентификатор элемента — это самый простой способ найти элемент HTML в DOM.

Этот код находит элемент с атрибутом id="intro":

```javascript
var myElement = document.getElementById(‘intro’);
```

Метод вернет элемент как объект, если элемент будет обнаружен (в myElement). MyElement будет содержать значение null, если элемент не найден.

Поиск HTML-элементов по имени тега

Все элементы `‹p›` находятся с помощью этого кода

```javascript
var x = document.getElementsByTagName(‘p’);
```

Этот код находит элемент с id="main", а затем все элементы `‹p›` внутри него:

```javascript
var x = document.getElementById(‘main’);
var y = x.getElementsByTagName(‘p’);
```

Поиск элементов HTML по имени класса

Используйте getElementsByClassName, чтобы найти все элементы HTML с одинаковым именем класса (). Этот код генерирует список всех элементов, имеющих атрибут class="intro".

```javascript
var x = document.getElementsByClassName(‘intro’);
```

В Internet Explorer 8 и предыдущих версиях поиск элементов по имени класса не работает.

Поиск элементов HTML с помощью селекторов CSS

Используйте метод querySelectorAll(), чтобы найти все элементы HTML, соответствующие определенному селектору CSS (идентификатор, имена классов, типы, атрибуты, значения атрибутов и т. д.). Этот код генерирует список всех элементов `‹p›`, которые имеют атрибут class="intro".

```javascript
var x = document.querySelectorAll(‘p.intro’);
```

В Internet Explorer 8 и предыдущих версиях метод querySelectorAll() не работает.

Элементы HTML можно найти с помощью коллекций объектов HTML

В этом примере в коллекции форм выполняется поиск элемента формы с id=”frm1 и отображаются все его значения:

```javascript
var x = document.forms[‘frm1’];
var text = ‘’;
var i;
for (i = 0; i < x.length; i++) {
text += x.elements[i].value + ‘<br>’;
}
document.getElementById(‘demo’).innerHTML = text;
```