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);

RETURNS，

空

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

我想在div中获取字符串“Test Content”。

UPDATE，

使用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总是返回数组对象。您要添加索引号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);

应该工作......

Javascript对象列表返回null或undefined但不是

4 个答案: