Question

我希望能够使用javascript查找html文档中每个对象的每个id（或名称），以便可以在页面底部打印它们。

为了更全面地了解我想要完成的事情，让我解释一下。我不时为物业应用，租赁列表，详细的医疗网站用户注册表等建立大型表格。正如我现在所做的那样，我构建表单，分配id和名称，并决定需要哪些值等。然后，当我为表单构建php表单验证和数据库插入部分时，我已经手动浏览html并从$ _post数组中提取所有id以引用输入验证和数据库插入。这非常耗费时间并且是一种真正的痛苦，通常伴随着打字错误。

我目前正在处理的表单太大了，我宁愿写一个javascript函数，我可以在我的本地页面副本上运行列出所有的id，这样我就没有了将它们一个一个地复制粘贴，或者将它们写下来。然后我也可以使用javascript循环事件打印出id代码周围的php代码，这样我只需要复制列表并轻轻编辑我不需要的id ...我希望你们得到的想法。

关于我如何将所有id放入数组的任何建议，或者如果已经有一个数组我可以访问并循环（我在谷歌上找不到任何东西）。此外，任何有关如何加快生成大型表单的过程的建议，使用生成php的工作流程或使其比我当前的方法更快，将非常感谢！

Answer 1

在modern browsers上，您可以通过

执行此操作

document.querySelectorAll('*[id]')

应该做的。

如果您需要具有ID的myElement的所有后代，请执行

myElement.querySelectorAll('*[id]')

如果您想要非常谨慎地排除<span id="">，那么可能

document.querySelectorAll('*[id]:not([id=""])')

如果需要与旧版浏览器兼容

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); }
}

应该为您提供allIds中的所有ID。

如果您发现只需枚举特定表单节点下的ID，则可以将document.getElementsByTagName替换为myFormNode.getElementsByTagName。

如果您想同时包含ID和NAME，请输入

else if (el.name) { allIds.push(el.name); }

低于if以上。

Answer 2

如果您使用相当现代的浏览器进行开发，则可以使用querySelectorAll()，然后使用Array.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
});

如果您想要一个ID数组，请使用Array.prototype.map：

var arr = Array.prototype.map.call( ids, function( el, i ) {
    return el.id;
});

Answer 3

使用通配符获取所有标记：

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);
}

Answer 4

jQuery选择器$('[id]')将获得具有id属性的所有元素：

$('[id]').each(function () {
    do_something(this.id);
});

这里的工作示例：http://jsfiddle.net/RichieHindle/yzMjJ/2/

Answer 5

好吧，因为它是一种形式，我确定你只想迭代表单元素而不是文档中的所有标签（如href，div等）。

for (var i=0; i < form.elements.length; i++) {
   var elementId = form.elements[i].id;
}

Answer 6

使用jQuery

$('*').map(function() {
   return this.id || null;
}).get().join(',');

这将获取DOM中的所有元素，并在每个元素上运行一个函数来返回id（如果undefined，则返回null将不返回任何内容。这将返回一个jQuery对象，然后转换为带有get()的JavaScript数组，然后将其转换为以逗号分隔的ID字符串。

在此页面上试一试

“通知容器中，覆盖头，自定义首部，首部，portalLink，顶栏，hlinks，hlinks用户，hlinks-NAV，hlinks定制，hsearch，搜索，hlogo，hmenus，NAV-问题，nav-标签，导航用户，导航，徽章，导航，无人接听，NAV-askquestion，内容，提问头，mainbar，问题，编辑标签，链接后7115022，特写问题-7115022，旗后的7115022，评论-7115022，添加注释-7115022，评论链接-7115022，答案，答案头，标签，回答-7115033，链接后7115033，旗后的7115033，评论-7115033，添加注释-7115033，评论链接-7115033，回答-7115042，链接后7115042，旗后的7115042，评论-7115042，添加注释-7115042，评论链接-7115042，回答-7115043，链接后7115043，删除 - 后期7115043，旗后的7115043，编辑器后7115043，大规模杀伤性武器按钮栏-7115043，大规模杀伤性武器按钮行7115043，大规模杀伤性武器粗体按钮7115043，大规模杀伤性武器斜体按钮-7115043，wmd- spacer1-7115043，WMD链路按钮-7115043，WMD引号按钮-7115043，WMD码按钮-7115043，WMD图像按钮-7115043，WMD-spacer2-7115043，WMD-olist按钮-7115043， WMD-ulist-b utton-7115043，大规模杀伤性武器的标题按钮-7115043，WMD-HR-按钮7115043，大规模杀伤性武器spacer3-7115043，大规模杀伤性武器撤消键-7115043，大规模杀伤性武器重做按钮-7115043，大规模杀伤性武器的帮助按钮-7115043，大规模杀伤性武器输入7115043，草稿保存-7115043，communitymode-7115043，大规模杀伤性武器预览-7115043，FKEY，作家，编辑，评论-7115043，编辑注释错误-7115043，提交按钮-7115043，评论-7115043，添加注释-7115043，评论链接-7115043，成形后，编辑器后，大规模杀伤性武器按钮栏，大规模杀伤性武器输入，草稿保存，communitymode，大规模杀伤性武器预览，FKEY，作家，提交按钮，显示─编辑键，侧边栏，QINFO，adzerk2，通讯，广告，通讯，广告标题，简报，注册容器，通讯，注册，通讯预览容器，通讯预览，H相关，饲料环节，馈链接文本，美化琅，页脚，页脚，菜单，页脚，网站，页脚，风骚，svnrev，版权“

Answer 7

基于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 &quot;&num;${el}&quot;`;
}

.title {font-weight: bolder; font-size: 24px;}
.description {line-height: 1.8em;}

<div id="primary" class="title"></div>
<div id="description" class="description"></div>

Answer 8

首先，我强烈推荐jQuery。它简化了我的JavaScript开发。（见RichieHindle的回答）

其次，我知道很多浏览器会保留一份ID列表以供直接（快速）访问，但我不知道如何访问它们。它可能是浏览器特定的，所以这可能不是最好的路线。

最后，代码：

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

如何使用javascript枚举文档中的所有html id？

8 个答案: