javascript - 使用 JavaScript 操作对 DOM 元素的引用

Question

我正在开发的一个项目必须使用 JavaScript 来操作 DOM 元素。当特定事件触发时，我会循环遍历 DOM，并基本上创建所有节点的索引，以便稍后操作它们。我创建这个索引的原因还有很多，但为了简单起见，我在这里简化了它。

然而问题是，当我们去操作 DOM 中的元素时，它似乎操作的是一个单独的对象，而不是 DOM 中的实际对象。这是我能想到的最基本的示例:

<div id="container">
    <div>Here is some text</div>
    <div>And here is some more text</div>
</div>

<script>
    var container = document.getElementById('container');
    container.firstChild.innerHTML = 'Foobar';
</script>

fiddle :http://jsfiddle.net/4Nngh/

但第一个 div 从未更改为“Foobar”。 我猜当我得到“容器”元素时，我实际上得到的是一个单独的对象，而不是对 DOM 元素的引用。

是否可以简单地引用 DOM 中显示的元素并直接操作它，或者我是否必须使用某种类型的替换方法？其他事件可能会在脚本运行时更改该 DOM 元素的内容，因此我试图避免每次事件触发时都必须重新创建此索引，这就是为什么我正在寻找对元素以某种方式。

谢谢!

Answer 1

firstChild 实际上是包含换行符-制表符组合的文本节点。

要获取第一个元素子元素，请使用children[0]。 children[] 数组仅包含元素节点。