通过父类名称获取属性值

Question

I have a slider, and on swipe I am trying to get the attribute value of the centered element. my js doesn't seem to work.

 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

It seems that the below children is more of a property than a method:

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

hence you cannot use it as a method.

Besides that there's not such thing as attr - you can use for ex:

domElement.getAttribute("class")

Answer 2

.children is a read-only property that returns a live HTMLCollection of the child elements of Node.

so in order to select the element with specific class you need to verify every single child node and then return attribute of that child node.

Sample Code:

// 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 is a HTMLCollection, which is an ordered collection of DOM elements that are children of elementNodeReference. If there are no element children, then elList contains no elements and has a length of 0.

Reference : ParentNode.Children from MDN