Yombal-dom NPM

Yombal DOM

A small extension adding methods to Elements and Document Object to write less code and do more.

Document.createElementWithAttributes() Crée un nouvel élément avec des attributs.
- params :
  1. tag ex: h1
  2. attributes (sous forme de paire key/value) ex : {'class':'btn', 'value':'send'}
Document.createElementWithText() Crée un nouvel élément avec du text.
- params :
  1. tag ex: p
  2. textContent ex: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque, debitis?"
Document.createElementWithChilds() Crée un nouvel élément avec des fils.
- params :
  1. tag ex: form
  2. childs (list of element) ex : input, button

Document.createElementFromTemplate() Crée un nouvel élément depuis un template

params :

usage

in html file :

<template id="cardTemplate">
    <div class="card">
        <h1> {{ title }} </h1>
        <p> {{ content }} </p>
    </div>
</template>

in javascript file:

 let element = document.createElementFromTemplate("cardTemplate", {
    title: "the title",
    content: "the content"
})

    <div class="card">
        <h1> the title </h1>
        <p> the content </p>
    </div>

Element hérite des méthodes fournit par la classe parente Node et de sa classe parente avant elle : EventTarget.

Element.setAttributes() Définit les valeurs des attribut nommés pour le nœud courant.
- params :
  1. paire key/value des attributs. ex : {'class':'btn', 'value':'send'}
Element.appendChilds() Ajoute les enfants spécifiés en argument comme enfant au noeud actuel.
- params :
  1. childs (list of element) ex : input, button
Element.toggleClass() Ajoute ou supprime une classe (basculement)
- params :
  1. value of class

Element.replaceMustachWithObjectValues() Remplacer les templates string avec leurs valeurs

params :

usage

in html file :

<div id="card">
    <h1> {{ title }} </h1>
    <p> {{ content }} </p>
</div>

in javascript file:

 let card = _("#card");
 card.replaceMustachWithObjectValues({
    title: "un titre",
    content: "Un contenu des.."
})

<div class="card">
    <h1> un titre </h1>
    <p> Un contenu des.. </p>
</div>