jQuery DOM Manipulation
What is DOM?The Document Object Model (DOM) is a notion of how to represent the structure of a "document". It is a platform and language-neutral interface that allows programs and scripts to dynamically access and update the content, structure, and style of a document.
DOM StructureDOM provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. The main object in the tree structure is the Document Object, which in turn contains several other child objects . Also several properties of the document object include information about the current document in general. For e.g. document.title represent the title of the current page, defined by the HTML < title > tag.
HTML DocumentThe Document Object Model provides a uniform representation of the HTML document, and it achieves this by representing the entire HTML document as a tree structure . When a web page is loaded in the browser, it creates a Document Object Model of the web page. Each and every single element in the document will have a corresponding presence in the DOM.
Sample HTML Page:
<!DOCTYPE html> <html> <head> <title>The DOM</title> </head> <body> <h1>Document Object Model</h1> <p id="pr">Test Paragraph</p> </body> </html>
HTML Dom StructureThe Document Object Model currently consists of two parts, DOM Core and DOM HTML. The DOM Core represents the functionality used for XML documents, and also serves as the basis for DOM HTML. All DOM implementations must support the interfaces listed as fundamental in the Core specification; in addition, XML implementations must support the interfaces listed as "extended" in the Core specification. The Level 1 DOM HTML specification defines additional functionality needed for HTML documents .