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 :
- tag ex: h1
- attributes (sous forme de paire key/value) ex : {'class':'btn', 'value':'send'}
-
params :
-
Document.createElementWithText()
Crée un nouvel élément avec du text.-
params :
- tag ex: p
- textContent ex: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque, debitis?"
-
params :
-
Document.createElementWithChilds()
Crée un nouvel élément avec des fils.-
params :
- tag ex: form
- childs (list of element) ex : [input, button]
-
params :
-
Document.createElementFromTemplate()
Crée un nouvel élément depuis un template-
params :
- idTemplate
- data as object
- 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" })
- the returning element :
<div class="card"> <h1> the title </h1> <p> the content </p> </div>
-
params :
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 :
- paire key/value des attributs. ex : {'class':'btn', 'value':'send'}
-
params :
-
Element.appendChilds()
Ajoute les enfants spécifiés en argument comme enfant au noeud actuel.-
params :
- childs (list of element) ex : [input, button]
-
params :
-
Element.toggleClass()
Ajoute ou supprime une classe (basculement)-
params :
- value of class
-
params :
-
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.." })
- result :
<div class="card"> <h1> un titre </h1> <p> Un contenu des.. </p> </div>
- usage
-
params :
- _ 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 :
- target(or element)
- l'evenement
- L'objet qui recevra un évènement lorsqu'un évènement du type spécifié se produit. ex : callback function
- [option]
-
params :
insert
<script src="https://unpkg.com/yombal-dom@1.0.5/utils.js" crossorigin="anonymous"></script>
in head tag
npm i yombal-dom
- insert
<script src="node_modules/yombal-dom/utils.js"></script>
in head tag before any script
git clone https://github.com/honorableCon/yombal-dom.git
- copy
utils.js
to your project directory - 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! 🙏🏾