Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Código Fuente » JavaScript » Código de JavaScript - Recorrer todos los elementos superiores a un elemento dado en el DOM

Código de JavaScript - Recorrer todos los elementos superiores a un elemento dado en el DOM

Volver
Agregar Código Fuente
<<>>
Imágen de perfil
Val: 3.506
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Recorrer todos los elementos superiores a un elemento dado en el DOMgráfica de visualizaciones


JavaScript

Publicado el 28 de Abril del 2021 por Joel (150 códigos)
3.473 visualizaciones desde el 28 de Abril del 2021
Esta función recorre de manera recursiva todos los elementos del DOM desde un elemento dado hasta el tag <html>.
La función tiene que recibir el elemento inicial donde empezar a recorrer el DOM y opcionalmente, se puede especificar el valor que quieres de devuelva de cada uno de los elemento que va encontrando en el DOM. Si no se especifica ningún valor, simplemente devuelve el elemento para poder gestionarlo.

1
2
3
4
5
6
7
recorrerElDom(document.querySelector("ul")); // [div, body, html]
recorrerElDom(document.querySelector("ul"), "tagName"); // ["DIV", "BODY", "HTML"]
recorrerElDom(document.querySelector("ul"), "offsetWidth"); // [469, 469, 485]
recorrerElDom(document.getElementById("segundoLi"), "nextSibling"); // [text, text, null, null]
recorrerElDom(document.getElementById("segundoLi")); // [ul, div, body, html]
recorrerElDom(document.getElementById("segundoLi"), "tagName"); // ["UL", "DIV", "BODY", "HTML"]
recorrerElDom(document.querySelector("span"), "tagName"); // ["P", "DIV", "LI", "UL", "DIV", "BODY", "HTML"]

1

Publicado el 28 de Abril del 2021gráfica de visualizaciones de la versión: 1
3.474 visualizaciones desde el 28 de Abril del 2021
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html>
 
<body>
 
    <div>
        <ul>
            <li>
                liA
            </li>
            <li id="segundoLi">
                liB
                <div>
                    <p>texto <span>texto dentro span</span></p>
                </div>
            </li>
        </ul>
    </div>
 
</body>
</html>
 
<script>
/**
 * funcion recursiva para recorrer los elementos del DOM
 *
 * @param {object} elemento - elemento dode empezar
 * @param {string} valor    - valor a devolver del elemento
 *                          Por defecto devulve el elemento, pero se
 *                          puede indicar que devuelva el nombre (tagName),
 *                          anchura, o cualquier otro valor.
 *
 * @return {array} array con todos los elementos
 */
function recorrerElDom(elemento, valor="") {
    result=[];
    parent=elemento.parentElement;
    if (parent) {
        result.push(valor ? parent[valor] : parent);
        return result.concat(recorrerElDom(parent, valor));
    }
    return result;
}
 
recorrerElDom(document.querySelector("ul")); // [div, body, html]
recorrerElDom(document.querySelector("ul"), "tagName"); // ["DIV", "BODY", "HTML"]
recorrerElDom(document.querySelector("ul"), "offsetWidth"); // [469, 469, 485]
recorrerElDom(document.getElementById("segundoLi"), "nextSibling"); // [text, text, null, null]
recorrerElDom(document.getElementById("segundoLi")); // [ul, div, body, html]
recorrerElDom(document.getElementById("segundoLi"), "tagName"); // ["UL", "DIV", "BODY", "HTML"]
recorrerElDom(document.querySelector("span"), "tagName"); // ["P", "DIV", "LI", "UL", "DIV", "BODY", "HTML"]
 
console.log(x);
</script>



Comentarios sobre la versión: 1 (0)


No hay comentarios
 

Comentar la versión: 1

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad
Acepto las políticas de privacidad

http://lwp-l.com/s7025