JavaScript元素/標籤陣列DOM節點訪問

Question

什麼是使用之間的不同：

// assuming using elements/tags 'span' creates an array and want to access its first node 

1) var arrayAccess = document.getElementsByTagName('elementName')[0]; // also tried property items() 

VS

// assuming I assign an id value to the first span element/tag 
// specifically calling a node by using it's id value  

2) var idAccess = document.getElementById('idValue'); 

---

那麼如果我想改變文本節點....當使用示例1）時，它將不起作用，例如：

arrayAccess.firstChild.nodeValue = 'some text'; 

或

arrayAccess.innerText/innerHTML/textContent = 'some text'; 

如果我的「訪問」，通過其id值的節點，然後它似乎很好地工作....

爲什麼是它使用數組時它不工作？我是JavaScript新手，我正在閱讀的書沒有提供答案。

Answer 1

兩者都是工作，

在你的第一個情況下，你需要通過標籤名稱，而不是元素名稱。那麼只有它會起作用。

有可能是您嘗試使用innerHTML設置輸入/表單元素的情況。那時你需要使用.value而不是innerHTML。 InnerHTML應該用於div，span，td和類似的元素。

所以，你的HTML標記例如：

<div class="test">test</div> 
<div class="test">test1</div> 
<span id="test">test2</span> 

<button id="abc" onclick="renderEle();">Change Text</button> 

你的JS代碼：

function renderEle() { 
    var arrayAccess = document.getElementsByTagName('div')[0]; 
    arrayAccess.innerHTML = "changed Text"; 
    var idEle = document.getElementById('test'); 
    idEle.innerHTML = "changed this one as well"; 
} 

Working Fiddle

Answer 2

當您使用document.getElementsByTagName（ 'P'），瀏覽器遍歷渲染DOM樹並返回具有匹配標記的所有元素的節點列表（數組）。

當您使用document.getElementById（'something'）時，瀏覽器遍歷呈現的DOM樹，並返回與該ID匹配的單個節點（因爲html ID是唯一的）。

使用哪個有很多不同之處，但其中一個主要因素是速度（getElementById因爲您只搜索1個項目而快得多）。

爲了解決您的其他問題，你已經指定要在返回的節點列表的第一個元素在你的函數調用（索引[0]）：

var arrayAccess = document.getElementsByTagName('elementName')[0]; 

因此，ArrayAccess接口已被設置爲返回查詢中的第一個元素。您應該可以通過以下方式訪問文本。如果您使用文檔，相同的代碼應該可以工作。的getElementById獲取DOM元素：

console.log(arrayAccess.textContent); 

下面是用一個例子小提琴：

http://jsfiddle.net/qoe30w2w/

希望這有助於！