A Platform To Learn To Code

JAVASCRIPT DOM METHODS



DOM Methods are the action that we can perform on objects (elements) of DOM.

DOM methods include grabbing element, creating new element, changing content of element, changing css, removing element etc.

Javascript is mainly used for changing and manipulating HTML elements. Before we change any element we must first have that element. To have those elements we grab those elements by some DOM methods.

In this Chapter we will look at different kinds of methods and in further chapters we will see these methods in detail with examples.


DOM methods to access/grab elements

Methods Description
document.getElementById() Select 1st element of given id
document.getElementsByClassName() Select collection elements with given classname
document.getElementsByTagName() Select collection elements with given tagname
document.querySelector() Select element on the basis of CSS string

DOM methods to create and remove elements

Methods Description
document.createElement() Creates an element
document.removeChild() It remove an element from DOM
document.replaceChild(new,old) It replace an element from DOM with other element
document.appendChild() It appends another element to an element in DOM
document.write() It write something in the document

Changing DOM Elements

These methods and properties are used to change content, CSS style and attributes of an element.

Properties/Methods Description
element.innerHTML It changes inner HTML of an element to the value given in string, after parsing to HTML
element.innerText It changes inner Text of an element to the value given in string, without parsing to HTML
element.style.css_property = value It sets CSS style to the element
element.attribute_name = value It changes value of that attribute
element.setAttribute(attribute_name,value) It Sets new attribute to the element

DOM Access Methods

BOX