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()

对比

// 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 已设置为返回查询中的第一个元素。您应该可以通过以下方式访问文本。如果您使用 document.getElementById 来获取 DOM 元素，则相同的代码应该可以工作：

console.log(arrayAccess.textContent);

这里有一个例子：

http://jsfiddle.net/qoe30w2w/

希望这会有所帮助！