Skip to content

DOM APIs

Jump to bottom
Preeti Wadhwani edited this page Jun 12, 2021 · 9 revisions

DOM

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect to the page.

A Web page is a document. This document can be either displayed in the browser window or as the HTML source. But it is the same document in both cases. The Document Object Model (DOM) represents that same document so it can be manipulated. The DOM is an object-oriented representation of the web page, which can be modified with a scripting language such as JavaScript.

DOM Selection

Old methods

  • getElementById
  • getElementsByTagName
  • getElementsByClassName

New methods - using CSS selectors

  • querySelector
  • querySelectorAll

DOM Manipulation

Properties

  • innerText - used most of the times
  • innerContent - selects everything even if its hidden or inside script
  • innerHTML - pass html content with tags inside string
  • value
  • parentElement
  • children
  • nextSibling
  • previousSibling

Methods

  • getAttributes() - to get the values of the properties
  • setAttributes() - to set the properties values
  • getComputedStyles() - which styles are actually getting applied to dom element
  • classList.add()
  • classList.remove()
  • classList.toggle()
  • createElement()
  • appendChild()
  • insertBefore()
  • append()
  • prepend()
  • removeChild()
  • remove()

DOM Events

// what thing --> which event ==> what needs to be done

  • use addEventListener method to add event to any HTML element
  • we can add multiple event listeners to one element using addEventListner
  • It returns an event object which contains all the info about event

Key Events

Useful for detecting keyboard characters pressed in the input field or anywhere in the page

  • KEYDOWN - when we press any key down for all chars
  • KEYUP - When we release the key up for all chars
  • KEYPRESS - when key is pressed only when something is changing in the input field, but return is considered during keypress

Form Events

  • submit event

is used to capture the form submission.

  • By default the form will refresh the page after submission, to prevent this we need to call preventDefault() method in the form submission

  • Input Event

on any form element if anything changes (ie user provides an input) this gets called. For textbox it is always gets called.

  • Change Event

Same as Input event but behave different for text input, doesn't gets called until text input loose focus.

Clone this wiki locally