Получение значения атрибута по имени родительского класса

Question

У меня есть слайдер, а при ударе я пытаюсь получить значение атрибута центрированного элемента. мой js, похоже, не работает.

owl.on('changed.owl.carousel', function(event) { 
 
    var a = document.getElementsByClassName("owl-item active center").children("item").attr("data-price"); 
 
    console.log(a); 
 
});

<div class="owl-item active center" style="width: 340px; margin-right: 0px;"> 
 
    <div class="item" data-price="200" data-name="Car 2" data-color="Green"> 
 
    </div> 
 
</div>

Answer 1

Похоже, что ниже children является больше имущества, чем метод:

document.getElementsByClassName("owl-item active center")[0].children 

, следовательно, вы не можете использовать его в качестве метода.

Кроме того, что это не такая вещь, как attr - вы можете использовать для экс:

domElement.getAttribute("class") 

Answer 2

.children является свойство только для чтения, которое возвращает живой HTMLCollection из дочерних элементов узла.

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

Пример кода:

// pEl is a reference to a <p> element 
var elementChildren = pEl.children; 
for (var i = 0; i < elementChildren.length; i++) { 
    console.log(elementChildren[i].tagName); 
    // NOTE: elementChildren is a live list, adding or removing children from pEl 
    // will change the members of elementChildren immediately 
} 

pEl.children является HTMLCollection, который представляет собой упорядоченный набор элементов DOM, которые являются потомками elementNodeReference. Если нет дочерних элементов, то elList не содержит элементов и имеет длину 0.

Reference: ParentNode.Children from MDN