JavaScript HTML DOM Elements

The HTML DOM allows JavaScript to access and modify the content of HTML
elements. JavaScript can change all HTML elements, attributes, CSS styles in the page.
JavaScript can also add, remove the HTML elements and attributes. Using JavaScript,
we can even create new events in the page. Every web page resides inside a browser
window which can be considered as an object.

A Document object represents the HTML document that is displayed in that window.
The Document object has various properties that refer to other objects which allow
access to and modification of document content.

What is DOM?

The DOM is an acronym for the Document Object Model. It is a programming interface
for Core, XML, and HTML DOM.

It is a W3C (World Wide Web Consortium) standard.

The DOM defines the logical or tree-like structure of the web page or document. In the
tree, each branch ends in a node, and each node contains objects. DOM methods allow
us programmatic access to the tree. Using the DOM methods, you can change the
document's structure, content or style.

What is HTML DOM?

HTML creates the web page's structure, and JavaScript adds interaction to the web page
by manipulating the HTML elements.

JavaScript can’t interact directly with HTML elements. So, whenever a web page loads
in the browser, it creates a DOM.

So, the document object represents the HTML document displayed in that window.
Furthermore, each iframe in the webpage creates a new DOM. The Document object
has various properties that refer to other objects that allow access to and modify
document content.

The way a document content is accessed and modified is called the Document Object
Model, or DOM. The Objects are organized in a hierarchy. This hierarchical structure
applies to the organization of objects in a Web document.
  Window object − It represents the current window of the browser. It also works
as a global object for the browser window. It is at the top of the hierarchy. It is
the outmost element of the object hierarchy.
 Document object − Each HTML document that gets loaded into a window
becomes a document object. The document contains the contents of the page. It
is used to access and modify the elements of the web page.
 Form object − Everything enclosed in the <form>...</form> tags sets the form
object.
 Form control elements − The form object contains all the elements defined for
that object, such as text fields, buttons, radio buttons, and checkboxes.

Here is a simple hierarchy of a few important objects −

There are several DOMs in existence. The following sections explain each of these
DOMs in detail and describe how you can use them to access and modify document
content.

Why is DOM required?

As discussed above, when a web page is loaded into the browser window, it becomes a
document object.

After that, JavaScript can access the HTML elements and perform the other operations
on them. It means JavaScript can interact with the web page using the HTML DOM.

For example, JavaScript can perform the below operations on HTML elements using
the document object.
  Access HTML elements
 Replace HTML elements
 Add New HTML elements
 Delete HTML elements
 Change CSS of HTML elements
 Change attributes of HTML elements
 Add animation to HTML elements
 Add events to HTML elements

However, there are other uses of the document object, which we will cover in upcoming
chapters.

JavaScript - HTML DOM Methods

HTML DOM methods are actions you can perform (on HTML Elements).

HTML DOM properties are values (of HTML Elements) that you can set or
change.

The DOM Programming Interface

The HTML DOM can be accessed with JavaScript (and with other programming
languages).

In the DOM, all HTML elements are defined as objects.

The programming interface is the properties and methods of each object.

A property is a value that you can get or set (like changing the content of an
HTML element).

A method is an action you can do (like add or deleting an HTML element).

Example
The following example changes the content (the innerHTML) of the <p> element
with id="demo":

Example
<html>
<body>

<p id="demo"></p>

<script>
document.getElementById("demo").innerHTML = "Hello World!";
</script>

</body>
</html>

In the example above, getElementById is a method, while innerHTML is

a property.

The getElementById Method

The most common way to access an HTML element is to use the id of the
element.

In the example above the getElementById method used id="demo" to find the
element.

The innerHTML Property

The easiest way to get the content of an element is by using
the innerHTML property.

The innerHTML property is useful for getting or replacing the content of HTML
elements.
The innerHTML property can be used to get or change any HTML element,
including <html> and <body>.

Finding HTML Elements

Often, with JavaScript, you want to manipulate HTML elements.

To do so, you have to find the elements first. There are several ways to do this:

 Finding HTML elements by id

 Finding HTML elements by tag name
 Finding HTML elements by class name
 Finding HTML elements by CSS selectors
 Finding HTML elements by HTML object collections

Finding HTML Element by Id

The easiest way to find an HTML element in the DOM, is by using the element id.

This example finds the element with id="intro":

Example
const element = document.getElementById("intro");

If the element is found, the method will return the element as an object (in
element).

If the element is not found, element will contain null.

Finding HTML Elements by Tag Name

This example finds all <p> elements:

Example
const element = document.getElementsByTagName("p");
This example finds the element with id="main", and then finds all <p> elements
inside "main":

Example
const x = document.getElementById("main");
const y = x.getElementsByTagName("p");

Finding HTML Elements by Class Name

If you want to find all HTML elements with the same class name,
use getElementsByClassName().

This example returns a list of all elements with class="intro".

Example
const x = document.getElementsByClassName("intro");

Finding HTML Elements by CSS Selectors

If you want to find all HTML elements that match a specified CSS selector (id,
class names, types, attributes, values of attributes, etc), use
the querySelectorAll() method.

This example returns a list of all <p> elements with class="intro".

Example
const x = document.querySelectorAll("p.intro");

Finding HTML Elements by HTML Object Collections

This example finds the form element with id="frm1", in the forms collection, and
displays all element values:

Example
const x = document.forms["frm1"];
let text = "";
for (let i = 0; i < x.length; i++) {
text += x.elements[i].value + "<br>";
}
document.getElementById("demo").innerHTML = text;

JavaScript Window - The Browser Object Model

The Browser Object Model (BOM) allows JavaScript to "talk to" the browser.

The Browser Object Model (BOM)

There are no official standards for the Browser Object Model (BOM).

Since modern browsers have implemented (almost) the same methods and
properties for JavaScript interactivity, it is often referred to, as methods and
properties of the BOM.

The Window Object

The window object is supported by all browsers. It represents the browser's
window.

All global JavaScript objects, functions, and variables automatically become

members of the window object.

Global variables are properties of the window object.

Global functions are methods of the window object.

Even the document object (of the HTML DOM) is a property of the window
object:

window.document.getElementById("header");

is the same as:

document.getElementById("header");
Window Size
Two properties can be used to determine the size of the browser window.

Both properties return the sizes in pixels:

 window.innerHeight - the inner height of the browser window (in pixels)

 window.innerWidth - the inner width of the browser window (in pixels)

The browser window (the browser viewport) is NOT including toolbars and
scrollbars.

Example
let w = window.innerWidth;
let h = window.innerHeight;