親クラス名で属性値を取得する

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はelementNodeReferenceの子であるDOM要素の順序付きコレクションですHTMLCollection、です。どの要素の子が存在しない場合は、elList要素が含まれていないと0

リファレンスの長さがあります（） `、` `）（上ParentNode.Children from MDN