DOM.js Alpha 1.0.1 🤫

File Size Release Date Languages Tag Downloads Watch Stars

Easily Manipulate DOM with DOM.js – As easiest as possible!!!

Full Documentation 🙈

How to Use 🤷‍♂️

HTML

<script src="index.js" type="module" defer></script>

JS 🤔

// index.js
import DOM from "https://codeabinash.github.io/DOM.js/DOM.js"

Do not use the DOMElem and DOM as variable name or function or class name etc. because it is in use internally already

Select DOM Elements 🥱

DOM(selector) here selector works like querySelector as needed

As class id tagName

let h1 = DOM("h1")
let spans = DOM("span")
let myDiv = DOM("#myDiv")
let s = DOM("h1 .me")

Create DOM object from existing one 🙅‍♂️

let div = DOM("#myDiv")
let oldDiv = DOM(div)

Create DOM object from Native DOM element 😾

let name = document.getElementById("name")
let domName = DOM(name)
console.log(domName.text);

// console : Abinash

Select from DOM element 😏

<h1>Hello</h1>
<h1>My name is <span>Abinash</span></h1>

let name = DOM("h1 span")
name.text = "Pekachu"

Hello
My name is Pekachu

Select from DOM object 😵‍💫

<h1>Hello</h1>
<h1>My name is <span>Abinash</span></h1>

let h1 = DOM("h1")
let name = h1.select("span") //Select "span" from h1
console.log(name.text);
// console : Abinash

Change Single Text 🅰️

<h1>Hello</h1>
<h1 id="d">Hello</h1>
<h1>Hello</h1>
DOM("#d").text = "Pekachu"

Hello
Pekachu
Hello

Change Multiple Text 🤔 🅰️🅰️🅰️

<h1>Hello</h1>
<h1>Hello</h1>
<h1>Hello</h1>
DOM("h1").text = "All are changed"

All are changed
All are changed
All are changed

Get single text 🅰️

<h1>Hello</h1>
<h1 id="d">JavaScript</h1>
<h1>Hello</h1>

let d = DOM("#d")
console.log(d.text)
//console : JavaScript

Get Multiple texts ( As Array ) 🤔 🅰️🅰️🅰️

let elements = DOM("h1")
console.log(elements.text);
// console : (3) ['Hello', 'JavaScript', 'Hello']

NOTE : If there is more than 1 DOM element is elected it text returns texts as array, otherwise it returns a string value

let elements = DOM("h1")
console.log(elements.textArr);

NOTE : textArr always returns as array for single DOM elements too.

Text Append 📼🅰️

<h1 id="d">JavaScript</h1>

let elem = DOM("#d")
elem.textA = " HTML"
//or
elem.text = elem.text + " HTML"
//console : JavaScript HTML

Get Native DOM element 🤔

let name = DOM("#name")
let nativeDOM = name.dom
//Original DOM (Native)

NOTE : dom returns single DOM element if there is a single DOM element is selected otherwise it returns array of DOM elements. To return always as array use domArr instead of dom. it always returns array for single DOM elements too.

let name = DOM("#name")
let nativeDOM = name.domArr
//Original DOM (Native)

nth element 😲

<h1>Hello</h1>
<h1>Abinash</h1>
<h1>Hi</h1>

let h1 = DOM("h1")
let name = h1.n(1) // 2nd Element
console.log(name.text); // Abinash

console.log(DOM("h1").n(2).text) // Hi

…. Upgrading to

DOM methods like css, eventListener, class, id, transitions etc … Coming Soon 🤩🤩🤩

GitHub

View Github