document.getElementById("main").value = "Main Value";
The above all code is divided using a (.) called a Dot Notation
document['getElementById']('main')['value'] = "Main Value";
The above all code is using Brackets so it is called a Bracket Notation
The main usage between both is the same except dots are much cleaner than the Bracket Notation.
Dot notation is faster to write and clearer to read.
Square bracket notation allows access to properties containing special characters and selection of properties using variables
var myForm = document["getElementById"]("myForm"); var input = myForm["foo"];