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 :
    
    1. idTemplate
    2. data as object
    • usage
      1. in html file :

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

      2. in javascript file:

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

      • the returning element :

          <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()
  Ajoute ou supprime une classe (basculement)
  • params :
    
    • usage
      1. in html file :

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

      2. in javascript file:

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

      • result :

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

• _ to select element like document.querySelector
• __ to select element like document.querySelectorAll
• $() like EventTarget.addEventListener()
  Enregistre un gestionnaire d'événements d'un type d'événement spécifique sur EventTarget.
  • params :
    
    1. target(or element)
    2. l'evenement
    3. L'objet qui recevra un évènement lorsqu'un évènement du type spécifié se produit. ex : callback function
    4. [option]

insert <script src="https://unpkg.com/[email protected]/utils.js" crossorigin="anonymous"></script> in head tag

1. npm i yombal-dom
2. insert <script src="node_modules/yombal-dom/utils.js"></script> in head tag before any script

1. git clone https://github.com/honorableCon/yombal-dom.git
2. copy utils.js to your project directory
3. insert <script src="utils.js"></script> in head tag before any script

eNJOY !

Created by Honorable Con, M.E.R.N Stack developer

New methods suggestion or more.. You can tell me here or pull request.

This project is under the GPL V3 License

Jaajeuf! 🙏🏾