DOM.js Alpha 1.0.1 π€«
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
andDOM
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 usedomArr
instead ofdom
. it always returnsarray
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