如何使用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; 
}