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

【问题标题】：How do I enumerate all of the html id's in a document with javascript?如何使用 javascript 枚举文档中的所有 html id？
【发布时间】：2011-10-30 05:03:40
【问题描述】：

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

为了更全面地了解我想要完成的工作，让我解释一下。我不时为诸如房产申请、租赁清单、详细的医疗网站用户注册表格等内容构建大型表格。正如我现在所做的那样，我构建表单，分配 id 和名称，并决定需要哪些值等等。然后，当我为表单构建 php 表单验证和数据库插入部分时，我一直在手动浏览 html 并从 $_post 数组中提取所有 id 以进行输入验证和数据库插入。这非常耗时且非常痛苦，通常伴随着打字错误。

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

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

【问题讨论】：

标签： javascript html validation

【解决方案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); }
}

应该给你留下allIds中的所有ID。

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

如果你想同时包含 ID 和 NAME，那么输入

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

低于if 上方。

【讨论】：

我一直在互联网上搜索*[id]，我找不到任何东西，我在哪里阅读它？为什么它会返回所有 ID，为什么它不能在 var s = new Array; s[s.length] = document.getElementById("*[id]") 上工作（在 for 循环内）
@Shayan, getElementById 采用 ID 而不是 CSS 选择器，因此您传递了错误的东西。 Mozdev 解释 CSS 选择器。 * 是 universal selector，[id] 是 attribute selector。

【解决方案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;
});

【讨论】：

2015年，这是最好的答案。

【解决方案3】：

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

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

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

【讨论】：

我忘了属性选择器，简单多了

【解决方案4】：

获取所有带有通配符的标签：

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

【讨论】：

【解决方案5】：

好吧，既然它是一种形式，我确定您只想遍历表单元素而不是文档中的所有标签（如 href 、 div 等）

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

【讨论】：

【解决方案6】：

使用 jQuery

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

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

在这个页面上试试，你会得到

"通知容器，覆盖标题，自定义标题，标题，portalLink，顶部栏，hlinks，hlinks-user，hlinks-nav，hlinks-custom，hsearch，search，hlogo，hmenus，nav-questions，nav-标签，导航用户，导航徽章，导航未回答，导航询问问题，内容，问题标题，主栏，问题，编辑标签，链接发布 7115022，关闭问题 7115022，标志发布 7115022， cmets-7115022,add-comment-7115022,cmets-link-7115022,answers,answers-header,tabs,answer-7115033,link-post-7115033,flag-post-7115033,cmets-7115033,add-comment-7115033, cmets-link-7115033,answer-7115042,link-post-7115042,flag-post-7115042,cmets-7115042,add-comment-7115042,cmets-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-标题按钮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,cmets-7115043,add-comment-7115043, cmets-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，时事通讯广告，时事通讯广告标题，时事通讯注册容器，时事通讯注册，时事通讯预览容器，时事通讯预览，h 相关，提要链接，提要链接文本，美化- lang,footer,footer-menu,footer-sites,footer-flair,svnrev,copyright"

【讨论】：

【解决方案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>

【讨论】：

【解决方案8】：

您可以使用此代码

var el_up = document.getElementById("UP");
var el_down = document.getElementById("DOWN");
el_up.innerHTML = "Click on the button to get " +
  "all IDs in an array.";

function runJquery() {
  var IDStr = "// Special characters will be removed\n";
  $("*").each(function() {
    if (this.id) {
      let id = this.id;
      id = id.replace(/[^\w\s]/gi, "");
      id = id.toUpperCase();
      window[id] = document.getElementById(this.id);
      IDStr += `var ${id} = document.getElementById('${this.id}');\n`;
    }
  });
  el_down.innerHTML = IDStr;
}

function runNormalJS() {
  var IDStr = "// Special characters will be removed\n";
  [...document.querySelectorAll("*")].forEach(function(e) {
    if (e.id) {
      let id = e.id;
      id = id.replace(/[^\w\s]/gi, "");
      id = id.toUpperCase();
      window[id] = document.getElementById(e.id);
      IDStr += `var ${id} = document.getElementById('${e.id}');\n`;
    }
  });
  el_down.innerHTML = IDStr;
}

* {
  text-align: center;
}

#DOWN {
  color: blue;
}

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js">
</script>


<h1 style="color: blue">
  MrAni
</h1>

<p class="text-center" id="UP"></p>

<button type="button" class="btn btn-outline-primary" onclick="runJquery()">
        Click Here To Run With Jquery
    </button>

<button type="button" class="btn btn-outline-primary" onclick="runNormalJS()">
        Click Here To Run With Normal JS
    </button>

<p class="text-center" id="DOWN"></p>

这段代码通俗易懂，运行流畅

【讨论】：

【解决方案9】：

首先，我强烈推荐 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

【讨论】：

@patrick 哈哈，哎呀。我已经很久没有使用 vanilla JavaScript 了。已编辑
它也不起作用，因为getElementsByTagName 返回的NodeList 的至少三个可枚举属性不是节点（或元素），因此 id 列表将包含三个空成员当传递给 getElementById 时，将返回 null。 OP 可能没想到会这样。
@RobG：有趣；我不知道。
@RobG：那么，检查if (elementList[i].id != "") 还不够吗？文本节点或注释节点或元素以外的节点是否可以指定 ID？
否，因为没有 id 属性的 NodeList 属性（例如 NodeList.item.id）将返回 undefined 和 undefined != ''。但是 undefined 是一个有效的 id，所以你不能简单地过滤掉它。您可以尝试 hasOwnProperty 测试，但不能保证主机对象会遵循 ECMA–262。