0

hola estoy intentando obtener el tipo (div,button,a,ul,etc) y en algunos casos su class de todos los hijos y de los hijos del div(#id). Por ejemplo de este html

 <div id="id">
   <div>
     Block
   </div>
   
   <ul>
     <li>Element</li>
     <li>Element</li>
     <li><a href="#">element</a></li>
     <li><button type="submit">Element</button></li>
   </ul>
   
   <span>element</span>
 </div>

obtener así:

<ul>
   <li>div</li>
   <li>ul</li>
   <ul>
     <li>li</li>
     <li>li</li>
     <li>li</li>
       <ul>
         <li>a</li>
       </ul>
     <li>li</li>
       <ul>
         <li>button</li>
       </ul>
    <li>span</li>
   </ul>
 </ul>

alguna sugerencia?. gracias

1

1 respuesta 1

0

introducir la descripción de la imagen aquí

<div id="id">
  <div>Block</div>

  <ul>
    <li>Element</li>
    <li>Element</li>
    <li><a href="#">element</a></li>
    <li><button type="submit">Element</button></li>
  </ul>

  <span>element</span>
</div>

<script>
  function getTagsStructure(root) {
    let result = '';

    function doRecoursive(node, nIndent = 0) {
      const indent = ' '.repeat(nIndent);
      const children = Array.from(node.children);
      const tag = node.tagName.toLowerCase();

      result += `${indent}<${tag}>`;

      if (children.length) {
        result += '\n';
        children.map(child => doRecoursive(child, nIndent + 2));
      }
      result += `${children.length ? indent : ''}</${tag}>\n`;
    }

    doRecoursive(root);

    return result;
  }

  const result = getTagsStructure(document.getElementById('id'));
  console.log(result);
</script>

El código perece un poco complicado solo porque el formato del resultado La idea es simplemente iterar a través de todos nodos

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.