Question

我有一个滑块，在滑动时我试图获取居中元素的属性值。我的js似乎不起作用。

＆＃13;

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

＆＃13;

<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>

＆＃13;

Answer 1

以下children似乎更多属性而不是方法：

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

因此您无法将其用作方法。

除此之外不是attr - 你可以使用ex：

domElement.getAttribute("class")

Answer 2

.children是一个只读属性，它返回Node的子元素的实时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。

参考：ParentNode.Children from MDN

通过父类名获取属性值

2 个答案: