JavaScript如何将DOM元素存储在变量中？

Question

JavaScript如何将DOM元素存储在变量中？

6

我理解您的意思是JavaScript在处理DOM元素时，会如何存储这些元素，例如：

var foo = document.getElementsByTagName('p');

foo会变成什么？是一个对象数组吗？我如何向该变量添加更多元素，例如：

var bar = document.form[0].getElementsByTagName('input'); // 5 elements
var foo = document.form[1].getElementsByTagName('input'); // 4 elements

bar =+ foo;

for (i=0;i<bar.length;i++){
console.log(bar.value); // 9 logged values
}

如果一个变量中已经有元素，是否可以向其中添加更多相同类型的元素？我需要遍历要添加的变量中的所有元素并将它们“推”到我想要的变量中吗？

- Samuel Lopez

请使用getElementsByTagName()代替getElementsByName()。 - Givi

使用TagName和Name有什么区别？ - Samuel Lopez

1

getElementsByTagName() 方法访问所有具有指定标签名称的元素，而 getElementsByName() 方法访问所有具有指定名称的元素。tagname 是 HTML 元素标签名称，例如 <div> 或 <p>，而 name 是属性，例如 <div name="somename">。 - Givi

3个回答

1

bar =+ foo;

这只适用于字符串连接，正确的写法应该是 bar+= foo

但是这里的 bar 和 foo 都是 DOM 对象。如果要添加相同类型的元素，可以创建一个数组。

e.g.,

var myArray =[]
myArray.push(foo);
myArray.push(bar);

- Gokul Kav

你的示例将创建一个包含两个值的数组，它们都将是NodeLists，而不是元素。它不会合并这两个NodeList。 - Felix Kling

他提到他想要向一个已经有元素的变量中添加元素。 - Gokul Kav

-4

foo成为了函数。因此，您无法将foo添加到bar中，因为这没有意义。这就像尝试执行以下操作：

document.form[0].getElementsByName('input') document.form[1].getElementsByName('input');

你可以在一个数组中拥有多个元素。我认为这是达到你解决方案最简单的方法。

- VinylScratch

5

foo 变成了节点列表而不是函数。 - Givi

我明白了，那么有没有办法将元素存储在变量中，以便稍后可以向变量添加更多元素？像@Givi所说的那样使用TagName会改变什么吗？ - Samuel Lopez

@SamuelLopez Felix Kling 给出了你的问题的完美答案。 - Givi

@Givi 是的，他回答了。我刚刚卷入了另一个任务，没有时间将其选为响应 :s。不过我已经点赞了，而且回答非常完美！ - Samuel Lopez

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Felix Kling · Accepted Answer

getElementsByTagName（以及类似的方法，如getElementsByName，getElementsByClassName等）返回一个NodeList（或HTMLCollection，取决于浏览器，参见HTMLCollection、NodeList和对象数组之间的区别）。虽然它是一个类似于数组的对象，即它具有数值属性和.length属性，但您不能向其中添加新元素。

为了修改NodeList，您必须将其转换为常规数组。这可以通过数组方法.slice轻松实现，并且同时可以使用.concat合并两个列表：

bar = Array.prototype.slice.call(bar).concat(Array.prototype.slice(foo));

这是因为大多数原生数组方法的定义方式使得参数不必是真正的数组，而是类似于数组的对象。

NodeList和最终数组之间的显著差异包括：

数组不再是实时的，即当添加新的DOM节点时，集合不会自动更新。
最终（合并）数组中的元素不一定按文档顺序排列。