Javascript DOM

Make an element draggable using Vanilla Javascript

Javascript event handler mousedown and mousemove can be used to make an element draggable without using any other library. This can be made to work read more

Use universal selector to get all DOM nodes in vanilla Javascript

The universal selector (*), matches the name of any element type. It matches any single element in the document tree. Some ways it can be read more

Javascript – get computed style of an element

To get computed style of an element the following approaches can be taken: Vanilla javascript: window.getComputedStyle(element) jQuery: .css(propName) Example – computed style using Javascript Example read more

Javascript onscroll event handler with throttling

Javascript onscroll event handler is called on every onscroll event. At times we want to ensure that it is not called again before a certain read more

Javascript onscroll event handler

Javascript onscroll event handler can be attach to any DOM element. Attaching it to document is a typical use case. But it can be attached read more

Javascript how to stop event propagation

Javascript/HTML event can be handled by more than one dom elements and after one handler, it propagate to next element. API Event.stopPropagation() can be used read more

Javascript event bubble vs capture

Javascript/HTML events can propagate in two ways in DOM API. This is relevant when more than one element are listening on same event. Event propagation read more

Javascript – how to view text inside DOM element

Javascript DOM method textContent can be used to get the text content inside a DOM. This can be useful to obtain content from a web read more

Javascript – DOM appendChild example

Javascript DOM method appendChild can be used to append a child to existing DOM element. For example it can be used to append an Image, read more

Javascript DOMContentLoaded listener example

DOMContentLoaded event is fired when document DOM is ready and before images, etc. are loaded. It is similar to jQuery $(document).ready(). Here is code snippet read more

Javascript – ready vs on load event handler example

HTML document ready event is called before image assets, etc. are loaded on the page. window onload handler is called once all assets have been read more

Javascript – img onload examples

Sometime we need to call a function after an image has been loaded. We can attach onload even handler on image either in html itself read more

Multiple onload handlers using vanilla Javascipt

Attaching a function to windows on load event can be done in multiple ways using plain vanilla Javascript. One option is to use wondow.onload where read more

Javascript – use querySelector to set dom element html

Javascript querySelector can be used to select and set html of a dom element using css selectors. This can be done with jQuery also. But read more

document querySelector examples

Javascript querySelector() and querySelectorAll() can be used to get DOM element based on given CSS selector. These works on document and element objects both. querySelector() read more

Javascript – dump all handlers on window object

DOM window object has many javascript event handlers attached to it. It may be handy to dump and view all of these. Here is code read more