getElementsByName returns Javascript 加载处理程序中的零长度

Question

这个问题是关于HTML的纯JavaScript（没有jQuery或进一步的技术）。

我尝试手动编写一个文件，其中包含应显示为链接的 URL 列表。为了减少输入并避免不一致，我想使用 JavaScript 获取 li 元素的列表并将其转换为包含适当 a 元素的 li 元素，其 URL 为 href 并作为文本。

朝着这个方向努力，我得到了以下代码，有点浓缩（没有 a 元素）以显示手头的问题：

<?xml version="1.0" encoding="UTF-8"?>
<html>
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8" />
</head>
<body onload="linkify()">
<ul>
    <li href=" />
    <li href=" />
    <li href=" />
</ul>
<script>
function linkify () {
    let items = document.getElementsByName( "li" );
    for ( let i = 0; i < items.length; ++i ) {
        item = items.item( i );
        item.innerHTML = item.getAttribute( "href" );
    }
}
</script>
</body>
</html>

我希望页面显示 URL 列表。但是，该列表仍然是三个空列表项，没有 URL。调试器告诉我 let items = document.getElementsByName( "li" ); 得到一个 0 items.length 对象，因此 for 循环不做任何事情。

我希望 linkify() 仅在加载整个 DOM 时调用，因此应该找到所有三个 li 元素。我的错误在哪里？

Answer 1

作为替代方案，您可以尝试标签名称：

let items = document.getElementsByTagName("li");

Answer 2

只是getElementsByName()方法不对

returns a NodeList Collection of elements with a given name attribute in the document.(https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementsByName)

这里你的标签中没有名称属性（li 标签甚至不接受名称属性）

你真正需要的是 getElementsByTagName('li') 方法 (https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName)

或者 querySelectorAll('li') 方法 (https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelectorAll)

前者给你一个live节点合集，后者给你一个not-live节点合集

getElementsByName returns Javascript 加载处理程序中的零长度

getElementsByName returns zero length in Javascript onload handler

javascript

getelementsbyname