X

Здравствуйте, гость ( Вход | Регистрация )

Скрыть объявления

Объявления

getElementsByClassName(), описание метода и примеры  
 Saveliy
сообщение 28.4.2016, 22:05
Сообщение #226102


Special

Группа: Главные администраторы

Сообщений: 13340
Спасибо сказали: 2064 раза

getElementsByClassName()

Описание

var elements = document.getElementsByClassName(names);
или:
var elements = rootElement.getElementsByClassName(names);

В "elements" будет текущая HTMLCollection найденных елементов.
"names" строка - имя класса, который требуется найти. Имена классов разделяют пробелом.
getElementsByClassName() может быть вызвана для любого элемента, а не только для "document".
Документ, с которого осуществлен вызов, будет выступать в качестве корня (root) для поиска.

Стандартное поведение.

При указании имени классов не нужно ставить впереди имени класса точку.
При указании нескольких классов их разделяют пробелом.
Если указано несколько классов, будут найдены элементы по типу логического И (AND).
При поиске нескольких классов отсутствует возможность поиска по принципу логического ИЛИ (OR).
Поиск производится только по строгому соответствию.

Полезные ссылки

https://developer.mozilla.org/ru/docs/Web/API/HTMLCollection
https://developer.mozilla.org/ru/docs/Web/API/Document/getElementsByClassName
https://dom.spec.whatwg.org/#dom-document-getelementsbyclassname


Примеры

Скопируйте данный код в HTML файл

CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>getElementsByClassName</title>
</head>
<body>

<div id="example">
  <p id="p1" class="aaa bbb"/>
  <p id="p2" class="aaa ccc"/>
  <p id="p3" class="bbb ccc"/>
  <p id="p4" class="ccc"/>
</div>

<script type="text/javascript">
/*
Пример 1
Вернет все элементы, которые содержат указанный класс.
Вернет P1 и P2.
*/

var elems = document.getElementById("example").getElementsByClassName("aaa");


/*
Пример 2
Логическое И (AND).
Вернет элементы, которые содержат одновременно два класса.
Порядок указания классов и пробелов, более одного, не играют роли.
"ccc bbb" или "bbb  ccc " вернет один и тот же результат.
Вернет P3.
*/

// Для теста раскомментируйте строку ниже.
//var elems = document.getElementById("example").getElementsByClassName("ccc  bbb   ");


/*
Пример 3
Ничего не вернет.
*/

//Для теста раскомментируйте строку ниже.
//var elems = document.getElementById("example").getElementsByClassName("aaa, bbb");

console.log(' '); // Очищаем консоль

for( var i=0; i<elems.length; i++ )
{
    if( elems[i].id != "" && elems[i].id !== undefined)
    {
        console.log(elems[i].id); // Выводим найденные элементы в консоль.
    }
}
</script>
</body>
</html>
  Пользователя нет на форуме
 
Ответить
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0
Режим отображения: ·


> Some topics
 
Нет новых сообщений
нужен совет и помощь
Вчера, 11:24
Посл. ответ от peter
Нет новых сообщений
Зеркальное изображение
13.9.2026, 13:27
Посл. ответ от karel_new
Нет новых сообщений
Реально прочитать хоть что-то из нее
11.9.2026, 13:11
Посл. ответ от Дмитрий
Нет новых сообщений
Looking for a dump for a 2025 Toyota Land Cruiser 300 Dash 93C66
10.9.2026, 19:23
Посл. ответ от grafit2003
Нет новых сообщений
Привет всем. По ошибке снёс дамп в машине.
8.9.2026, 10:17
Посл. ответ от mzemcov
  Сейчас: 15.9.2026, 15:42