如何在javascript中同時獲取所有元素ID？

Question

我想獲取特定頁面上的所有ids名稱，並根據特定名稱進行更改

可能嗎？

到目前為止，我嘗試過：

function get_all()
{
    var esther = document.getElementById(*);
    document.getElementById("bod").value = esther;
}

Answer 1

這應該做的工作

document.querySelectorAll('*[id]')

Answer 2

 console.log( getIds_1() ); console.log( getIds_2() ); function getIds_1(){ let id = document.querySelectorAll('[id]'); return [].slice.call(id).map(function(elem){ return elem.id; }).join(", "); } function getIds_2(){ return [...document.querySelectorAll('[id]')].map(e => e.id).join(", "); } 

 <div id="bubu"></div> <div id="moo"></div> <div id="test"></div> <div id="example"></div> <div id="id_007"></div> 

Answer 3

如果要在頁面上顯示ids列表，則可以使用以下方法獲取頁面上的所有元素：

let allElementsWithIds = [... document.querySelectorAll('[id]')];

然后，您可以創建一個<ul> ，並使用每個元素中的ids填充它，然后再將其附加到文檔正文中。

注意 注意，以下示例中的paragraph2和link1 沒有 ids ，因此它們不會出現在id列表中。

工作示例：

 // Get all Elements with Ids let allElementsWithIds = [... document.querySelectorAll('[id]')]; // Initialise List of Ids let listOfIds = document.createElement('ul'); listOfIds.classList.add('top-right'); // Populate List of Ids allElementsWithIds.forEach((element) => { let newListItem = document.createElement('li'); newListItem.textContent = element.id; listOfIds.appendChild(newListItem); }); // Append List Of Ids to Document Body document.body.appendChild(listOfIds); 

 .top-right { position: absolute; top: 24px; right: 24px; } 

 <h1 id="heading1">This is Heading 1</h1> <p id="paragraph1">This is Paragraph 1</p> <p>This is Paragraph 2</p> <p id="paragraph3">This is Paragraph 3</p> <nav id="nav1"> <a href="link1">This is Link 1</a> | <a id="link2" href="link2">This is Link 2</a> </nav>