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

Question

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

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

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

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

Answer 1

在现代浏览器上,您可以通过此方式执

document.querySelectorAll('*[id]')

应该做的工作.

如果你需要所有myElementID的后代,那么就做

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

应该留下你所有的ID allIds.

如果您发现只需枚举特定表单节点下的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;
}