Yombal DOM

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

Methods

Document Object

• Document.createElementWithAttributes()
  Creates a new element with attributes.
  • params :
    
    1. tag ex: h1
    2. attributes (as a key/value pair) ex : {'class':'btn', 'value':'send'}
• Document.createElementWithText()
  Creates a new element with text.
  • params :
    
    1. tag ex: p
    2. textContent ex: "Lorem ipsum dolor, sit amet consectetur adipisicing elit. Itaque, debitis?"
• Document.createElementWithChilds()
  Creates a new element with childs.
  • params :
    
    1. tag ex: form
    2. childs (list of element) ex : [input, button]
• Document.createElementFromTemplate()
  Create a new element from a 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 Object

Element inherits the methods provided by the Node parent class and its parent class before it : EventTarget.

• Element.setAttributes()
  Sets the named attribute values ​​for the current node.
  • params :
    
    1. key/value pair of attributes. ex : {'class':'btn', 'value':'send'}
• Element.appendChilds()
  Adds the childs specified in argument as child to the current node.
  • params :
    
    1. childs (list of element) ex : [input, button]
• Element.toggleClass()
  Adds or removes a class (toggle)
  • params :
    
    1. value of class
• Element.replaceMustachWithObjectValues()
  Adds or removes a class (replace)
  • 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: "a title",
          content: "A content of.."
      })

      • result :

      <div class="card">
          <h1> a title </h1>
          <p> A content of.. </p>
      </div>
      

Shortcut

• _ to select element like document.querySelector
• __ to select element like document.querySelectorAll
• $() like EventTarget.addEventListener()
  Registers an event handler of a specific event type to EventTarget.
  • params :
    
    1. target(or element)
    2. the event
    3. The object that will receive an event when an event of the specified type occurs. ex: callback function
    4. [option]

Guide 📥

Over a CDN

insert <script src="https://unpkg.com/yombal-dom@1.0.5/utils.js" crossorigin="anonymous"></script> in head tag

Via NPM

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

Via GIT

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 !

Author

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

Contribution

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

License

This project is under the GPL V3 License

Jaajeuf! 🙏🏾