DOM Explained

Anamika — Fri, 27 Aug 2021 17:44:34 +0000

What is DOM?

DOM stands for Document Object Model. It is an programming interface for web documents. It shows how document content is accessed and modified. It defines the logical structure of documents. It represents the document as nodes and objects, such that any programming language can interact with the page.

DOM Structure

It can be depicted as a tree-like structure. The objects are organized in a hierarchical manner. It follows as :

Window object
Document object
Form object
Form control elements

HTML DOM

Whenever a web document is loaded, the browser creates Document Object Model of the page. It can be modified with a scripting language such as javascript.
HTML DOM is standard object model and programming interface for HTML. It helps to define:

HTML elements as objects
Properties of those elements
Methods to access html elements
Events for those elements

How HTML DOM is constructed?

It is characterized as a hierarchical tree, where each element in the document tree is called Node.

DOM nodes represents all the elements of the document. The document node is called the root node and it contains other nodes. The head and body elements are called parent nodes. The parent nodes also contain other elements inside them , which are considered child nodes.
The elements having same hierarchical level are considered to be sibling nodes, here the head and body can be said to be sibling nodes.
Some nodes are self closing like img tag. These are called void nodes and they cannot be a parent node.

DOM Methods

The document object represents our web page and to access any element of our HTML page, we need to access the document object.
DOM Methods are used to access and manipulate HTML elements.

Few of them are :

Finding HTML Elements

METHOD	Description
document.getElementById(id)	Find elements by id
document.getElementByTagName(name)	Find elements by tag name
document.getElementByClassName(name)	Find elements by class name
document.querySelector()	Find elements by css selector and returns first element that matches the selector
document.querySelectorAll()	Find elements by css selector and returns a node list collection of all matching elements.

DOM Properties

Changing HTML Elements

PROPERTY	Description
element.innerText = new text	Change inner text of an HTML element
element.innerHTML = new HTML content	Change inner HTML of an element
element.style.property = new style	Change style of an HTML element

CSS Box Model

Anamika — Thu, 26 Aug 2021 12:45:55 +0000

All the components depicted in a web page consists of boxes. So, basically all the html elements can be considered as boxes.
In CSS, box model is used for the design and layout of the html elements ,also how each of them are arranged together to form an overall layout.

What is CSS Box Model?

The CSS Box Model is a box that wraps around every html element. It has four layers: margin, border, padding, content.

What does it comprise of?

Content: It is the innermost area which consists of content like text, image or other media, which can be sized using height and width properties.
Padding: This area wraps around the content as an additional layer. Its dimensions can be given using padding properties.
Border: This is the area around the padding. It wraps the content as well as padding. It can be sized using border properties.
Margin: It is the outermost layer, which wraps around every other layer. It is a white space between the box and other elements. It can be adjusted using margin properties.

When we set height and width properties of any element using CSS, it is merely applied to the content area.
So, to know the actual dimensions of the element we
need to consider padding and border also.

Total width of an element is calculated as :

Total Width = ( width + left padding + right padding + left border + right border)

Total height of an element is calculated as:

Total Height = (height + top padding + bottom padding + top border + bottom border)

The Box-sizing Property

This property defines how the margin, padding and borders are added around the box.

Content-Box: It is considered as the default value. It adds the padding, margin and the border outside the box. This means when we specify a width and height to any element, the padding and border are applied over it , so it seems larger.

Border-Box: It adds the margin, padding, and border inside the box. As a result the padding and border are included inside the height and width of an element, ensuring all the elements are sized in an easy manner.

Forem: Anamika