Job Search Update — JS and the DOM
This week was really busy getting back into the swing of things! On the job search front, my wife was able to talk to one of her mom’s friends for me who helped connect me to people at both Apple and SalesForce to apply for jobs. I was able to apply for a few at each company that seemed like a good fit for me and am now waiting to hear back.
Introduction to the DOM — Web APIs | MDN
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a…
JS is a powerful tool that allows us to manipulate the DOM to do whatever we intend. To show a simple example, lets open a new browser and go check out one of my old blogs here:
This weeks update — Rails Generators
This week was a hectic one! other than xmas and family coming over, we left to Big Sur/Monterrey for a little get-away…
Now, in your browser while on my old blog page, right click and select ‘inspect’ then go to console.
Use the ‘select element’ tool by clicking the mouse pointer in the square icon at the top left of the console then select the title on the blog. Here you will see lots of information about that title, it is an H1 element, it also tells you the font, size, and lots of other information about it. If you click it, the inspection window will take you to where it is in the HTML of the website. Now, go back to your console, since we know it is and H1 we will type the following in the console:
> let title = document.querySelector("h1")
Now, just type ‘title’ into the console and you will get information about this element:
>> <h1 id="39ae" class="pw-post-title if ig ih bo ii ij ik il im in io ip iq ir is it iu iv iw ix iy iz ja jb jc jd gi" data-selectable-paragraph>…</h1>
To see the actual title, you can type:
>>'This weeks update — Rails Generators'
Now, we can use JS to manipulate the DOM and change the title you see on the screen! Type the following:
title.innerHTML = "Greatest Blog Ever!"
And viola! the title has changed on the blog! This can be a fun tool to use to trick your friends by changing things on websites to screenshot and also should open your eyes to be more wary of screenshots you’ve seen shared!