gpt4 book ai didi

javascript - 使用 JS 访问 HTML 数据属性,而不使用 .getelementbyid?

转载 作者:行者123 更新时间:2023-12-03 04:26:46 24 4
gpt4 key购买 nike

让我保持简单。 Scrollit.js,您在导航链接上设置一个 data-scroll 属性,并在您希望其滚动到的内容处设置一个 data-index 。

您无需为任何一个事物设置特定的 ID 即可使其正常工作。那么为什么当我阅读有关使用 data- 属性时,JS 总是以 getelementbyID(#..) 开头?

我正在寻找一个使用它的微框架。

最佳答案

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

关于javascript - 使用 JS 访问 HTML 数据属性,而不使用 .getelementbyid?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43672657/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com