试图在 JavaScript 中获取节点的值，但它一直说它是“null”答案

【问题标题】：Trying to get the value of a node in JavaScript, but it keeps saying it's "null"试图在 JavaScript 中获取节点的值，但它一直说它是“null”
【发布时间】：2017-02-10 01:00:01
【问题描述】：

我目前正在尝试从 HTML 元素创建列表。我的目标是在您单击表格上的“下一页”按钮时创建表格中所有值的列表。然后我会弹出一个警报，告诉我列表中 first 项的值（应该是表中第一行的值）。但是，它总是返回“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 的节点错误？

【问题讨论】：

标签： javascript jquery html list nodes

【解决方案1】：

首先，就像你使用 jQuery 一样，你不需要使用document.getElementsByClassName（vanilla 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
  );
});

【讨论】：

【解决方案2】：

首先，以 $ 开头的变量按惯例用于 jquery 对象。 $allSerialNumbers 是一个节点元素，而不是一个 jquery 对象。

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

【讨论】：

【解决方案3】：

如果您已经在使用 jquery，为什么不这样做：

var $allSerialNumbers = $('.box-electrode');

alert('The first in the list of ' + $allSerialNumbers.length + ' items is ' + $allSerialNumbers[0]);

【讨论】：

【解决方案4】：

这应该可行。

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

【讨论】：

【解决方案5】：

您也可以只使用属性来获取属性“值”，然后使用 .value 访问它的值，如下所示：

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

由于你使用的是jquery，所以不需要做.getElements..

如果您想尝试使用相同示例的其他选项，这里有一个可用的提琴手：https://jsfiddle.net/spilafis/ufp4bz80/10

【讨论】：