Background: I am a beginner javascript developer who is trying to understand and learn the language better.
There are many websites that allow you to "clip" images and text from webpages for saving. I've noticed most of them require you to drag a snippet of javascript code to your browser toolbar, which when clicked performs the clipping of images & text. Some services which provide this are : Clipboard, Zootool, Evernote, Snip.it etc.
How does these clipping tools work? I have tried to save the javascript and understand it, but it doesn't make much sense. How are the DOM elements(text, images) being accessed? How is sent back to the service for storing? How does the tool "know" which user is logged in?
How do these clipping tools work?
The tools you mention are essentially bookmarklets.
Check this and this.
How are the DOM elements(text, images) being accessed?
The DOM elements are accessed just as you would in a normal webpage document.getElementbyId("ID") or $('something') using jquery. Its essential to understand that the bookmarklets simply run some javascript code on the webpage, just as if it was part of the page's "code".
How does the tool "know" which user is logged in?
Through browser cookies.
Hope its clear.