javascript - Javascript 对象列表返回 null 或未定义但不是

Question

我有以下，

HTML,

<div id="testDiv" name="testHolder">
    Test Content
</div>

JS,

var testVar = document.getElementsByName('testHolder');
console.log(testVar);

我得到，

[object NodeList] 
[item: function]

好的，让我再解释一下，

var testVar = document.getElementById('testDiv');
console.log(testVar);

返回，

空值

因此，如果向其添加索引 [0]，则无法读取 null 的属性 [0] ...为什么？

我想在 div 中获取字符串“测试内容”。

更新，

在使用 getElementsByName 时从 console.log 中看到此对象属性，

innerHTML: "↵               Test Content↵             "
innerText: "Test Content"

为什么不能隔离这个？

Answer 1

document.getElementsByTagName返回与作为参数提供给函数的标记相对应的元素数组。代码输出undefined到控制台，因为testDiv它不是 HTML 标记。使用getElementsByTagName脚本时，根据标签的名称（认为类型）获取元素，因此名称如 div、span、ul、li、input 等。

例如，document.getElementByTagName("div")将返回div页面上的所有元素。它不检查标签上的 name 属性并返回相应的元素。

以下是一些示例来演示这些方法的正确用法，它们依赖于您提供的 HTML：

//Retrieves Element By ID
var element = document.getElementById("testDiv");
alert("By Id: " + element.innerHTML);

//Retrieves By Tag
var element2 = document.getElementsByTagName("div");
//Remember this is an array we must specify an index
alert("By Tag Name: " + element2[0].innerHTML);

var doesntWork = document.getElementsByTagName("testHolder");
alert("By Tag Name: " + doesntWork[0].innerHTML);//Won't work

演示：http: //jsfiddle.net/TEJKB/

确保在 DOM 加载后执行此脚本。对于一个简单的测试，将此脚本放在页面底部。如果可行，那么您需要向事件添加事件处理程序window.onload。

Answer 2

您应该使用函数getElementsByName来获得正确答案。

getElementsByName和getElementsByTagName都返回一个nodelist，因此您需要进一步检查结果并获取例如第一项：

var testVar = document.getElementsByName('testHolder');
if( testVar.length > 0 )
    alert( testVar[0].innerHTML );

Answer 3

getElement(s) 总是返回数组对象。你添加索引号getElementsByTagName('testHolder')[0]。例如

var testVar = document.getElementsByTagName('testHolder')[0].innerHTML;
console.log(testVar);

Answer 4

var testVar = document.getElementById('testDiv');
console.log(testVar.innerHTML);

或者

var testVar = document.getElementById('testDiv').innerHTML;
console.log(testVar);

应该管用...