Javascript: Как получить только один элемент по имени класса?

Ответ 1

document.getElementsByClassName('className') всегда возвращает несколько элементов, потому что концептуально Классы предназначены для применения к нескольким элементам. Если вам нужен только первый элемент в DOM с этим классом, вы можете выбрать первый элемент из возвращаемого массива.

var elements = document.getElementsByClassName('className');
var requiredElement = elements[0];

Иначе, если вы действительно хотите выбрать только один элемент. Затем вам нужно использовать "id", поскольку концептуально он используется как идентификатор уникальных элементов на веб-странице.

// HTML
<div id="myElement"></div>

// JS
var requiredElement = document.getElementById('myElement');

Ответ 2

Пояснения:

1. getElementsByClassName возвращает список узлов, а не массив

2. Вам не нужен JQuery

3. Вероятно, вы искали document.querySelector:

Как получить только один элемент DOM по имени класса?

var firstElementWithClass = document.querySelector('.myclass');

см. также https://developer.mozilla.org/en/docs/Web/API/Document/querySelector

Ответ 3

Вы можете использовать jQuery:

$('.className').eq(index)

Или вы можете использовать встроенный метод javascript:

var elements = document.getElementsByClassName('className');

Это возвращает nodeList элементов, которые вы можете выполнять и делать то, что хотите.

Если вы хотите только один, вы можете получить доступ к элементам в версии javascript следующим образом:

elements[index]

Ответ 4

Для тех, кто ищет один лайнер

var first = getElementsByClassName('test')[0];

Ответ 5

Вы можете сделать как ниже, используя querySelector

var firstElementWithClass = document.querySelector('.myclass');

Ответ 6

Используйте NodeList.item().

Например:

var first = getElementsByClassName('test').item(0);