JavaScript长度未定义或为零

Question

我正在尝试编写一个Javascript函数，该函数返回给定名称的单个元素。我发现了this问题，并修改了答案以使用三元运算符。

function getField(fieldName)
{
    var elements = document.getElementsByName(fieldName);

    return elements.length && elements.legth > 0 ? elements[0] : null;
}

我的问题是关于document.getElementsByName(fieldName)找不到任何匹配项的情况。它返回undefined还是0吗？当我输出elements.length作为警报消息时，警报中的值为0，但控制台Chrome的DevTools表示undefined。当我从控制台调用console.log(elements.length)时，它会输出0 和 undefined。

我知道我的函数可以处理任何一种情况，但是我在这里遗漏了什么？ Javascript实际在做什么？

预先感谢您帮助我理解这一点。

编辑：很抱歉，您发布图片而不是实际代码，并感谢语法说明。

Answer 1

elements.length在您的情况下等于0。

您对console.log的理解具有误导性：

console.log(elements.length);
> elements.length is printed. It evaluates to 0, so 0 is printed
> console.log(elements.length). It evaluates to undefined, so undefined is printed.

Answer 2

由于您的问题似乎是找不到document.getElementsByName时返回的内容，因此它将是一个空的NodeList，长度为0（因此未定义）

因此，最简单的方法是dandavis在他的评论中建议的只是返回节点列表的第一个元素。如果为空，它将是不确定的，否则将是第一个元素（不确定是否总是与您的情况匹配）

所以您的功能也应该是

function getFieldAt(fieldName, index = 0) {
  return document.getElementsByName(fieldName)[index];
}

如果不使用可选参数，则可以将其更改为

function getFieldAt(fieldName, index) {
  return document.getElementsByName(fieldName)[index || 0];
}

您对devtools的误解在注释和其他答案中也得到了充分说明：）

Answer 3

无需测试长度值，只需使用：

function getField(fieldName)
{
  let elements = document.getElementsByName(fieldName);
  return (elements[0]) ? elements[0] : null;
}

console.log( getField('div-A') );
console.log( getField('neverExist') );

<div name="div-A"> div-A 1 </div>
<div name="div-A"> div-A 2 </div>
<div name="div-A"> div-A 3 </div>