javascript DOM manipulation

Author

EXAMINE THE DOCUMENT OBJECT

GETELEMENTBYID

 usage examples:
 var headertitle = document.getElementById('name of the ID');
 console.log(headertitle); // gets the content within the given ID
 console.log(headertitle.textContent); 
 // gets the text inside the given ID irrespective of the style applied (textContent)
 console.log(headertitle.innerText); 
 // gets the text inside the given ID with respective of the style applied (innerText)
 headertitle.innerHTML = '<h3>Hello</h3>';
 // adds h3(html) inside the given ID (innerHTML)
 headertitle.style.borderBottom = 'solid 3px #000';
 // used to modify the style for the given ID (style)

GETSELEMENTSBYCLASSNAME

 usage examples:
 var items = document.getElementsByClassName('name of the class');
 console.log(items); // gets all the elements of the given class
 console.log(items[0]); // gets the first element of the given class
 items[0].textContent = 'Hello'; // adds text to the given class
 items[0].style.fontWeight = 'bold'; // changes the style of the given class
 items.style.backgroundColor = 'green'; // gives error
 
 // correct way 
 for(var i=0; i<items.length ; i++)
 {
 items[i].style.backgroundColor = 'green';
 }

GETELEMENTSBYTAGNAME

 usage examples:
 var li = document.getElementsByClassName('name of the class');
 console.log(li); // gets all the elements of the given tag
 console.log(li[0]); // gets the first element of the given tag
 li[0].textContent = 'Hello'; // adds text to the given tag
 li[0].style.fontWeight = 'bold'; // changes the style of the given tag
 li.style.backgroundColor = 'green'; // gives error
 
 // correct way 
 for(var i=0; i<li.length ; i++)
 {
 li[i].style.backgroundColor = 'green';
 }

QUERYSELECTOR

 usage examples:
 var header = document.querySelector('#main-header');
 header.style.borderBottom = 'solid 4px #ccc'; // adds style to given css selector
 var input = document.querySelector('input');
 input.value = 'Hello World'; 
 var item = document.querySelector('.list-group-item');
 item.style.color = 'red'; // changes the color of first item in list-group-item class
 var lastItem = document.querySelector('.list-group-item:last-child');
 lastItem.style.color = 'blue'; // changes the color of the last item in list-group-item class
 var secondItem = document.querySelector('.last-group-item:nth-child(2)');
 secondItem.style.color = 'coral'; // changes the color of the second item in list-group-item class

QUERYSELECTORALL

 usage examples:
 var titles = document.querySelectorAll('.title');
 console.log(titles); // gets all elements with class title
 titles[0].textContent = 'Hello'; // changes the textcontent of first element with class title
 var odd = document.querySelectorAll('li:nth-child(odd)'); // gets all the odd elements of the given css selector
 var even = document.querySelectorAll('li:nth-child(even)'); // gets all the even elements of the given css selector 
 for(var i=0; i<odd.length; i++)
 {
 odd[i].style.backgroundColor = '#f4f4f4'; // changes the color of all odd elements
 even[i].style.backgroundColor = '#ccc'; // changes the color of all even elements
 }

TRAVERSING THE DOM

 var itemList = document.querySelector('#items');

•parentNode

 usage examples:
 console.log(itemList.parentNode); // gets the parent element of the itemList ID
 itemList.parentNode.style.backgroundColor = '#f4f4f4'; // changes the background color of parent element of itemList ID
 console.log(itemList.parentNode.parentNode); // gets the parent element of parent element of itemList ID

•parentElement

 usage examples:
 console.log(itemList.parentElement); // gets the parent element of the itemList ID
 itemList.parentElement.style.backgroundColor = '#f4f4f4'; // changes the background color of parent element of itemList ID
 console.log(itemList.parentElement.parentElement); // gets the parent element of parent element of itemList ID

•childNodes

 usage examples:
 console.log(itemList.childNodes); // gets all the child elements of itemList ID with line breaks

•children

 usage examples:
 console.log(itemList.children); // gets all the children elements of itemList ID
 console.log(itemList.children[1]); // gets the children element at index 1
 itemList.children[1].style.backgroundColor = 'yellow'; 

•firstChild

 usage examples: 
 console.log(itemList.firstChild); // gets the first child element of itemList ID with line breaks

•firstElementChild

 usage examples:
 console.log(itemList.firstElementChild); // gets the first child element of itemList ID
 itemList.firstElementChild.textContent = 'hello';