Real quick about querySelector() and getElementbyId() first.

4 min readApr 8, 2021


Manipulating the objects on a screen is a great way to begin to understand what the abilities of knowing the language can do. Using the dev tools you can temporarily make changes to html and css of a page as well as run javascript in the console.

Using the console is a fun way to learn javascript and to see the code you write change the DOM in real time. You can find an element on a page, and assign it a new value.

You can change elements directly in the Elements tab or you can use JavaScript in the console to select, view, and change elements in the window.

Some methods that are useful to do this are the document methods querySelector() and getElementById(). Knowing how to use these will allow you to change those items how you wish.

The querySelector() method takes in an argument of a selector, being a string that is a CSS selector. You can find the proper selector in the elements tab and choosing the best fit for your item. You can choose a class, or any child element of a parent class.

Above I selected the a class from the document. When selecting a class the proper way to insert that argument is with a preceding, “.”. By selecting that class and calling “.innerText” the method would simply return the innerText of that class. We can take it a step further by assigning it a new value, in this case, changing the name of the recipe.

Original innerText(Recipe Name)
After running our querySelector method and assigning a new value we can temporarily change the title.

The getElementById() method works comparably to the querySelector() method with the only difference being, yes, you select only the elements that have ids. You can find the id in the elements tab. (Some objects will not have an id and in that case the querySelector() method is your best option).

We can view any attribute of an element that we get or select by finding it in the document and calling methods that are available to it. In this case…




Learning. Puttin up shots in Angular and Java and Python and anything else I get my hands on. Sights set on becoming a gainfully employed developer.