cómo ordenar la identificación del elemento conociendo su posición en DOM
Tengo una matriz de ID de elementos en la página, pero esta matriz no está ordenada por su posición en DOM/página. Quiero ordenarlos por su posición en la página.
Formación:
[{ id:'first', type:'TEXT'},{id:'third',type:'DROPDOWN'},{id:'second',type:'TEXT'}]producción:
[{id:'first', type:'TEXT'},{id:'second',type:'TEXT'},{id:'third',type:'DROPDOWN'}]Un enfoque genérico que funciona en cualquier estructura DOM sigue estos pasos...
id de referencia para cualquier referencia que se incluya en la matriz desordenada de elementos de referencia. Use reduce para lograr esta tarea.getElementsByTagName('*') .filter la matriz de elementos por los id de referencia existentes mientras usa la búsqueda de referencia como el this de la función de filtro .map la matriz de elementos filtrados del paso 3 de nuevo a una matriz de elementos de referencia por la id de cada elemento mientras usa nuevamente la búsqueda de referencia como el this de la función de mapa ; preservando así el orden del primero a través de la asignación de este orden al resultado final.... y podría parecerse al siguiente código de ejemplo provisto ...
const unorderedReferenceList = [ { id: 'bar', type: 'TEXT' }, { id: 'baz', type: 'DROPDOWN' }, { id: 'foo', type: 'TEXT' }, ]; console.log({ unorderedReferenceList }); const referenceIndex = unorderedReferenceList .reduce((index, reference) => { index[reference.id] = reference; return index; }, {}); console.log({ referenceIndex }); const elementList = Array.from( document.body.getElementsByTagName('div') ); console.log({ elementList }); const filteredElementList = elementList .filter(function (elm) { return (elm.id in this); }, referenceIndex); console.log({ filteredElementList }); const orderedReferenceList = filteredElementList .map(function (elm) { return this[elm.id]; }, referenceIndex); console.log({ orderedReferenceList }); .as-console-wrapper { min-height: 100%!important; top: 0; } <div> <div> <div> <div> <div></div> <div id="foo">foo</div> </div> <div id="bar">bar</div> </div> </div> <div> <div> <div id="baz">baz</div> <div></div> </div> </div> </div>