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

Question

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

为了更全面地理解我想要完成的任务，请让我解释一下。我不时为物业申请，出租物品清单，详细的医疗网站用户登记表格等建立大型表格。正如我现在这样做，我建立表格，分配ID和名称，并决定哪些值是必需的，等等。然后，当我为表单构建php表单验证和数据库插入部分时，我一直手动浏览html并从$ _post数组中提取所有id以引用输入验证和数据库插入。这非常耗费时间，而且非常痛苦，常常伴随着打字错误。

目前我正在处理的表单太大了，我宁愿写一个javascript函数，我可以在我的本地副本页面上运行以列出所有的id，这样我就不会必须一个接一个地复制和粘贴，或者写下来。然后，我可以使用JavaScript循环来打印出围绕id名称的php代码，这样我只需要复制列表并轻轻地编辑出id就可以了，我不需要...我希望你们能够得到理念。

任何关于如何将所有ID都放入数组中的建议，或者是否已有可以访问并循环的数组（我在Google上找不到任何内容）。另外，任何关于如何加快生成大型表单的工作流程的建议，可以使用生成php的工作流程或使其比我目前的方法更快。

Answer 1

在modern browsers您可以通过

document.querySelectorAll('*[id]') 

这样做应该做的工作。

如果你需要的myElement与ID的所有后代，然后做

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。

如果您发现只需要枚举某个表单节点下的ID，则可以用document.getElementsByTagName替换myFormNode.getElementsByTagName。

如果你想既包括ID和名称，然后把

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

上述if下方。

Answer 2

获取所有标签与通配符：

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 3

与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-askquestion，内容，提问头，mainbar，问题，编辑标签，链接后7115022，特写问题-7115022，旗后的7115022，评论-7115022，添加注释-7115022，评论链接-7115022，答案，答案头，标签，回答-7115033，链接后7115033，升旗后期7115033，评论-7115033，添加注释-7115033，评论链接-7115033，回答-7115042，链接后7115042，旗后的7115042，评论-7115042，添加注释-7115042，评论-LINK 7115042，回答-7115043，链接后7115043，删除，后期7115043，旗后7115043 ，编辑器后7115043，大规模杀伤性武器按钮栏-7115043，大规模杀伤性武器按钮行7115043，大规模杀伤性武器粗体按钮7115043，大规模杀伤性武器斜体按钮-7115043，大规模杀伤性武器spacer1-7115043，大规模杀伤性武器链接按钮-7115043，WMD引号按钮-7115043，WMD码按钮-7115043，WMD图像按钮-7115043，WMD-spacer2-7115043，WMD-olist按钮-7115043，WMD-ulist按钮-7115043，WMD -heading按钮-7115043，WMD小时按钮-7115043，WMD-spacer3-7115043，WMD-撤消按钮-7115043，WMD-重做键式7115043，WMD的帮助按钮-7115043，WMD输入-7115043 ，草稿保存-7115043，communitymode-7115043，大规模杀伤性武器预览-7115043，FKEY，作家，编辑，评论-7115043，编辑注释错误-7115043，提交按钮-7115043，评论-7115043，添加注释-7115043 ，评论链接-7115043，成形后，编辑器后，大规模杀伤性武器按钮栏，大规模杀伤性武器输入，草稿保存，communitymode，大规模杀伤性武器预览，FKEY，作家，提交按钮，显示，编辑键，侧边栏，QINFO，adzerk2，通讯，广告，通讯，广告标题，简报，注册容器，通讯，注册，通讯预览容器，通讯预览，H相关，饲料环节，饲料链接文字，美化琅，FOO之三，页脚，菜单，页脚，网站，页脚，风骚，svnrev，版权”

Answer 4

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

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

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

Answer 5

如果您使用相当现代的浏览器进行开发，可以使用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 6

首先，我会极力推荐的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 

Answer 7

很好，因为它是一种形式， 我敢肯定，你只希望在表单元素进行迭代，并没有在文档中的所有标记（如HREF，div的等）。

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