Javascript - with DOM




Javascript with DOM

The Javascript DOM (Document Object Model) is an interface that allows developers to manipulate the content, structure and style of a website. In this article, we will learn what the DOM is and how you can manipulate it using Javascript. This article can also be used as a reference for the basic DOM operations.

At the most basic level, a website consists of an HTML and CSS document. The browser creates a representation of the document known as Document Object Model (DOM). This document enables Javascript to access and manipulate the elements and styles of a website. The model is built in a tree structure of objects and defines, HTML elements as objects, Properties and events of the HTML elements, Methods to access the HTML elements

DOM stands for Document Object Model. It is a standard for accessing elements in an HTML document(in reference to web development using Javascript). A HTML document has a structure, by structure we mean the hierarchy of various elements in the document, various properties of these elements etc. For ex:- The HTML document might be having a li tag with id list inside a div which is present inside the body tag. This structure would look like as follows

<body>

<div><li id=”list”></li> </div>

</body>

A typical HTML page would have no. of elements and the javascript code would manipulate this structure by getting a reference to the element we are interested and changing its properties. This is called manipulating the DOM. Nowdays we have many libraries that allow us to query and manipulate DOM easily one of them is jquery. Study a bit on what it does and things would be much clear after it.

The Javascript DOM (Document Object Model) is an interface that allows developers to manipulate the content, structure and style of a website. In this article, we will learn what the DOM is and how you can manipulate it using Javascript. This article can also be used as a reference for the basic DOM operations.

What is Javascript with DOM

JavaScript is a dynamic, loosely typed, prototype-based programming language which is used in many different environments. As well as being the prevalent client-side programming language of the web, it's also used to write plugins for IDEs, in PDF files and as a basis for other platforms and higher abstractions. JavaScript is based on the ECMAScript standard (ECMA-262) and was created by Brendan Eich of Netscape. It was originally called LiveScript but it was later renamed to JavaScript, probably with the sole intention of causing confusion.

Here are some of its features in a little more detail Dynamic programming languages execute at runtime; they are not compiled. Because of this, JavaScript is sometimes considered a scripting language as opposed to a true programming language (obviously a misconception). When you have JavaScript within an HTML document it will be parsed as the page loads within the browser, hence at "runtime".

Loosely typed languages do not insist upon any strong typing system. If you've programmed in C or Java (not the same as JavaScript) you'll know that when declaring a variable you have to specify a type such as 'int' (integer). JavaScript is different in that you don't need to specify the type. To perform inheritance within JavaScript you have to use something called prototypes. JavaScript does not support classes. JavaScript is also a functional language. It treats functions as first-class objects; this is the idea behind lambda.

DOM Document

The DOM Document is the owner of all other objects in your webpage. That means if you want to access any object on your webpage you always have to start with the document. It also contains many important properties and methods that enable us to access and modify our website.

Finding HTML Elements

Now that we understand what the DOM document is we can start getting our first HTML elements. There are many different ways to do so using the Javascript DOM here are the most common -

Get element by ID

The getElementById() method is used to get a single element by its id. Let’s look at an example -

var title = document.getElementById(‘header-title’);

Here we get the element with the id of header-title and save it into a variable.

Get elements by class name

We can also get more than one object using the getElementsByClassName() method which returns an array of elements.

var items = document.getElementsByClassName(‘list-items’);

Here we get all items with the class list-items and save them into a variable.

Get element by tag name

We can also get our elements by tag name using the getElementsByTagName() method.

var listItems = document.getElementsByTagName(‘li’);

Here we get all li elements of our HTML document and save them into a variable.

Queryselector

The querySelector() method returns the first element that matches a specified CSS selector. That means that you can get elements by id, class, tag and all other valid CSS selectors. Here I just list a few of the most popular options.

Get by id

var header = document.querySelector(‘#header’)

Get by class:

var items = document.querySelector(‘.list-items’)

Get by tag:

var headings = document.querySelector(‘h1’);

Get more specific elements:

We can also get more specific elements using CSS Selectors.

document.querySelector(“h1.heading”);

In this example we search for a tag and a class at the same time and return the first element that passes the CSS Selector.