Using this in DOM elements selectors

The word this in JavaScript has a several meaning depending on a contest of a function call. But also in DOM-manipulations this can invoke useful properties of element if used properly. Below is the list of 15 cases how this can be used for DOM manipulations with all tags, inputs/selects and specifically interesting with parts of HREF attribute of <a> tag.

choosing native javascript vs jquery - links

At some point every front end developer comes to thought that in some cases using native JS can be preferential to jQuery due to performance overhead. Below is the list of articles I've recently came across that cover this topic.

How to retrieve position X,Y of html element

How to define in what exactly position (X,Y) is the DOM element on page?
For example you have svg-area on your page and you need to adjust events on it, or 

1) For mouse events you can use event.clientX and event.clientY properties

2) When you use jQuery you can call position() method which will return object with 2 properties:

var position  = $(elem).position();

//position.left, position.top

3)  But if you have to make it in pure javascript you should use getBoundingClientRect() method on your DOM-element. It works like this:

var rect = document.getElementsById('svg').getBoundingClientRect();
//rect.top, rect.right, rect.bottom, rect.left

details about the method on developer.mozilla.org