I've searched quite a bit in KM and online but still struggle. I really really want to get into an understand how I can automate web tasks suck as clicking on certain DOM elements from KM.
I want to click on this button on this page (https://github.com/trending)
I inspect the element of it and get this :
But what can I do after this? I don't see anywhere anything about Xpath? Can I somehow click on a class in js perhaps?
This is much more of a web page DOM (Domain Object Model) and JavaScript question than it is a KM question. Once you know the JavaScript needed to perform the desired action, then the KM part is easy: Execute a JavaScript in Browser action (KM Wiki).
While we have a few JavaScript experts here, you are probably better off asking your question at http://stackoverflow.com/. There are many many JavaScript experts that hang out there, so you're likely to get a better/quicker answer.
Just one thing to keep in mind: You need a thick skin there. 
They are not nearly as friendly there as we are here. So just ignore any perceived insults and focus on getting your answer.
Having said all that, if you are truly serious about "I really really want to get into an understand how I can automate web tasks", then you will need to study JavaScript in depth, maybe take an online course, buy some JavaScript books. If you decide to go that route, let us know and I'm sure we can give you some suggestions.
Hey Nikita,
Then you're in for hours of effort, trial-and-error, and study of JavaScript. 
This works for me:
document.getElementsByClassName('btn btn-sm select-menu-button js-menu-target')[1].click()
-Chris
Nice job Chris. Works perfectly.
@nikivi:
To figure out how Chris came up with this JavaScript, right-click on the Web Page "Other Languages" button, and select "Inspect". Then you will see:
<img src="/uploads/default/original/2X/1/1352a5a8884ef9c4bac20f81b7f398a9aa7e751c.jpg" width="690" height="120">
The ideal case would be if the `button` tag has an HTML element `ID`, which would uniquely identify it. Since it does not you have to find the element using the `getElementsByClassName()` function (or other means, like xPath). The Class Name is shown in the HTML code by the `class=` attribute.
<img src="/uploads/default/original/2X/a/a25a20e5b02e65c788a6ddc45fbdd6cebe89f5a9.jpg" width="577" height="43">
However, `getElementsByClassName()` function will return zero or more elements in an HTML element list. If more than one, as in this case, you have to experiment in the Chrome/Safari JavaScript console to determine which element you want.
In this case, you want the 2nd element, which is `[1]` in JavaScript, since JavaScript arrays are zero-based.
Now you have to have JavaScript knowledge about common DOM functions, like `click()`.
Then test all this in the JavaScript Console until you find something that works.
The JavaScript syntax will probably be confusing to you until you have done a bit of study. The basics of JavaScript are not that hard to learn. Once you have mastered JavaScript basics, doing the above is fairly easy.