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（＆＃39; p＆＃39;）时，浏览器遍历渲染的DOM树并返回具有匹配标记的所有元素的节点列表（数组）。

当您使用document.getElementById（＆＃39; something＆＃39;）时，浏览器遍历呈现的DOM树并返回与ID匹配的单个节点（如果它存在（因为html ID是唯一的））。

使用时有很多不同之处，但一个主要因素是速度（getElementById要快得多，因为你只搜索1个项目）。

要解决您的其他问题，您已经指定了函数调用中返回的nodeList（index [0]）中的第一个元素：

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

因此，arrayAccess已设置为返回查询中的第一个元素。您应该能够通过以下方式访问该文本。如果使用document.getElementById获取DOM元素，则相同的代码应该有效：

console.log(arrayAccess.textContent);

这里有一个例子：

http://jsfiddle.net/qoe30w2w/

希望这有帮助！

javascript元素/标签数组DOM节点访问

2 个答案: