javascript - 试图在 JavaScript 中获取节点的值，但它一直说它是 "null"

Question

我目前正在尝试从 HTML 元素创建列表。我的目标是在您单击表格上的“下一页”按钮时创建表格中所有值的列表。然后我弹出一个警报，告诉我列表中第一个 项的值(应该是表中第一行的值)。但是，它总是返回“null”。

这是我的 JS

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = document.getElementsByClassName('box-electrode');
    alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers.item(0).nodeValue);
});

这是我定位的表格行中的 HTML 示例

<a href="#" class="box-electrode" value="56" title="Pack this electrode">
    <i class="fa fa-gift fa-fw text-warning"></i>
</a>

目前该表有大约 15 个项目(其他地方有代码从数据库创建该表)，并且警报正确显示 $allSerialNumbers.length是 15。但是，它表示 nodeValue第一项是 null，而在本例中它实际上应该是“56”。 (在实际表中，所有值都不同)。

我是不是用错了 JavaScript 的节点？

Answer 1

首先，如果您使用的是 jQuery，则不需要使用 document.getElementsByClassName (普通 JS 选择器)。

您可以使用 $('.box-electrode') 选择您的元素.

另一件事: anchor ( <a> ) 元素没有 value属性。如果您尝试使用 jQuery 的 .val() 获取它，要么，你不会得到它，因为它不在规范中。

如果要设置自定义属性，可以使用data-属性。像这样:

<a href="#" class="box-electrode" data-value="56" title="Pack this electrode">
    <i class="fa fa-gift fa-fw text-warning"></i>
</a>

jQuery 解决方案:

$(document).on('click', ".page-link", function (e) {
    var $allSerialNumbers = $('.box-electrode');
    alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers.first().attr('data-value'));
});

• .first()获取 jQuery 对象中的第一个元素。
• .attr()获取指定节点属性的值。

普通 JS:

document.getElementsByClassName("page-link")[0].addEventListener("click", function () {
    var $allSerialNumbers = document.getElementsByClassName('box-electrode');

    alert(
    'The first in the list of ' + $allSerialNumbers.length + ' items is' +
    ' data-value: ' + $allSerialNumbers[0].getAttribute('data-value') +
    ', title: ' + $allSerialNumbers[0].title
  );
});