web-dev-qa-db-ja.com

JavaScriptを使用してドキュメント内のすべてのHTML IDを列挙するにはどうすればよいですか？

JavaScriptを使用して、htmlドキュメント内のすべてのオブジェクトのすべてのID（または名前）を検索できるようにしたいので、ページの下部に印刷できます。

私が達成しようとしていることをより完全に理解するために、説明させてください。物件の申し込み、賃貸物件のリスト、詳細な医療ウェブサイトのユーザー登録フォームなどのために、時々大きなフォームを作成します。今は、フォームを作成し、IDと名前を割り当て、必要な値などを決定します。次に、フォームのphpフォーム検証とデータベース挿入部分を構築するとき、HTMLを手動で調べ、入力検証とデータベース挿入のために$ _post配列から参照するすべてのIDを引き出します。これは非常に時間がかかり、本当の苦痛であり、多くの場合、入力ミスを伴います。

私が現在作業しているフォームは大きすぎます。ページのローカルコピーで実行できるJavaScript関数を記述して、すべてのIDをリストし、コピーする必要がないようにして、 1つずつ貼り付けるか、書き留めます。次に、JavaScriptループを使用して、ID名の周りのphpコードをイベント出力して、リストをコピーし、必要のないIDを軽く編集するだけで済むようにすることもできます...考え。

すべてのIDを配列にドロップする方法に関する提案、またはすでにアクセスしてループできる配列がある場合（Googleでは何も見つかりませんでした）。また、phpを生成するワークフローを使用して大きなフォームを作成するプロセスをスピードアップする方法や、私の現在の方法よりも速くする方法についての提案は、大歓迎です！

javascripthtmlvalidation
37
rmmoul

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

すべてのIDがallIdsに残ります。

特定のフォームノードの下のIDを列挙するだけでよい場合は、document.getElementsByTagNameをmyFormNode.getElementsByTagNameに置き換えることができます。

IDとNAMEの両方を含める場合は、

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

上記のifの下。

52
Mike Samuel

最新のブラウザを使用して開発を行っている場合は、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;
});
20
user113716

ワイルドカードを使用してすべてのタグを取得します。

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

JQueryセレクタ$('[id]')は、id属性を持つすべての要素を取得します。

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

ここでの作業例： http://jsfiddle.net/RichieHindle/yzMjJ/2/

9
RichieHindle

まあ、それはフォームなので、ドキュメント内のすべてのタグ（hrefやdivなど）ではなく、フォーム要素のみを反復処理したいことを確認してください。

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

jQuery

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

これは、DOM内のすべての要素を取得し、それぞれに対して関数を実行してIDを返します（undefinedの場合、nullを返すと何も返されません。これにより、jQueryオブジェクトが返されます。 get()を使用してJavaScript配列に変換され、これがIDのコンマ区切りの文字列に変換されます。

このページで試してみてください

「コンテナーの通知、オーバーレイヘッダー、ヘッダー、portalLink、トップバー、hlinks、hlinks-user、hlinks-nav、hlinks-custom、hsearch、search、hlogo、hmenus、nav-questions、nav-tags、nav -users、nav-badges、nav-unanswered、nav-askquestion、content、question-header、mainbar、question、edit-tags、link-post-7115022、close-question-7115022、flag-post-7115022、comments-7115022 、add-comment-7115022、comments-link-7115022、answers、answers-header、tabs、answer-7115033、link-post-7115033、flag-post-7115033、comments-7115033、add-comment-7115033、comments-link -7115033、answer-7115042、link-post-7115042、flag-post-7115042、comments-7115042、add-comment-7115042、comments-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 -お尻on-7115043、wmd-heading-button-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、comments-7115043、 add-comment-7115043、comments-link-7115043、post-form、post-editor、wmd-button-bar、wmd-input、draft-saved、communitymode、wmd-preview、fkey、author、submit-button、show-エディターボタン、サイドバー、qinfo、adzerk2、ニュースレター広告、ニュースレターサインアップコンテナー、ニュースレターサインアップコンテナー、ニュースレタープレビューコンテナー、ニュースレタープレビュー、h関連、フィードリンク、フィードフィードlink-text、prettify-lang、footer、footer-menus、footer-sites、footer-flair、svnrev、copyright "

3
Russ Cam

ser113716 の回答に基づく簡単な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>
0
Theuns Coetzee