Scribd
Upload
27 views12 pages

Dom Manipulation 1

DOM manipulation in JavaScript allows developers to modify web page structure, style, and content dynamically. Key functionalities include adding/removing elements, changing styles, and adding event listeners. The document outlines methods for examining and manipulating the DOM, including accessing elements by ID and class name, and changing their properties.

Uploaded by

Janloyd Andig
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
27 views12 pages

Dom Manipulation 1

DOM manipulation in JavaScript allows developers to modify web page structure, style, and content dynamically. Key functionalities include adding/removing elements, changing styles, and adding event listeners. The document outlines methods for examining and manipulating the DOM, including accessing elements by ID and class name, and changing their properties.

Uploaded by

Janloyd Andig
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 12

DOM MANIPULATION

Document Object Model (DOM) manipulation is a JavaScript feature that allows developers to change
the structure, style, and content of web pages. It's a key feature in creating dynamic and interactive web
pages.

What can you do with DOM manipulation?

Add and remove elements: Create new elements or remove existing ones

Change styles: Modify the style of elements

Add event listeners: Make elements interactive by adding event listeners

Modify content: Change the content of elements

WHAT WE WANT TO DO:

*GO A LITTLE DEEPER IN JS WITH JUST VANILLA JAVASCRIPT.

WHAT IS DOM?

DOCUMENT OBJECT MODEL

*Tree of nodes/elements created by the browser.

*JS can be used to read/write/manipulate to the DOM

*Object Oriented Representation

DOM TREE
FIRST STEP TO DOM MANIPULATION IS TO CREATE A SIMPLE HTML AND CSS BOOTSTRAP DOCUMENT.

AFTER CREATING THE HTML FILE, CREATE A JS FILE ON THE SAME FOLDER THAT HAS THE HTML FILE.
IN MY CASE, IT’S “dom.js” FILE. MAKE SURE YOU LINK YOUR SCRIPT FILE TO YOUR HTML FILE USING THE
SCRIPT TAG.

HOW TO EXAMINE THE DOM?

This is a list of methods and syntax on how to examine the DOM.

#1. SHOW ALL THE PROPERTIES AND METHODS, HTML COLLECTIONS OF EVERYTHING THAT’S INSIDE
OR ATTACHED TO THE PAGE/DOCUMENT.

console.dir(document);
#2. SHOW THE DOMAIN OF THE DOCUMENT OBJECT.

console.log(document.domain);

*If we say document.domain, you'll see that we get 127.0.0.1 which is just basically my
Localhost, that's the loopback address.

#3. ACCESS THE URL.

console.log(document.URL);

*It gives us basically the entire page and the entire URL.

#4. SHOW THE TITLE OF THE PAGE.


console.log(document.title);
#5. SHOW THE DOCTYPE.
console.log(document.doctype);

*You'll see that we're using the html5 doctype.

#6. SHOW THE HEAD CONTENT AND PROPERTIES.


console.log(document.head);

*If we say document.head, that'll grab the head element and we're outputting it to the console, and
you can see everything that's in the head.

*and as you could probably guess we can also do document.body which will grab the body for us and
output it.
#7. SHOW ALL ELEMENTS THAT IS IN THE DOM.
console.log(document.all);

*What it gives us is an array or an html collection of everything that is in the DOM.

*If we look at our index.html file. The <html> tag is the first one on the top. So in the HTML Collection
of 24, <html> tag is indexed at 0.

*We can access any of these by their index. So for instance, we wanted to access the #header-title and
it has an index of 9 so what we could do is..

#8. ACCESS THE #header-title BY ITS INDEX.

console.log(document.all[9])
NOTE: Just to let you know that and anything you add into your file here whether it's in the head or body,
it's going to get added to document.all, it's going to get added to that collection.

#9. ACCESS THE FORMS.

console.log(document.forms);

*It's basically going to be a collection of all the forms. We only have one so we have it in the zero index.
*Indexes always start at zero just like a regular array. You can get all the different properties of the
form.

#10. ACCESS THE LINKS.

console.log(document.all[9])

*We don't have any links so we just have an empty collection or array [ ].

*We could do images as well, so we can say document.images and you can get images but we don't have any so
we're going to get an empty collection.
NOTE: An HTML collection is not an array.

THIS DOCUMENT. METHOD IS NOT “READ-ONLY”. WE CAN ALSO CHANGE OR MODIFY THE OBJECTS
USING THIS METHOD.

#11. CHANGE THE TITLE OF THE PAGE TO “123”.

console.log(document.title);
document.title = 123;

*You can see the title has actually changed to 123.

We have a few different selecting methods we can use to query the DOM. So the first one we're going to
look at is getElementById() selector.

#12. ACCESS THE ‘header-title’ ID.

console.log(document.getElementById('header-title'));

*You can also declare it in a variable.

var headerTitle = document.getElementById('header-title');


console.log(headerTitle);

*We can get the same result.


#13. CHANGE THE ‘header-title’ TEXT.

headerTitle.textContent = 'Hello';

*In addition to .textContent, we can also use .innerText, and you’ll get the same result. There are few
differences between the two but for the most part, you can use it interchangeably.

#14.ADD AN <h3> ELEMENT UNDER #header-title.

headerTitle.innerHTML = '<h3> Hello </h3';

*If we look at it through the inspector, you'll notice that the <h3> is actually inside the <h1>. Now it
doesn't change the <h1> to an <h3>, it puts the html inside of that DOM element. That's what
.innerHTML does.
#15. PUT A 3 PIXEL BLACK BOTTOM BORDER ON THE #header-title TEXT.

headerTitle.style.borderBottom = 'solid 3px black';

#16. PUT A 3 PIXEL BLACK BOTTOM BORDER ON THE <header> ELEMENT.

var header = document.getElementById('main-header');


header.style.borderBottom = 'solid 3px black';

NOTE: Before accessing and changing a style of an element, you must declare it first in a variable. You
cannot declare the same variable twice.

Next, we're going to look at getting elements by class name, getElementsByClassName().


Notice that it's “elements”- plural. So this works a little different. it's not like get element by class which
doesn't actually exist.
#17. ACCESS ALL THE LIST ITEMS.

var items = document.getElementsByClassName('list-group-item');


console.log(items);

*What it gives us is an html collection, just like document.all gives us and each one has an
index.
*We can access individual items by using its index.
console.log(items[1]);
*In this case, we are accessing item 2.

#18. CHANGE THE TEXT OF LIST ITEM 2 TO HELLO 2.

items[1].textContent = 'Hello 2';


#19. MAKE THE “Hello 2” TEXT BOLD.

items[1].style.fontWeight = 'bold';

#20. MAKE THE “Hello 2” BACKGROUND COLOR YELLOW.

items[1].style.backgroundColor = 'yellow';

NOTE: Notice that I used camel cases here (borderBottom, fontWeight etc.) because you can't do
dashes on JS (border-bottom, background-color) even though, it’s the actual CSS property. So
you have to just type it in camel case.

#ASSIGNMENT.

GIVE ALL LIST ITEMS A GRAY BACKGROUND.

You might also like

pFad - Phonifier reborn

Pfad - The Proxy pFad of © 2024 Garber Painting. All rights reserved.

Note: This service is not intended for secure transactions such as banking, social media, email, or purchasing. Use at your own risk. We assume no liability whatsoever for broken pages.


Alternative Proxies:

Alternative Proxy

pFad Proxy

pFad v3 Proxy

pFad v4 Proxy