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>

小提琴：http://jsfiddle.net/4Nngh/

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

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

谢谢！

Answer 1

firstChild实际上是包含newline-tab组合的文本节点。

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

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

1 个答案: