Question

我一直在学习关于函数，返回，id和所有内容的非常简单的事情，所以我遇到了另一个看似简单的问题，但我无法理解它为什么会发生。检查此代码：

function test() {
    var text = document.createTextNode("Hello");
    text.id = "t";
    }


var whatIjustwrote = window.document.getElementById("t");
alert(whatIjustwrote);

getElementById是否有限制只查找全局项目？将警报输出到函数内的文本节点的方法是什么？

感谢您的任何评论。过去几天在这里问问我已经学到了很多东西！

JSFiddle

Answer 1

首先，getElementById只会返回元素，而您正在创建一个文本节点。

其次，它只返回已添加到DOM的元素。您创建的节点不会添加到DOM中，因此即使它可能也不会找到它。

最后，您实际上并没有调用test函数，因此甚至没有在内存中创建文本节点。

以下updated fiddle演示了getElementById实际工作：

function test() {
    var text = document.createElement("span"); //Create an element
    text.innerHTML = "Hello";
    text.id = "t";
    document.body.appendChild(text); //Add it to the DOM
}

test(); //Invoke the function (so the element actually gets created)
var yourElement = document.getElementById("t"); //Get reference to element

Answer 2

getElementById仅搜索元素节点。您确实创建了一个文本节点，它既没有属性也没有id - 您只是向JS对象添加了一个自定义属性。此外，您没有将节点附加到文档中，因此无法在DOM树中找到它。

您可能想要阅读an introduction to the DOM (at MDN)，introduction at quirksmode.org甚至W3 standard itself（尤其是introduction section）

function test() {
    var elem = document.createElement("span"); // Create an element
    var text = document.createTextNode("Hello"); // Create a textnode
    elem.appendChild(text); // add text to the element
    elem.id = "t"; // assign id to the element
    document.body.appendChild(elem); // Add it to the DOM
}
test();

var yourElement = document.getElementById("t"); // Get the element from the DOM
alert(yourElement.textContent); // alerts "Hello"
// you also could have alerted yourElement.firstChild.data - the content of the 
// textnode, but only if you had known that yourelement really has a firstchild

（Demo at jsfiddle.net）

Answer 3

getElementById是否有限制只查找全局项目

答案是否定的。首先，您必须定义全局项目。附加到DOM的任何东西实际上都是全局的，就全局javascript对象而言，在浏览器的情况下只有一个窗口。你正在创建一个函数，但你永远不会执行它。

此外，文本节点实际上不能具有id或任何其他属性。你需要一个元素，所以即使你执行该函数，你仍然会得到null。另外创建节点不会附加到DOM，因此即使这不是文本节点，您也无法访问它。

我已更新了您的fiddle。

Answer 4

想到了几点......

1）你不能给textNode一个id属性（你实际上给它一个名为id的新成员变量） 2）要查找元素，它必须存在于文档的DOM

中

请改为：

var mSpan = document.createElement('span');
mSpan.id = 't';
mSpan.appendChild( document.createTextNode('Hello') );
document.body.appendChild(mSpan);

var whatIjustwrote = window.document.getElementById("t");
alert(whatIjustwrote.innerText);

getElementById函数内部的东西，但来自外部

4 个答案: