javascript - 一起使用 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];

Updated Fiddle

如果您正在寻找 jQuery 解决方案，您可以使用 .data() :

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

Updated Fiddle