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

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

为了更充分地理解我想要完成的任务，让我解释一下。我不时地为财产申请、租赁清单、详细的医疗网站用户注册表格等构建大型表格。正如我现在所做的那样，我构建表单，分配id和名称，并决定需要哪些值等等。然后，当我为表单构建php表单验证和数据库插入部分时，我已经手动遍历了html并从$_post数组中取出所有要引用的id，用于输入验证和数据库插入。这是非常耗时和痛苦的，经常有打字错误。

我正在工作的形式目前只是太大了，我宁愿写一个javascript函数，我可以在我的页面的本地副本上运行，列出所有的id，这样我就不必一个接一个地复制和粘贴它们，或者把它们写下来。然后，我也可以使用javascript循环事件打印出php代码周围的id名称，这样我只需要复制列表，轻轻编辑出id的我不需要…我希望你们能明白。

关于如何我可以把所有的id到一个数组，或者如果已经有一个数组，我可以访问和循环(我找不到任何在谷歌)的任何建议。此外，任何关于如何加快生产大型表单的工作流程，生成php或使其比我目前的方法更快的过程的建议将不胜感激!

在现代浏览器中，您可以通过

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下面。

如果您正在使用一个相当现代的浏览器进行开发，您可以使用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;
});

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

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

这里的工作示例:http://jsfiddle.net/RichieHindle/yzMjJ/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);
}

既然是表单，我敢肯定，你想迭代只在表单元素，而不是在文档中的所有标签(如href,div的等…)

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

使用jQuery

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

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

在这一页试试，你会得到

" notify-container, overlay-header自订标头,头、portalLink topbar, hlinks, hlinks-user, hlinks-nav, hlinks-custom, hsearch,搜索,hlogo,句柄,nav-questions, nav标签,nav-users, nav-badges, nav-unanswered, nav-askquestion,内容,question-header, mainbar,问题,编辑标签,链接- 7115022,后关闭-问题- 7115022,国旗-职位- 7115022,评论- 7115022,添加评论- 7115022,评论-链接- 7115022,答案,answers-header,标签,回答- 7115033,链接- post - 7115033,国旗-职位- 7115033,评论- 7115033,add-comment-7答案115033,评论-链接- 7115033——7115042,链接- post - 7115042,国旗-职位- 7115042,评论- 7115042,添加评论- 7115042,评论-链接- 7115042,回答- 7115043,链接- 7115043,后删除- post - 7115043,国旗- 7115043后,编辑后7115043,大规模杀伤性武器——按钮——酒吧——7115043,大规模杀伤性武器——按钮——行——7115043,大规模杀伤性武器——大胆——按钮——7115043,大规模杀伤性武器-斜体按钮- 7115043,大规模杀伤性武器——spacer1 7115043,大规模杀伤性武器-链接-按钮- 7115043,大规模杀伤性武器——引用——按钮——7115043,大规模杀伤性武器-代码按钮- 7115043,大规模杀伤性武器-图像-按钮- 7115043,大规模杀伤性武器——spacer2——7115043,大规模杀伤性武器- olist按钮- 7115043,wmd-ulist-button - 7115043,大规模杀伤性武器-标题按钮- 7115043,大规模杀伤性武器-人力资源-按钮- 7115043,大规模杀伤性武器——spacer3 7115043,大规模杀伤性武器-撤销按钮- 7115043,大规模杀伤性武器-重做按钮- 7115043,大规模杀伤性武器-帮助-按钮- 7115043,大规模杀伤性武器——输入7115043,草案——保存——7115043,communitymode - 7115043,大规模杀伤性武器-预览7115043 fkey,作家,编辑- - 7115043发表评论,编辑评论-错误7115043,提交按钮- 7115043,评论- 7115043,添加评论- 7115043,评论-链接- 7115043,post表单,邮报编辑,wmd-button-bar, wmd-input, draft-saved, communitymode, wmd-preview, fkey,作者提交按钮,show-editor-button,侧边栏,qinfo adzerk2、newsletter-ad newsletter-ad-header, newsletter-signup-container, newsletter-signup, newsletter-preview-container, newsletter-preview, h-related,订阅,feed-link-text, prettify-lang,页脚,footer-menu, footer-sites, footer-flair svnrev,版权"

基于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>

您可以使用这段代码

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 removedn";
  $("*").each(function() {
    if (this.id) {
      let id = this.id;
      id = id.replace(/[^ws]/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 removedn";
  [...document.querySelectorAll("*")].forEach(function(e) {
    if (e.id) {
      let id = e.id;
      id = id.replace(/[^ws]/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>

这段代码很容易理解，也很流畅

首先，我强烈推荐jQuery。它大大简化了我的JavaScript开发。(参见rich hindle的回答)

第二，我知道很多浏览器都保存了一个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

相关内容

最新更新

热门标签：