Основы JavaScript учебник

JavaScript объекты

JavaScript функции

JS HTML DOM

JS браузер BOM

Основы AJAX учебник

JavaScript справочник

Изменение HTML-контента с помощью JS DOM Методы JS HTML DOM

Выборщики JS HTML DOM

JavaScript наиболее часто используется для получения или изменения содержимого или значения HTML элементов, а также для применения некоторых эффектов.

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

Найти HTML элемент по ID
Найти HTML элементы по имени тега
通过类名称查找HTML元素
Найти HTML элементы через CSS селекторы
Найти HTML элементы через HTML объектные коллекции

Найти HTML элемент по ID

Вы можете использоватьgetElementById()Метод выбирает элемент по уникальному ID.

Это один из самых простых способов найти HTML элемент в DOM дереве.

В следующем примере выбран один элемент с атрибутом IDid="msg"элементы:

Пример

var x = document.getElementById("msg");

Проверьте, как работает‹/›

Если элемент найден, то этот метод возвращает элемент в виде объекта.

Если элемент не найден, то myElement будет содержать null.

Найти HTML элементы по имени тега

Вы также можете использоватьgetElementsByTagName()Метод выбирает HTML элементы по имени тега.

Этот метод возвращает список аналогичный массиву всех элементов документа с указанным именем тега.

В этом примере выбраны все<p>Элементы:

Пример

var x = document.getElementsByTagName("p");

Проверьте, как работает‹/›

Изменить цвет фона всех элементов абзацев в документе:

Пример

var x = document.getElementsByTagName("p");
for(let i = 0; i < x.length; i++) {
　　　x[i].style.backgroundColor = "coral";
}

Проверьте, как работает‹/›

В этом примере выбраноid="wrapper"элементов, затем выбрать“wrapper”всех<p>Элементы:

Пример

var x = document.getElementById("wrapper");
var y = x.getElementsByTagName("p");

Проверьте, как работает‹/›

通过类名称查找HTML元素

Вы можете использовать этотНайти HTML элементы через классовое имяgetElementsByClassName()

Метод для выбора всех элементов с определенным классом.

Этот метод возвращает список всех элементов с заданным классом в документе, подобный массиву.Этот пример возвращает все элементы сСписок элементов:

Пример

class="demo"

Проверьте, как работает‹/›

Найти HTML элементы через CSS селекторы

Вы можете использовать этотquerySelectorAll()Метод для выбора элементов, соответствующих заданному CSS селектору (ID, класс, тип и т.д.).

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

CSS селекторы представляют собой очень мощный и эффективный метод выбора HTML элементов в документе.

Пример

var x = document.querySelectorAll("div");

Проверьте, как работает‹/›

Этот пример возвращает элементы с" note"в документе класса<div>Список элементов:

Пример

var x = document.querySelectorAll("div.note");

Проверьте, как работает‹/›

Найти HTML элементы через HTML объектные коллекции

Элементы, которые являются верхними в HTML-документе,可以直接 использоваться в качестве свойств документа.

Например, можно использовать атрибуты для доступа<html>Элементdocument.documentElement.

упомянутыеКомпонент может быть доступенdocument.bodyатрибутов.

Пример

var html = document.documentElement;
var body = document.body;

Проверьте, как работает‹/›

Обратите внимание:еслиdocument.bodyвдо тегаВнутри <head>), он вернет null вместо элемента body.

Можете также доступ к следующим HTML объектам (и объектным коллекциям):

Атрибуты	Описание
document.anchors	Возвращает все элементы с атрибутом имён<a>Элемент
document.applets	Вернуть все<applet>Элемент(В HTML5 устарел)
document.baseURI	Возвращает абсолютный базовый URI документа
document.body	ВернутьЭлемент
document.cookie	Возвращает cookie документа
document.doctype	Возвращает тип документа
document.documentElement	Вернуть<html>Элемент
document.documentMode	Возвращает режим, используемый браузером
document.documentURI	Возвращает URI документа
document.domain	Вернуть домен сервера документа
document.domConfig	Устарело;Вернуть конфигурацию DOM
document.embeds	Вернуть все<embed>Элемент
document.forms	Вернуть все<form>Элемент
document.head	Вернуть<head>Элемент
document.images	Вернуть все<img>Элемент
document.implementation	Вернуть реализацию DOM
document.inputEncoding	Вернуть кодировку документа (charset)
document.lastModified	Вернуть дату и время обновления документа
document.links	Вернуть все с атрибутом href<area>и<a>Элемент
document.readyState	Вернуть состояние документа (загрузка)
document.referrer	Вернуть URI ссылочного документа
document.scripts	Вернуть все<script>Элемент
document.strictErrorChecking	Вернуть, выполняется ли принудительная проверка ошибок
document.title	Вернуть<title>Элемент
document.URL	Вернуть полный URL документа

Изменение HTML-контента с помощью JS DOM Методы JS HTML DOM