Skip to content

dmitriyakkerman/dom-library

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

93 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Build Status TypeScript

Usage:

$d('div')                                   => all DIV elements on the page
$d('#box')                                  => element with id "box"
$d('.box')                                  => all elements with className "box"          
$d('.box').html('<div>New one</div>');      => changing innerHTML of elements with className "box"  
$d('.box').text('Some text');               => changing textContent of elements with className "box"     
$d('.box').css('color', 'red')              => adding style property and value to the elements with className "box"
$d('.box').css({
    color: 'red', 
    border: 'solid #000 1px'
});                                         => adding multiple style properties and values to the elements with className "box"
$d('.box').addClass('someClass');           => adding additional className to the elements with className "box"        
$d('.box').removeClass('someClass');        => removing className "someClass" from the elements with className "box"              
$d('.box').toggleClass('someClass');        => toggling className "someClass" from/to the elements with className "box"
$d('.box').hasClass('someClass');           => checking if elements with className "box" have additional className "someClass"
$d('.box').attr('title')                    => checking the value of "title" attribute of the elements with className "box"
$d('.box').attr('title', 'first')           => settting the value to "title" attribute to the elements with className "box"
$d('.box').find('.child')                   => finding element with className "child" inside element with className "box"
$d('.box').closest('.parent')               => checking if element with className "box" has parent with className "parent"
$d('.box').prev()                           => finding previous element sibling of element with className "box"
$d('.box').next()                           => finding next element sibling of the element with className "box"
$d('.box').parent()                         => finding parent element of the element with className "box"
$d('.box').first()                          => finding first child element of the element with className "box"
$d('.box').last()                           => finding last child element of the element with className "box"
$d('.box').prepend('<div>Hi</div>')         => prepending DIV element inside element with id "box"
$d('.box').append('<div>Hi</div>')          => appending DIV element inside element with id "box"  
$d('.box').remove();                        => removing element/elements with className "box"
$d('.box').on('click', function(){})        => adding eventListener to the elements with className "box"
$d('.box').on('click', 'a', function(){})   => adding eventListener to 'a' tags inside the elements with className "box"
$d(function(){                              => adding className to element on DOMContentLoaded event
  $d('.box').addClass('someClass');
}    
    
Chaining
    
$d(".box").html('<div>Today is a good day</div>').text('Could be better').addClass('my-class').removeClass('my-class').toggleClass('new-class').remove();    

About

Lightweight JS library for DOM manipulation

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published