A 1KB javascript library for DOM manipulation

#javascript #library #frontend

Hello every one in this post we will learn how to use Qjs (Query js) which is a minimal javascript library to manipulate dom
and this is how to get started with this library

Q.query

<div>
  <input type="text" />
</div>

Q.query('input').get() /// returns input element
// Note query returns the first element

Q.queryAll

 <div>first div</div>
 <div>second div</div>

 Q.queryAll('div').get() /// returns all div elements first div + second div
 Q.queryAll('div').get(1) // returns first div element
 Q.queryAll('div').get(2) /// returns second div element

Q.id

 <input id="username" type="text" />

Q.id('username').get() /// returns input element

Q.className

<div class="first-container"></div>
<div class="second-container"></div>

Q.className('first-container').get() /// returns first container element
Q.className('second-container').get() /// returns second container

Q.tagName

<div class="first-container"></div>
<div class="second-container"></div>

Q.tagName('div').get() /// returns array of div elements
Q.tagName('div').get(1) /// returns first container element
Q.tagName('div').get(2) /// returns second container

Q.attr

<div data-title="first">first div</div>
<div data-title="second">second div</div>

Q.attr('data-title').get() /// returns array of elements which have data-title attribute
Q.attr('data-title').get(1) /// returns first div
Q.attr('data-title').get(2) /// returns second div
Q.attr('data-title','first').get() /// returns the element which have data-title attribute and 'first' as value (first div element)
Q.attr('data-title','second').get() /// returns the element which have data-title attribute and 'second' as value (second div)