nodo est une bibliothèque JavaScript pour manipuler le DOM.

• nodo.before(els, node) : Insère des éléments avant un nœud.
• nodo.start(els, node) : Insère des éléments au début d’un nœud.
• nodo.end(els, node) : Insère des éléments à la fin d’un nœud.
• nodo.after(els, node) : Insère des éléments après un nœud.
• nodo.replace(els, node) : Remplace un nœud par des éléments.

Les éléments se trouvent sous forme d’objets dans un tableau els. Les clefs de ces objets peuvent être des noms compris par JavaScript comme className, textContent, href et bien d’autres ou les noms réservés suivants.

• tag : Définit le type de nœud (div si omis);
• children : Ajoute des éléments (enfants) au nœud.
• on_événement : Écoute des événements ayant lieu sur le nœud.
• data_attribut : Ajoute un attribut de données au nœud.
• k : permet de manipuler le nœud après génération, en y accedant avec l’objet _.
• sc (shortcuts) : Permet en une clef de renseigner rapidement le tag, l’id (préfixé de #) et les classes (préfixées de .).
• comment : Ajoute un commentaire dans le HTML.

Voici un exemple qui met tout cela en œuvre :

nodo.start([
	{tag: 'h1', textContent: 'Liste de tâches'},
	{sc: 'p.maClasse1.maClasse2#monId', innerHTML: '<b>Super</b>.'},
	{tag: 'ul', children: [
		{comment: 'Ceci est un commentaire'},
		{tag: 'li', textContent: 'Dormir', data_pos: 1},
		{tag: 'li', textContent: 'Manger', data_pos: 2}
	]},
	{textContent: 'Cliquer', on_click: () => {alert('🐻')}},
	{k: 'ok'}
]), document.body)

// accés au noeud grâce à k :
_.ok.textContent = 'Ceci est une div.'

Dans le tableau els, il est aussi possible d’insérer la valeur null. Cela peut s’avérer utile avec les nœuds conditionnels :

const n = 12
nodo.end([
    {textContent: `Valeur de n : ${n}`},
    (() => n > 3
        ? null // aucun nœud ne sera créé pour n > 3
        : {textContent: `n <= 3`}
    )()
], document.body)

Pourquoi nodo ?

Chaque développeur a plusieurs choix en ce qui concerne le rafraîchissement de l’interface utilisateur :

• Rafraîchir tout le HTML à chaque action. Cela est envisageable pour une toute petite application. Le développement est grandement simplifié, mais le programme est très peu performant.
• Comparer le DOM virtuel à sa version modifiée pour ne rafraîchir que ce qui change. Le programme est un peu lourd. Il faut apprendre à se servir d’outils complexes. Les performances sont correctes. Pour le développement, on pense que ça va être simple, mais ça l’est rarement.
• Ne rafraîchir que ce qui change. Le développeur connait tous les effets de toutes les actions permises. Il peut donc effectuer les modifications lui-même sans laisser un algorithme comparer pour lui ce qui change. Cela nécessite de la rigueur, mais le programme reste léger et performant.

Cette dernière solution est la meilleure, mais le code peut devenir très complexe et surtout très long. De plus, il faut être bien organisé. nodo conserve les bénéfices de cette approche et supprime ces inconvénients. De plus, la bibliothèque pèse moins de 2 ko (non minimisée) pour environ 50 lignes de code.