简体繁体 English

获取 javascript 中特定 DOM 元素组的内容列表的最佳方法是什么？

[英]What's the best way to get a list of the contents of a specific group of DOM elements in javascript?

原文 2009-03-04 19:05:13 2 3 javascript/ html/ dom

The basic scenario: I've got a series of elements on an HTML page, generated dynamically.基本场景：我在 HTML 页面上有一系列动态生成的元素。 (Currently, they're all divs , but they don't need to be.) （目前，它们都是divs ，但它们不需要。）

What I want is a javascript function that will loop though all of those divs (or whatever) looking for the presence of a specific value.我想要的是一个 javascript function 它将遍历所有这些divs （或其他）以寻找特定值的存在。

What's the best, most cross-browser way to do this?最好、最跨浏览器的方法是什么？ Does getElementsByName() work on divs in all browsers? getElementsByName() 是否适用于所有浏览器中的divs ？ Can I give them all the same ID and get an array back out of getElementById somehow?我可以给他们所有相同的 ID 并以某种方式从 getElementById 中获取一个数组吗？

If I change those divs to spans or inputs , does that make things easier?如果我将这些divs更改为spans或inputs ，这会让事情变得更容易吗？

Thanks!谢谢！

(edit: it would be best, for this project, if there was a solution without using any external js libraries. I assume jQuery has a function that does just this in one line, but for the moment I'd like to avoid opening that can of worms with the client.) （编辑：最好，对于这个项目，如果有一个不使用任何外部 js 库的解决方案。我假设 jQuery 有一个 function 可以在一行中执行此操作，但目前我想避免打开它一罐蠕虫与客户端。）

3 个解决方案

getElementsByTagName is defined in DOM Core, so any browser which implements that works. getElementsByTagName是在 DOM Core 中定义的，因此任何实现它的浏览器都可以工作。 That's about every browser in current use.这就是当前使用的所有浏览器。

Take a gander over here for the specifics: http://www.quirksmode.org/dom/w3c_core.html看看这里的细节： http://www.quirksmode.org/dom/w3c_core.html

One gotcha to be ware of, is that getElementsByTagName returns a NodeList - not an array.需要注意的一个问题是getElementsByTagName返回一个NodeList - 而不是一个数组。 It works the same, but it is evaluated very late, so if you add/remove nodes to the DOM while traversing a NodeList , you will get weird results.它的工作原理是一样的，但它的评估很晚，所以如果你在遍历NodeList时向 DOM 添加/删除节点，你会得到奇怪的结果。 In these cases, write two loops;在这些情况下，编写两个循环； First loop through the NodeList and store all entries in an array - Then loop through the array.首先循环遍历NodeList并将所有条目存储在数组中 - 然后循环遍历数组。

It doesn't matter what the elements are, but what does matter is where they are in the page.元素是什么并不重要，重要的是它们在页面中的位置。 If they are all child elements of a single parent element, your problem is simple.如果它们都是单个父元素的子元素，那么您的问题很简单。 Give the parent element an ID and you can use getElementById() to grab it and iterate its children.给父元素一个 ID，你可以使用getElementById()来获取它并迭代它的子元素。

getElementById() behavior is undefined when more than one instance of an ID is found in the document.当在文档中找到多个 ID 实例时， getElementById()行为未定义。 Most will return the first Element they can find, but you certainly can't cound on getting an array.大多数会返回他们能找到的第一个元素，但你当然不能指望得到一个数组。

getElementsByTagName() will work only if you can use some obscure tag that you are sure won't appear elsewhere in your page. getElementsByTagName()仅当您可以使用一些您确定不会出现在页面其他位置的晦涩标签时才有效。 You could augment this by specifying that the elements you are interested in will have an attribute present that you can check for (such as @class or @title).您可以通过指定您感兴趣的元素将具有您可以检查的属性（例如@class 或@title）来扩充它。 You can then loop through the result of getElementsByTagName() checking for this and only look at Elements where the attribute is present.然后，您可以循环检查getElementsByTagName()的结果并仅查看存在该属性的元素。

You can use this site to see what getElementBy most suites your needs.您可以使用此站点查看 getElementBy 最适合您的需求。
There are some using libraries and some like troelskn wrote that apply for standard javascript in all supporting browsers.有一些使用库和一些像troelskn写的，在所有支持的浏览器中都适用于标准 javascript。