Получить идентификаторы всех элементов в массиве

Question

Я хочу, чтобы все элементы, которые имеющие идентификатор и хочет сохранить это значение ID в массиве, и я использую следующий метод:

var allTheElementsHavingID = document.querySelectorAll('[id]'); 
var allTheID = []; 
for(i=0;i<allTheElementsHavingID.length;i++) 
{ 
    allTheID.push(allTheElementsHavingID[i].id); 
} 

Но проблема здесь в том, что у меня около 15000 элементов с идентификатором. , и когда я запускаю код в консоли, он замораживает браузер. , так что я хочу альтернативу цикла for здесь, чтобы сохранить все ID Есть ли какой-либо другой метод?, который окажется более эффективным

Answer 1

Попробуйте это. он изменит цикл для выполнения асинхронно, так что он может занять столько времени, сколько потребуется для обработки элементов и не приведет к сбою браузера.

const els = document.querySelectorAll('[id]') 
 

 
function asyncLoop(els, callback) { 
 
    let ii = 0 
 
    const ret = [] 
 
    const length = els.length 
 
    
 
    function iter() { 
 
    const id = els[ii].id 
 
    const link = document.querySelector(`a[href*=${id}]`) 
 
    if (!link) { 
 
     ret.push(els[ii].id) 
 
    } 
 
    if (++ii < length) { 
 
     return setTimeout(iter, 0) 
 
    } 
 
    callback(ret) 
 
    } 
 
    iter() 
 
} 
 

 
asyncLoop(els, function(missingIds){ 
 
    console.log(missingIds) 
 
})

<a id="one" href="#one">one</a> 
 
<a id="two" href="#two">two</a> 
 
<a id="fail" href="#three">three</a>

Я не уверен, что получение и перебор списка с 15000 элементами является хорошей идеей. Вы можете оценить 'hashchange', чтобы увидеть, есть ли соответствующий элемент при нажатии ссылки. Это даст вам возможность справиться с любыми ошибками.

!!element возвращение позволит предотвратить действия, если нет соответствия элемент

window.addEventListener('hashchange', function(e) { 
 
    var element = document.querySelector(location.hash) 
 
    console.log(element) 
 
    return !!element 
 
})

<a id="one" href="#one">one</a> 
 
<a id="two" href="#two">two</a> 
 
<a id="fail" href="#three">three</a>

Answer 2

Вы можете дать им все элементы одного класса, а затем получить идентификаторы всех элементов с тем же классом. Вот jsfiddle https://jsfiddle.net/qdk9d55w/4/

var elementIds = []; 
var elements = document.getElementsByClassName("example"); 
for (var i = 0, len = elements.length; i < len; i++) { 
    if (elements[i].id != '') { 
     elementIds.push(elements[i].id); 
    } 
} 
alert(elementIds); 

Answer 3

Основная проблема заключается в том, что цикл над так много деталей всегда собирается занять некоторое время. Но, возможно, использование встроенной функции, такой как .map(), будет быстрее, чем ваш собственный цикл.

var allTheID = [].map.call(allTheElementsHavingID, e => e.id); 

Но, видимо, я ошибаюсь.

JQuery map vs Javascript map vs For-loop