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 Structure
DOM 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.
<script type="text/javascript"> alert(document.title); </script>
HTML Document
The 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 Structure
The 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 .
DOM and JavaScript
JavaScript is an interactive language , and it is easier to understand new concepts by doing. The DOM is not a programming language, but without it, the JavaScript language wouldn't have any model or notion of web pages, HTML documents, XML documents, and their component parts (e.g. elements). JavaScript is the client-side scripting language that connects to the DOM in an internet browser .DOM and jQuery
jQuery is a library written in Javascript that is specialized for changing web documents on the fly. jQuery includes a whole range of methods that make it easy to traverse the DOM . The DOM (document object model) is the interface that enables JavaScript to interact with a web page's content. Whenever we use JavaScript (or jQuery) to inspect or manipulate elements on the web page, we're accessing the DOM. In the following chapter, we'll look at how to move up and down through the DOM structure and work with element hierarchy and parent/ child relationships to change the page structure on the fly using jQuery.
Related Topics