The DOM and Fake Tweets
Have you ever wondered how people make those fake celebrity tweets you see all over the internet? I know I have. I always imagined you had to be a photoshop magician of sorts but it turns out, you don’t. With a little but of HTML knowledge and DOM manipulation, the world of memes can be at your finger tips. I recently began learning the nuances of manipulating the DOM, so I thought I would share the interesting and fun concept of creating fake tweets.
What is the DOM?
The DOM or Document Object Model, is an interface for HTML and XML documents. It displays the page in a way so that programmers can use languages like Javascript to modify the style, structure, and even the content of the page; hence our topic of fake tweets. You don’t have to be an outstanding developer to access and manipulate the DOM, just follow these simple steps:
The Process
Step 1: Visit the tweet you wish to edit and right click, which gives you the menu below; select the inspect option.
Step 2: This will bring you to the element feature within the Chrome Developer tools.
This feature lets you inspect all of the HTML elements on the page. You can navigate this page to find all of the content you wish to change. In this case we can see the content were aiming to edit(the tweet)lies within a <span> tag .
Step 3: Edit the desired text by double clicking on it within the <span> tag. You can now delete the previous tweet characters and replace it as I did below, and hit enter. As you can see the tweet now reads what I entered inside the <span>(obviously LeBron James would never say that). Thats it, you’ve done it! Now you’ve got a little trick you can show your friends to make you look cool and “tech-y” :)
Now not to worry, we are are not actually hacking LeBron James’ twitter account and changing his tweets. This edit only exists on our page; just for fun. You can perform lots of interesting things manipulating the DOM, not just editing silly tweets.
Look at that! Just from the DOM you can change the entire background color of twitter. You could build off this small tutorial and build out an entirely new look for twitter if you wish, but don’t take my word for it, give it a shot yourself! Become a Mass Manipulator of the DOM!
