https://github.com/dmitriyakkerman/dom-library

Lightweight JS library for DOM manipulation
https://github.com/dmitriyakkerman/dom-library

dom-library dom-manipulation

Last synced: about 1 year ago
JSON representation

Lightweight JS library for DOM manipulation

• Host: GitHub
• URL: https://github.com/dmitriyakkerman/dom-library
• Owner: dmitriyakkerman
• Created: 2020-06-29T19:16:44.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2021-02-26T08:25:32.000Z (over 5 years ago)
• Last Synced: 2025-02-15T06:16:52.845Z (over 1 year ago)
• Topics: dom-library, dom-manipulation
• Language: JavaScript
• Homepage:
• Size: 6.29 MB
• Stars: 1
• Watchers: 1
• Forks: 1
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

          
[![Build Status](https://travis-ci.org/dmitriyakkerman/dom-library.svg?branch=master)](https://travis-ci.org/dmitriyakkerman/dom-library)

[![TypeScript](https://badges.frapsoft.com/typescript/love/typescript.svg?v=101)](https://github.com/ellerbrock/typescript-badges/)

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('
New one
');      => 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('
Hi
')         => prepending DIV element inside element with id "box"

    $d('.box').append('
Hi
')          => 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('
Today is a good day
').text('Could be better').addClass('my-class').removeClass('my-class').toggleClass('new-class').remove();