Change the View and Look of Any Live Website by Manipulating the DOM With Javascript.

by bldrkamal in Circuits > Websites

332 Views, 0 Favorites, 0 Comments

Change the View and Look of Any Live Website by Manipulating the DOM With Javascript.

seasongreetingsinstr.jpg

Yes, you can modify the text, colour, create and delete the HTML element of a live website through the DOM.

DOM is a document that is created immediately after your computer browser renders the HTTP response files it receives from web servers.

What is exactly the DOM?

DOM stands for Document Object Model. It is a programming interface that allows us to create, change, or remove elements from the document. We can also add events to these elements to make our page more dynamic.

The DOM views an HTML document as a tree of nodes. A node represents an HTML element

Let's take a look at this HTML code to better understand the DOM tree structure:

<!doctype html><html lang="en"><head>  <meta charset="utf-8">        <meta name="viewport" content="width=device-width, initial-scale=1"></head><body>      <p>Starting a new project in instructable is fun</p>  </body></html>

Our document is called the root node and contains one child node which is the <html> element. The <html> element contains two children which are the <head> and <body> elements.

Both the <head> and <body> elements have children of their own which are <meta> and <p> element respectively.

We can access any live website elements in the document and make changes to them using JavaScript.

This will help beginners in web development appreciate how javascript makes a website dynamic and interactive.

It will be cool if we change a few things on the instructable website using javascript by accessing some of its DOM elements.

How do we select elements in the document?


There are different methods for selecting an element in the HTML document. But I will be using queryselector() method in this project. You can use this method to find elements with one or more CSS selectors.


Things I will be doing;

  1. I will take a look at how to select elements from an HTML document in the instructable website and style it by changing its colour using javascript.
  2. Secondly, I will try to change the text of an element in the DOM.
  3. Finally, I will change one of the navigation links on the instructable website.



Note: all changes are temporary after I refresh my browser.

Supplies

document`object method.jpg

A computer with a google chrome browser. you can also use Mozilla firefox.

You can get the highlight all the document object methods and properties in the google chrome console by typing document followed by a dot operator just like the above picture.

Use the Style Property to Change the Color of an Element Text

Changing color from the DOM 


<span class="site-header-category-brand">instructables</span>


We first need to grab the span element class using the querySelector() method and store it in a variable


const ab = document.querySelector(".site-header-category-brand");


We then use ab.style.color property to change the span text from black to green.


ab.style.color = "green";


This is the complete code that you run in your console.

const ab = document.querySelector(".site-header-category-brand");ab.style.color = "green";


Lets Change the Content of an Element Text

season greeting

I use innerText property from the document object to change the span element text from Instructables to Season Greetings from Instructables.

const ab = document.querySelector(".site-header-category-brand");ab.innerText = "Season Greetings from Instructables";


Finally Lets Change a Navigation Link in the Instructable Page

change navigation in the DOM

first, I used the document object query selector method using the CSS selector to access the navigation node element

and store it in a variable called wiki.

const wiki= document.querySelector('.category-nav-link ');


Secondly, I used the document get attribute method to access and get the existing navigation link URL from the document object.

wiki.getAttribute('href');


Next, I change the existing URL pointing from the circuits page in the website to an external Url pointing to a Wikipedia page.

wiki.setAttribute('href', 'https://en.wikipedia.org/wiki/Saul_Griffith');


Finally, I change the text using the document textContent property of the navigation link from circuits to saul griffith wiki, one of the founders of instructables. Then I change the text colour using the document style property to cyan.

wiki.textContent='saul wiki page';wiki.style.color='cyan';

More details on how to implement it in the video above.