DOM Manipulation Using JavaScript/jQuery

Before we start, the very first thing we should know what is DOM?

DOM stands for Document Object Model. DOM is a platform and language-neutral interface that allows scripts and program to dynamically access and update the content, structure, and style of Document

DOM is divide into 3 parts

  1. HTML DOM
  2. XML DOM
  3. CORE DOM

1. HTML-DOM

 Most common method to access the HTML element

  1. document.getElementById(id) : It is used to find the element by id
  2. document.getElementByTagName(name): It is used to find the element by tag name
  3. document.getElementByClassName(name): It is used to find the element by class name

Most common  jQuery method to Get HTML attribute

  1. text(): This method is used to return the text
  2. html(): This method is used to return Html and text
  3. val(): this method is used to get the value

Most common  jQuery method to Set HTML attribute

  1. text(“The Code Hubs”): This method is used to set or return text contend of selected elements
  2. html(“<b> The Code Hubs  </b>”): This method is used to set or return text contend of selected elements with include Html
  3. val(“the code hubs”): This method is used to set the value  of the form field
  4. attr(): This method is used to  set or change the attribute value

Most common  jQuery Add Html  content elements

  1. append(): This method is used to inset contend at the end of the selected element
  2. prepend(): This method is used to insert at the beginning of the selected elements
  3. after(): This method is used to insert an element after the selected element
  4. before(): This method is used to insert before the selected element

Most common JQuery Remove Html  content elements

  1. remove(): This method is used to remove the selected element and also its child element
  2. empty() : This method is used to remove only its child element from the selected element

Most common JQuery CSS manipulation method

  1. addClass(): This method is used to add one or more class to the selected element
  2. removeClass(): This method is used to remove one or more class from the selected element
  3. toggleClass(): This method is used to toggles between add/remove class
  4. css(): This method is used to set or return the style attribute

Most common JQuery Dimension method

  1. width():This method set or return the width of the element also padding, border, and  margin
  2. height(): This method set or return the height of the element also padding, border, and  margin
  3. innerWidth(): This method set or return the width of the element also includes only padding
  4. innerHeight(): This method set or return the height of the element also includes only padding
  5. outerWidth(): This method set or return the width of the element also includes only padding and border
  6. outerHeight(): This method set or return the height of the element also includes only padding and border

Submit a Comment

Your email address will not be published. Required fields are marked *

Footer Logo

Subscribe

Select Categories