Introduction
Manipulating the DOM means adding, editing and deleting content on a web page.
In this part, we’ll look at the following topics:
- What the DOM is
- How we can edit DOM elements.
The DOM
DOM is:
- An acronym for Document Object Model.
- An interface, specifically an Application Programming Interface (API).
- Provided by browsers to interact with and manipulate web pages.
If you view the source of a web page (right-click -> View Page Source), what is displayed is the content - the HTML, CSS, JavaScript, etc. - sent to the browser by the server.
The browser uses the DOM to manipulate this content and display the web page.
How browsers implement the DOM (and JavaScript) leads to differences in how web pages are displayed.
This was mainly a problem when Microsoft’s Internet Explorer (IE) was the dominant browser. Microsoft didn’t follow the ECMAScript standard, which led to frontend developers spending a lot of time getting pages to render correctly in various versions of IE.
Today, IE is no longer maintained by Microsoft, and fewer companies are willing to spend time on IE fixes (though many places still drive their developers mad by insisting on catering for IE).
Differences in how mobile versions of browsers implement the DOM are more likely to cause issues when rendering correctly across various devices and browsers.
We can use JavaScript to manipulate the DOM by adding, editing, and deleting elements and content.
window and document objects
The window object is the parent object in a web page displayed by a browser.
One of the properties of the window object is screen that holds information about the screen.
Type window.screen or just screen into a console and press enter to see information about your screen.
Another property of window is document. The word document makes up the D in DOM.
On any web page, enter the following into the console: window document or just document.
document contains all the nodes (HTML elements) in the DOM and all the methods (functions) and properties the browser and developers can use to manipulate those elements.
The video below is an intro to the DOM.
DOM selectors
To manipulate the DOM, we first need to select an element on which to do this.
Many tutorials use getElementById() to select a node - an HTML element - by its id attribute. This was one of the first ways to select something in the DOM, which is still valid. We, however, will be using the newer method:
querySelector()- to select one element, such as a singleh1element on a page.querySelectorAll()- to select many elements, such as all thelitags in a ul element.
We can call both these methods from the document object in the following way:
document.querySelector(); and document.querySelectorAll();
The argument we pass into each of these methods is the element we want to select: a tag (“h1”), a class (“.heading2”) or an id (“#accordion”).
The video below explores selecting and editing DOM elements.
Code from the video.
localStorage
The following video looks at using localStorage as a variable store and the difference between localStorage and sessionStorage.
Building a favourites page
In the video below, we will build a favourites page using localStorage.
On the index page, clicking an icon button will add or remove an item from an array in localStorage.
On the favourites page, the items in storage will be retrieved and displayed.
Because localStorage can only store string values, we’ll use JSON.stringify and JSON.parse to set and get the array of favourites to and from storage.
Code from the video.
Lesson Task
Brief
There are practice questions in the master branch of this repo.
Attempt to answer the questions before checking them against the answers in the script.js file in the answer branch of the repo.