append ... en action

  <ul id="tree">
    <li>item 1</li>
    <li>item 2</li>
    <li>item 3</li>
  </ul>

Array.from(tree.querySelectorAll('li'),
     ( li ) => {
                       let span = document.createElement('span');
                       li.prepend(span);
                       span.append(span.nextSibling);
                    }
)

Le code précédent transforme chaque élément de la liste comme suit :

<ul class="tree" id="tree">
    <li><span>item 1</span></li>
    <li><span>item 2</span></li>
    <li><span>item 3</span></li>
</ul>

Demo : insertAdjacent ...

Dom / Node / Element

Voici le vocabulaire a connaitre pour se déplacer dans le DOM/élément !

On pourra utiliser également le vocabulaire suivant au niveau Nœud  !

Travail perso

Exemples

Délégation d'événement

lire code.

DOM : alive

<session id="removeSession">
<p>item 1</p>
<p>item 2</p>
<p>item 3</p>
</session>

Nous voulons obtenir une session vide ! 

function clear(elem) {
  for (let i=0; i < elem.childNodes.length; i++) {
      elem.childNodes[i].remove();
  }
}

Le code précédent doit être corrigé, car à chaque destruction d'élément elem.childNodes.length est recalculé.

function clear(elem) {
  for (let i=0; i < elem.childNodes.length; i++) {
  console.assert(5===elem.childNodes.length,elem.childNodes.length);
     elem.childNodes[i].remove();
  }
  }

let removeSession = document.getElementById("removeSession");
clear(removeSession);

(index):51 Assertion failed: 4
(index):51 Assertion failed: 3

Correction

function clear(elem) {
  for (let i=0, n =elem.childNodes.length ; i < n; i++) {
     console.log(elem.childNodes.length);
     elem.childNodes[0].remove();
  }
}

Il est préférable d'appliquer le code suivant !   

function clear(elem) {
  elem.innerHTML = '';
} // radical et simple.

Playing with the dom

let cours = {
  "Math": {
    "Algébre": {},
    "géométrie": {}
  },

  "Langue": {
    "vivante": {
      "anglais": {},
      "russe": {}
    },
    "morte": {
      "latin": {},
    }
  }
};

Peut être parcouru pour afficher !

• Math
  • Algébre
  • géométrie
• Langue
• vivante
  • anglais
  • russe
• morte
• latin

 <ul>

    <li>Math

      <ul>

        <li>Algébre</li>

        <li>géométrie</li>

      </ul>

    </li>

    <li>Langue

      <ul>

        <li>vivante

          <ul>

            <li>anglais</li>

            <li>russe</li>

          </ul>

        </li>

        <li>morte

          <ul>

            <li>latin</li>

          </ul>

        </li>

      </ul>

    </li>

  </ul>

function afficheTree(container, node) {
  let ul;

  if (Object.keys(node).length) {
    ul = document.createElement("ul");
    container.append(ul);
  }

  Object.entries(node).forEach(([clé, obj]) => {
    let li = document.createElement("li");
    li.append(document.createTextNode(clé));
    ul.append(li);

    if (Object.keys(obj).length) {
      afficheTree(li, obj)
    }
  })

}



afficheTree(document.getElementById('tree'), cours);