Question

我正在通过如何正确学习Javascript 并在O'Reilly的 Javascript the Definitive Guide 6th ed。

中找到了这个有趣的代码示例。

更新：提出问题的更好方法 - getElementById()返回的元素是什么？首先，它看起来像是目标<div>中的文字，但在其他时候它看起来像[object HTMLDivElement]。 elements对象实际上是什么？

HTML：

<div id="id1">some text id1</div>
<div id="id2">some text id2</div>

JS：

function getElements( /*ids...*/ ) {
    var elements = {};
    for (var i = 0; i < arguments.length; i++) {
        var id = arguments[i];
        var elt = document.getElementById(id);
        if (elt == null) {
            throw new Error("No element here");
        }
        elements[id] = elt;
    }
    //alert(Array.isArray(elements)); //false
    return elements;
}

var elements = getElements("id1",  "id2");
//alert(Array.isArray(elements)); //false
//alert(elements[0]); //undefined
alert(elements["id1"]); //[object HTMLDivElement]

代码会在JSFiddle's Results pane的不同行中输出some text id1和some text id2，因此它似乎正在运作。

我想知道对象elements中的内容。

您可以看到我尝试过的各种alert()，以便在上面的评论中找到答案。

我认为elements是一个对象，其关键字是我正在寻找的ID（所以，id1和id2），其值是<div>中的文本s，但是当我在最后一行alert(elements["id1"]);时，我得到了一个奇怪的输出：[object HTMLDivElement]。我以为它会输出some text id1。

既然没有，JSFiddle如何知道在结果窗格中输出some text id1？

Answer 1

document.getElementById返回一个对象，如果没有给定id的元素，则为null，否则返回该元素。

该对象是什么样的？

嗯，这是这些构造函数的一个实例：

根据元素，它也是HTMLDivElement，HTMLUnknownElement等的实例。

为什么会得到"[object HTMLDivElement]"？

当您尝试将对象用作文本时（例如，使用alert时），将调用其toString方法。当在"[object HTMLDivElement]"元素上调用时，此方法返回字符串<div>。

如果您想获得更多有用的数据，您应该使用console.log，然后您就可以检查其属性。

如何获取元素的文本？

您可以使用

textContent
innerText，仅限某些浏览器，非标准
innerHTML，假设元素只包含文本，而不包含其他元素。
firstChild . nodeValue，假设元素只包含文本节点。

Answer 2

更新：感谢@ Dr.Molle指出这个答案中的最后一段是铺位。虽然上面的内容是正确的，但结果窗格显示<div>块内的文本的原因是因为格式化HTML的样子，不是因为javascript做了任何修改该文件。阅读这篇文章仍然是一个好主意，看看一个不了解某事的人如何能够研究一个看似合理的答案。该技能与SO的良好反馈相结合，有助于每个人取得进步。

getElementById()返回Element类型的对象。因此，当您尝试alert(elements["id1"])时，您会得到[object HTMLDivElement]作为输出，因为alert()在幕后调用.toString()。返回值为[object HTMLDivElement]，因为该项是引用类型为HTMLDivElement的对象。

如果您尝试过此行alert(elements["id1"].outerHTML);，那么您将获得

<div id = "id1">
    some text id1
</div>

这是因为<div id = "id1">是一个元素，而Element.outerHTML是Element对象的属性。

但是，如果你尝试过这一行alert(elements["id1"].textContent);，你会得到some text id1。这是因为<div id = "id1">继承了the Node object type的方法和属性。

那么代码中发生了什么？ getElements()函数返回一个变量elements，它实际上是一个对象的对象。如您所知，对象只是<key, value>对的集合。 <key>这里是您传递给getElements()的HTML ID。值是其他对象，，即Element返回的getElementById()类型的对象。

当getElements()返回elements时，将评估返回的对象，以便在后台调用.textContent来准备输出，这就是您在JSFiddle的“结果”窗格中看到的内容。这也是尝试alert(elements["id1"])无效的原因，因为它调用了.toString()而不是.textContent。

getElementByID在这里输出什么样的对象？

2 个答案: