Class InHeritance

Inheritance is one of the key concepts of Object-oriented Programming. It is the

concept that classes can have child classes that inherit the properties and methods
from the parent class.
Class Inheritance
DOM – Document Object Model
DOM – Document Object Model
The DOM (or Document Object Model)
is a tree-like representation of the
contents of a webpage, a tree of “nodes”
with different relationships depending on
how they are arranged in the HTML
document. It is a way of displaying the
structure of an HTML document as a
logical tree. This is possible because of
the very important rule that inner
elements need to be closed before outer
elements get closed.

Here is an HTML snippet:

DOM – Document Object Model
And here is how we can translate it to a
tree.

The DOM contains all the HTML

elements of a web page. These basics of
DOM elements, combined with some
knowledge of manipulating and exploring
the DOM, will open so many possibilities.

With JavaScript, we can select and

manipulate parts of DOM. This leads to
interactive web pages instead of static
ones. Working with DOM means we can
create interactive web pages.
DOM - Traversing
We can traverse the DOM using the document object.
This document object contains all the HTML and is a
representation of the web page. Traversing over these
elements can get you to the element you need to
manipulate it.

Let’s go hunting for treasure in the DOM to this snippet.

 We can start by using the body property from the
document.
[Link]([Link]);
 This contains everything that’s inside the body
element.
DOM - Traversing
There are few ways from the body object to get to our treasure, we can use either the children or
childNodes property.
Children: This contains all the HTML elements and can be used with the ID, making it easier to
traverse.

[Link]([Link]);

ChildNodes: This is a more complete term that children, it contains text nodes and comments. Also
childNodes is an array and to get to the target node, you will have to select the right index to select
the right child
[Link]([Link][3].childNodes[3].childNodes[1].childNodes[1]);
We can also combine both to traverse to our target element
[Link]([Link][3].childNodes[3].childNodes[1].[Link]);
DOM - Traversing
There are many ways to traverse a DOM, depending on what you need, you might have to use
one specific way. For tasks that require DOM traversing, it is usually the case that if it works,
it is a good solution.
We have seen how we can move down the DOM, we can also move up. Every element knows
its parent. We can use the parentElement property to move back up
[Link];
We can also move sideways. If we select tree2 like this:
[Link].tree2;
We can get to tree1 using:
[Link];
And from tree1 we can get to tree2 using;
[Link];
As an alternative to nextElementSibling, which returns the next node that is an element, you
can use nextSibling, which will return the next node of any type.
DOM – Accessing Elements
There are multiple methods to select
elements from the DOM. After getting
elements, we can modify them. Instead of
traversing DOM step by step as we did
earlier, we can use built-in methods that can
go through the DOM and return the
elements that match the specifications.

Using the following HTML snippet as an

example
DOM – Accessing elements by ID
We can grab elements by ID with the getElementById() method. This returns one
elements with the specified ID. IDs should be unique, as only one result will be
returned from the HTML document.

If we want to select the element with an ID of two, we could use

[Link](“two”);
This would return the full HTML element
<div id=“two” class=“example”>Hi!</div>
DOM – Accessing elements by tag name
If we ask for elements by tag name, we get an array as a result. This is because
there could be more than one element with the same tag name. It will be a
collection of HTML elements, or HTMLCollection, which is a special JavaScript
object. It’s basically just a list of nodes.
[Link](“div”);
It will give back
HTMLCollection(3) [div#[Link], div#[Link],
div#[Link], one: div#[Link], two: div#[Link], three:
div#[Link]]
DOM - Accessing elements by tag name
We can access them using the item() method to access them by index
[Link](“div”).item(1);
This will return:
<div id=“two” class=“example”>Hi!</div>
We can also access them by name, using the namedItem() method:
[Link](“div”).namedItem(“one”);
This will return:
<div id=“one” class=“example”>Hi!</div>
DOM – Accesssing Elements by class name
We can get elements by classname, In our example HTML, we have two different
classname: example and something. If we get elements by classname, it gives
back an HTMLCollection containing the results. The following will get all the
elements with the class example:
[Link](“example”);
This returns:
HTMLCollection(2) [div#[Link], div#[Link], one:
div#[Link], two: div#[Link]]
DOM – Accessing Element using querySelector
To work with elements on a page, we will have to find them first. Also to change the
value of a certain paragraph, we will have to find this paragraph first. This is called
selecting, after which we can start changing.
To select page elements within JavaScript code to manipulate the elements, we have
two methods
 querySelector() – This method will return the first element within the document
that matches the specified selectors.
 querySelectorAll() – This method will return a static NodeList, which represents a
list of the document’s elements that matches the specified group of selectors.
Both methods can be used to select page elements either by tag name, ID or class.
DOM – Accessing Element using querySelector
Using the querySelector()
[Link](“div”);
It should return:
<div id=“one” class=“example”>Hi!</div>
It only returns the first div, because that’s the first one it encounters. We could also
ask for an element with the class .something.
[Link](“.something”);
This returns:
<div id=“three” class=“something”>Hi!</div>
DOM – Accessing Element using querySelectorALL
Using querySelectorAll()
When you need to select all the elements that match the query
[Link](“div”);
This returns
NodeList(3) [div#[Link], div#[Link], div#[Link]]
The result is of object type NodeList. It contains all the nodes that match the query.
With the item() method we can get them by index, just as we did for the
HTMLCollection.
Element click Handler
HTML elements can do something when they are clicked. This is because a
JavaScript function can be connected to an HTML element.
Manipulating element Style
Selecting an element from the DOM, we can change the CSS style
that applies to it.
MANIPULATING ELEMENT STYLE
Creating new elements
This consists of two steps, first creating new elements and second adding
them to the DOM.
Possible Actions
 Add classes to elements
 Remove classes from elements
 Toggle classes
 Manipulate Attributes
EVENT LISTENER ON ELEMENTS
Events are things that happen on a web page, like clicking on
something, moving the mouse over an element, changing an element,
and so on. In the same way we used onclick, we can add an onchange
handler, or an onmouseover handler. There is one special condition
though, one element can only have one event handler as an HTML
attribute. So if it has an onclick handler, it cannot have an onmouseover
handler as well.

There is a way to register event handlers using Javascript, We call these

event listeners. Using event listeners, we can add multiple events to one
element. This way, JavaScript is constantly checking, or listening, for
certain events to the elements on the page
EVENT LISTENER ON ELEMENTS
Adding event listeners is a two-step process:
1. Select the element you want to add an event to
2. Use the addEventListener(“event”, function) syntax to add the event