Question

我正在使用HTML，CSS，jQuery和JavaScript，所有这些都在一个HTML页面上。通常，我试图首次弄清楚如何从HTML主体访问信息以便在我的JavaScript代码中使用。

我想在JavaScript中设置一个等于我的<div>个元素的data属性中包含的字符串的变量。

我可以在JavaScript中使用document.getElementsByClassName()[]来实际从HTML文档中提取信息吗？在W3schools和其他地方的例子中，我只看到它用于更改某些HTML元素的值，而不是实际使用它的输入。在这里，我有什么更基本的东西吗？

____这里是我更具体的代码（其中div.onlyOne是该类的唯一div，并且具有数据需要属性＆＃34;我需要的字符串＆＃34;）：

var myVar = document.getElementsByClassName("onlyOne")[0].getAttribute("data-need")

为什么这不会存储＆＃34;我需要的字符串＆＃34;进入myVar？

Answer 1

但是可以确保在标记或DOM加载后运行脚本，否则脚本将找不到尚未加载的元素。

标记后

<!DOCTYPE html>
<html>
<head>
    <style>
    </style>
    <script>
        document.addEventListener("DOMContentLoaded", function(event) {
            var myVar = document.getElementsByClassName("onlyOne")[0].getAttribute("data-need");
            alert(myVar);
        });
    </script>
</head>
<body>
    <div class="onlyOne" data-need="hey there"></div>
</body>
</html>

DOM加载

document.querySelector('.onlyOne')

我建议您将来使用pow。有了它，您可以更有效地缩小结果列表的范围。

Src：https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Answer 2

<div class="onlyOne" data-need="some text">...</div>

var myVar = document.getElementsByClassName("onlyOne")[0].getAttribute("data-need");
alert(myVar);

https://jsfiddle.net/howa6w1o/

Answer 3

因为您使用的是jQuery，所以您可以简化代码以获取data-attribute的内容：如下所示：

$(document).ready(function(){
 var myVar = $(".onlyOne").eq(0).data("need");
})

.getElementsByClassName（）[] - 我不理解的是什么？

3 个答案: