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