一起使用getElementById和getElementsByTagName

Question

我有看起来像这样的代码：

<ul id="effects-list" class="effects-list">
    <li data-creative="5">Creative</li>
</ul>

我正在尝试使用以下代码读取以上HTML的数据属性：

var effectData = document.getElementById("effects-list").getElementsByTagName("li");
var creative = effectData.getAttribute('data-creative');
alert(creative)

上面的代码不起作用。它引发以下错误：

effectData.getAttribute is not a function

我在页面上使用jQuery，最初尝试过此操作：

var effectData = $('.effects-list li');

同样，同样的错误。

我有什么问题，如何解决？

这是代码的jsFiddle。

注意：li页面上有更多元素，而我正在读取的数据不仅仅是一个li元素。li如果可以，我会尽量避免在每个元素上添加单独的ID 。

Answer 1

getElementsByTagName（）返回具有给定标签名称的元素列表，因此您需要使用以下命令访问此列表中的元素[]：

var effectData = document.getElementById("effects-list").getElementsByTagName("li")[0];

更新的小提琴

如果您正在寻找jQuery解决方案，则可以使用.data（）：

var creative = $('#effects-list').find('li').data('creative');

更新的小提琴