As you guys already know, JavaScript is a scripting language that runs in the web browser. Developers use JavaScript to manipulate the DOM, make their websites interactive and many more! This gave me a random idea – why not write a one-line JavaScript code to like a YouTube video without pressing the ‘Like’ button? Read on to find out how!

1. Understanding The Markup

Before we jump in and start writing some JavaScript code, we need to know what we are dealing with! In order to click the YouTube ‘like’ button using JS, we will need to grab it using its id or class.

Head on over to YouTube and open your favourite video. Pause the video and press Ctrl+Shift+I on your keyboard to fire up the Dev Tools! We will be using Google Chrome, but feel free to follow along using any browser of your choice.

The next step is to press Ctrl+Shift+C on your keyboard, which will enable you to select an element by clicking on it. Chrome will automatically show its HTML in the DOM, without you requiring to search for it. Go ahead and click on the Like button. Don’t worry, this won’t trigger the button, but only highlight the button’s HTML for you.

Image showing YouTube like button html

As you can see in the image above, Chrome has highlighted the <yt-icon> tag instead of the actual <button> tag. This is because the only thing contained by the button is its icon, that we click on.

Therefore, all we need to do is select the appropriate <button> tag and call the click() method on it!

2. Selecting The Element – Part 1

Now that we know what we are looking for, let’s dive into the procedure of selecting the element. If you have little experience in JavaScript, you might be thinking of using the getElementById or the getElementsByClassName methods. While this would be the correct way to go for most cases, it won’t be ideal for YouTube.

You will need to observe the DOM a little more to understand why. Press Ctrl+Shift+C again and click on the Dislike button this time. Observe that both the Like and Dislike buttons have the same id and class properties, that is “style-scope it-icon-button”. This will make it problematic for us to get the element by using id or class.

Do know, that using getElementsByClassName(‘style-scope yt-icon-button’) will return all the elements with this class. We could have just selected the button from the list of elements returned, but that would be a clumsy way to do it.

Digging around the DOM like a detective, I found that the aria-label attribute of the Like button contains the “like” keyword, while the same attribute of the Dislike button contains the “dislike” keyword. Voila! 😎

3. Selecting The Element – Part 2

So how can we select an element in JS by a string contained in the value of an attribute of our choice? Answer: querySelector()

Switch to the Console tab in Dev Tools and run the following code:

document.querySelector('[aria-label~="like"]');

Hurray! We get the element!

But how did this work? Let’s break it down.

Using the querySelector method, we can grab an element by its attribute name. The syntax is:

document.querySelector('[attr]'); // attr is the attribute name

Similarly, if we need to select an element by the value of one of its attributes, we can use:

document.querySelector('[attr=value]'); // value is the attribute value

Finally, if we need to select an element by an attribute whose value is contained by a certain value, we can use:

document.querySelector('[attr~="value"]'); // the tilde symbol accomplishes this

4. Programmatically Clicking The Button

Now that we have successfully grabbed the button, it’s time to click it! Clicking a button programmatically is dead simple. Just call the click method and JavaScript will fire the ‘click’ event for the button!

Thus we get the final script:

document.querySelector('[aria-label~="like"]').click();

Go ahead, type it into the Console and hit Enter! You just liked a YouTube video using vanilla JavaScript.

Did you enjoy this article? If so, share it with your friends! 😎