getElementById函數內部的東西，但從外部

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或任何其他屬性。你需要一個這樣的元素，所以即使你執行該函數，你仍然會得到空值。同樣創建一個節點不會附加到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);