Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/honorablecon/yombal-dom
yombal-dom A small extension adding methods to Elements and Document Object to write less code and do more.
https://github.com/honorablecon/yombal-dom
collaborate dom hacktoberfest html javascript
Last synced: 2 months ago
JSON representation
yombal-dom A small extension adding methods to Elements and Document Object to write less code and do more.
- Host: GitHub
- URL: https://github.com/honorablecon/yombal-dom
- Owner: honorableCon
- License: gpl-3.0
- Created: 2021-10-26T08:31:52.000Z (about 3 years ago)
- Default Branch: main
- Last Pushed: 2023-10-15T09:13:08.000Z (about 1 year ago)
- Last Synced: 2024-10-15T15:19:36.511Z (3 months ago)
- Topics: collaborate, dom, hacktoberfest, html, javascript
- Language: JavaScript
- Homepage:
- Size: 43 KB
- Stars: 5
- Watchers: 1
- Forks: 3
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Yombal DOM
![yombal-dom](https://img.shields.io/badge/Js-Yombal%20Dom-red")
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 :
```html
{{ title }}
{{ content }}
```
2. in javascript file:
```javascript
let element = document.createElementFromTemplate("cardTemplate", {
title: "the title",
content: "the content"
})
```
- the returning element :
```html
the title
the content
```
### 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 :
```html
{{ title }}
{{ content }}
```
2. in javascript file:
```javascript
let card = _("#card");
card.replaceMustachWithObjectValues({
title: "a title",
content: "A content of.."
})
```
- result :
```html
a title
A content of..
## 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 `` in head tag
### Via NPM
1. `npm i yombal-dom`
2. insert `` 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 `` in head tag before any script
> eNJOY !
## Author
> Created by **[Honorable Con](https://github.com/honorableCon)**, M.E.R.N Stack developer
## Contribution
New methods suggestion or more.. You can tell me **[here](https://github.com/honorableCon/yombal-dom/issues)** or pull request.
### License
This project is under the **[GPL V3 License](https://github.com/honorableCon/yombal-dom/blob/main/LICENSE)**
> **Jaajeuf!** 🙏🏾