Question

让我保持简单。 Scrollit.js，您在导航链接上设置数据滚动属性，以及您希望滚动到的内容的数据索引。

您不需要在任何一件事物上设置特定ID以使其正常工作。那么为什么当我阅读有关使用数据属性的内容时，JS总是以getelementbyID（＃..）开头？

我希望整合一个使用它的微框架。

Answer 1

访问DOM元素有几种方法。

$x()将允许您捕获具有给定xPath表达式的节点。

querySelector还可以让你实现相同的结果（在firefox控制台中键入help()，它会带你到web帮助页面。）

我喜欢querySelectors，所以我会使用它们。

var changes_indexes_to_cubes = function() {
  var indexed = document.querySelectorAll("[data-index]");
  for(var i=0; i<indexed.length; i++) {
    indexed[i].innerHTML = parseInt(i)**3;
  }
}


document.querySelector("[data-foo]").addEventListener('click', changes_indexes_to_cubes)

<!DOCTYPE html>
<html>
<head>
  <title></title>
</head>
<body>
  <div>
    <span class="lorem" data-index="1">0</span>
    <span class="lorem" data-index="2">1</span>
    <span class="lorem" data-index="3">2</span>
    <span class="lorem" data-index="4">3</span>
    <span class="lorem" data-index="5">4</span>
    <span class="lorem" data-index="6">5</span>
    <span class="lorem" data-index="7">6</span>
    <span class="lorem" data-index="8">7</span>
    <span class="lorem" data-index="9">8</span>    
    <span class="lorem" data-index="10">9</span>
    <p class="Lorem" data-foo="foo">Click me to change everything</p>  
  </div>
</body>
</html>

使用JS访问HTML数据属性，不使用.getelementbyid？

1 个答案: