如何使用 javascript 枚举文档中的所有 html id？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7115022/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How do I enumerate all of the html id's in a document with javascript?
提问by rmmoul
I would like to be able to use javascript to find every id (or name) for every object in an html document so that they can be printed at the bottom of the page.
我希望能够使用 javascript 为 html 文档中的每个对象查找每个 id（或名称），以便它们可以打印在页面底部。
To understand more fully what I'm trying to accomplish, let me explain. I build large forms from time to time for things such as property applications, rental listings, detailed medical website user registration forms and such. As I do it now, I build the form, assign the id's and names and decide which values are required and such. Then when I build the php form validation and database insert portion for the form, I've been manually going through the html and pulling out all of the id's to reference from the $_post array for the input validation and database insert. This has been very time consuming and a real pain, often laced with typing errors.
为了更全面地了解我想要完成的工作，让我解释一下。我不时为诸如房产申请、出租清单、详细的医疗网站用户登记表等内容制作大型表格。正如我现在所做的那样，我构建了表单，分配了 id 和名称，并决定需要哪些值等等。然后，当我为表单构建 php 表单验证和数据库插入部分时，我一直在手动浏览 html 并从 $_post 数组中提取所有 id 以引用输入验证和数据库插入。这非常耗时且非常痛苦，而且常常伴随着打字错误。
The form I'm working on currently is just too big, and I'd much rather write a javascript function that I can run on my local copy of the page to list all of the id's so that I don't have to copy and paste them one by one, or write them down. I could then also use the javascript loop to event print out the php code around the id names so that I'd only have to copy the list and lightly edit out the id's I dodn't need... I hope you guys get the idea.
我目前正在处理的表单太大了，我更愿意编写一个 javascript 函数，我可以在页面的本地副本上运行该函数以列出所有 ID，这样我就不必复制和将它们一一粘贴，或写下来。然后我还可以使用 javascript 循环来事件打印出围绕 id 名称的 php 代码，这样我只需复制列表并轻轻编辑掉我不需要的 id ......我希望你们得到主意。
Any suggestions on how I can drop all of the id's into an array, or if there is already an array I can access and loop through (I couldn't find anything on google). Also, any suggestions for how to speed up the process of producing large forms with a work flow that generates the php or makes it quicker than my current method would be greatly appreciated!
关于如何将所有 id 放入数组的任何建议，或者如果已经有一个数组我可以访问和循环（我在谷歌上找不到任何东西）。此外，对于如何使用生成 php 的工作流或使其比我当前的方法更快的工作流来加速生成大型表单的过程，我们将不胜感激！
回答by Mike Samuel
On modern browsersyou can do this via
在现代浏览器上，您可以通过
document.querySelectorAll('*[id]')
should do the job.
应该做的工作。
If you need all descendants of myElementwith IDs, then do
如果您需要myElementID 的所有后代，那么请执行
myElement.querySelectorAll('*[id]')
If you want to be really careful to exclude <span id="">, then maybe
如果你想非常小心地排除<span id="">，那么也许
document.querySelectorAll('*[id]:not([id=""])')
If compatibility with older browsers is required
如果需要与旧浏览器兼容
var allElements = document.getElementsByTagName("*");
var allIds = [];
for (var i = 0, n = allElements.length; i < n; ++i) {
var el = allElements[i];
if (el.id) { allIds.push(el.id); }
}
should leave you with all the IDs in allIds.
应该给你留下所有的ID allIds。
If you find you need to just enumerate the IDs under a particular form node, then you can replace document.getElementsByTagNamewith myFormNode.getElementsByTagName.
如果您发现只需要枚举特定表单节点下的 ID，则可以替换document.getElementsByTagName为myFormNode.getElementsByTagName.
If you want to include both IDs and NAMEs, then put
如果您想同时包含 ID 和 NAME，则输入
else if (el.name) { allIds.push(el.name); }
below the ifabove.
低于if以上。
回答by user113716
If you're doing your development using a fairly modern browser, you can use querySelectorAll(), then use Array.prototype.forEachto iterate the collection.
如果您使用相当现代的浏览器进行开发querySelectorAll()，则可以使用, then useArray.prototype.forEach来迭代集合。
var ids = document.querySelectorAll('[id]');
Array.prototype.forEach.call( ids, function( el, i ) {
// "el" is your element
console.log( el.id ); // log the ID
});
If you want an Array of IDs, then use Array.prototype.map:
如果您想要一个 ID 数组，请使用Array.prototype.map：
var arr = Array.prototype.map.call( ids, function( el, i ) {
return el.id;
});
回答by Joe
Get all tags with the wildcard:
使用通配符获取所有标签：
var allElements = document.getElementsByTagName('*');
for(var i = 0; i < allElements.length; i++) {
// ensure the element has an Id that is not empty and does exist
// and string other than empty, '', will return true
allElements[i].id && console.log(allElements[i].id);
}
回答by RichieHindle
The jQuery selector $('[id]')will get all the elements with an idattribute:
jQuery 选择器$('[id]')将获取所有具有id属性的元素：
$('[id]').each(function () {
do_something(this.id);
});
Working example here: http://jsfiddle.net/RichieHindle/yzMjJ/2/
这里的工作示例：http: //jsfiddle.net/RichieHindle/yzMjJ/2/
回答by Dementic
well, since it is a form, im sure that you want to iterate only over the form elements and not all the tags in the document ( like href , div's etc.. )
好吧，因为它是一个表单，我确定您只想迭代表单元素而不是文档中的所有标签（如 href 、 div 等...）
for (var i=0; i < form.elements.length; i++) {
var elementId = form.elements[i].id;
}
回答by Russ Cam
with jQuery
使用 jQuery
$('*').map(function() {
return this.id || null;
}).get().join(',');
this gets all the elements in the DOM, and runs a function on each to return the id (and if undefined, returning nullwon't return anything. This returns a jQuery object which is then converted to a JavaScript array with get()and this is then converted to a comma-separated string of ids.
this 获取 DOM 中的所有元素，并在每个元素上运行一个函数以返回 id（如果undefined，返回null将不会返回任何内容。这将返回一个 jQuery 对象，然后将其转换为 JavaScript 数组，get()然后将 this 转换为以逗号分隔的 id 字符串。
Try it on this page and you get
在这个页面上试试，你会得到
"notify-container,overlay-header,custom-header,header,portalLink,topbar,hlinks,hlinks-user,hlinks-nav,hlinks-custom,hsearch,search,hlogo,hmenus,nav-questions,nav-tags,nav-users,nav-badges,nav-unanswered,nav-askquestion,content,question-header,mainbar,question,edit-tags,link-post-7115022,close-question-7115022,flag-post-7115022,comments-7115022,add-comment-7115022,comments-link-7115022,answers,answers-header,tabs,answer-7115033,link-post-7115033,flag-post-7115033,comments-7115033,add-comment-7115033,comments-link-7115033,answer-7115042,link-post-7115042,flag-post-7115042,comments-7115042,add-comment-7115042,comments-link-7115042,answer-7115043,link-post-7115043,delete-post-7115043,flag-post-7115043,post-editor-7115043,wmd-button-bar-7115043,wmd-button-row-7115043,wmd-bold-button-7115043,wmd-italic-button-7115043,wmd-spacer1-7115043,wmd-link-button-7115043,wmd-quote-button-7115043,wmd-code-button-7115043,wmd-image-button-7115043,wmd-spacer2-7115043,wmd-olist-button-7115043,wmd-ulist-button-7115043,wmd-heading-button-7115043,wmd-hr-button-7115043,wmd-spacer3-7115043,wmd-undo-button-7115043,wmd-redo-button-7115043,wmd-help-button-7115043,wmd-input-7115043,draft-saved-7115043,communitymode-7115043,wmd-preview-7115043,fkey,author,edit-comment-7115043,edit-comment-error-7115043,submit-button-7115043,comments-7115043,add-comment-7115043,comments-link-7115043,post-form,post-editor,wmd-button-bar,wmd-input,draft-saved,communitymode,wmd-preview,fkey,author,submit-button,show-editor-button,sidebar,qinfo,adzerk2,newsletter-ad,newsletter-ad-header,newsletter-signup-container,newsletter-signup,newsletter-preview-container,newsletter-preview,h-related,feed-link,feed-link-text,prettify-lang,footer,footer-menu,footer-sites,footer-flair,svnrev,copyright"
“通知容器，覆盖标题，自定义标题，标题，portalLink，顶栏，链接，链接用户，链接导航，链接自定义，hsearch，搜索，hlogo，hmenus，导航问题，导航标签，导航-用户，导航徽章，导航未回答，导航询问，内容，问题标题，主栏，问题，编辑标签，链接后 7115022，关闭问题 7115022，标志后 7115022，评论 7115022 ,add-comment-7115022,comments-link-7115022,answers,answers-header,tabs,answer-7115033,link-post-7115033,flag-post-7115033,comments-7115033,add-comment-7115033 -7115033,answer-7115042,link-post-7115042,flag-post-7115042,comments-7115042,add-comment-7115042,comments-link-7115042,answer-7115043,link-post-305e15e15 ,flag-post-7115043,post-editor-7115043,wmd-button-bar-7115043,wmd-button-row-7115043,wmd-bold-button-7115043,wmd-italic-button-7115043,wmd-button-bar-7115043,wmd-button-row-7115043 ,wmd-link-button-7115043,wmd-quote-button-7115043,wmd-code-button-7115043,wmd-image-button-7115043,wmd-spacer2-7115043,wmd-olist-button-7115043ist button-7115043,wmd-heading-button-7115043,wmd-hr-button-7115043,wmd-spacer3-7115043,wmd-undo-button-7115043,wmd-redo-button-7115043,wmd-hr-button-7115043,wmd-spacer3-7115043 wmd-input-7115043,draft-saved-7115043,communitymode-7115043,wmd-preview-7115043,fkey,author,edit-comment-7115043,edit-comment-error-7115043,submit-button,7151043添加评论 7115043，评论链接 7115043，表单后，后编辑器，wmd 按钮栏，wmd 输入，草稿保存，社区模式，wmd 预览，fkey，作者，提交按钮，显示-编辑器按钮、侧边栏、qinfo、adzerk2、通讯广告、通讯广告标题、通讯注册容器、通讯注册、通讯预览容器、通讯预览、h 相关、供稿链接、供稿-链接文本，美化语言，页脚、页脚菜单、页脚站点、页脚风格、svnrev、版权"
回答by Theuns Coetzee
A simple ES6 (es2015) solution based on answer of user113716
基于user113716回答的简单 ES6 (es2015) 解决方案
const elementsById = document.querySelectorAll('[id]');
const elementsByIdArr = Array.prototype.map.call(elementsById, el => el.id);
/**
* identify all element ID's on a page,
* construct array of all element ID's on a page,
*/
const elementsById = document.querySelectorAll('[id]');
const elementsByIdArr = Array.prototype.map.call(elementsById, el => el.id);
for (const el of elementsByIdArr) {
document.getElementById(el).innerHTML = `My id is "#${el}"`;
}.title {font-weight: bolder; font-size: 24px;}
.description {line-height: 1.8em;}<div id="primary" class="title"></div>
<div id="description" class="description"></div>回答by RustyTheBoyRobot
First of all, I would highly recommend jQuery. It has simplified my JavaScript development soooo much. (See RichieHindle's answer)
首先，我强烈推荐jQuery。它极大地简化了我的 JavaScript 开发。（见 RichieHindle 的回答）
Second, I know that a lot of browsers keep a list of IDs for direct (fast) access, but I don't know of a way to access them. It would probably be browser-specific anyways, so that's probably not the best route.
其次，我知道很多浏览器都会保存一个 ID 列表以供直接（快速）访问，但我不知道访问它们的方法。无论如何，它可能是特定于浏览器的，所以这可能不是最佳途径。
Finally, the code:
最后，代码：
var elementList = document.getElementsByTagName("*");
var idList = [];
for (var i in elementList) {
if (elementList[i].id != "") {
idList.push(elementList[i].id);
}
}
// Do something with your array of ids
