Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
How objects are organized in a web document? How is it arranged in a hierarchy?
The objects in a web document are organized in a hierarchical structure called the Document Object Model (DOM). This hierarchy represents the relationship between different elements and allows JavaScript to interact with web page components systematically.
DOM Hierarchy Structure
The DOM follows a tree-like structure where each object has a specific position and relationship with other objects:
- Window object ? Top of the hierarchy. It represents the browser window and is the global object for all JavaScript operations.
- Document object ? Each HTML document loaded into a window becomes a document object. It contains all the page content and provides methods to access DOM elements.
- Form object ? Everything enclosed in the <form>...</form> tags creates a form object, accessible through the document.
- Form control elements ? The form object contains all input elements like text fields, buttons, radio buttons, and checkboxes defined within that form.
Visual Hierarchy
Accessing Objects in the Hierarchy
JavaScript uses dot notation to navigate through this hierarchy:
<!DOCTYPE html>
<html>
<head>
<title>DOM Hierarchy Example</title>
</head>
<body>
<form name="userForm">
<input type="text" name="username" value="John">
<input type="submit" value="Submit">
</form>
<script>
// Accessing through the hierarchy
console.log("Window object:", window);
console.log("Document object:", document);
console.log("Form object:", document.forms.userForm);
console.log("Input value:", document.forms.userForm.username.value);
// Alternative access methods
console.log("Direct access:", document.userForm.username.value);
</script>
</body>
</html>
Key Properties and Relationships
Each level of the hierarchy provides specific functionality:
- Window: Global scope, browser methods (alert, setTimeout), and contains the document
- Document: HTML content access, element selection methods, and form collections
- Forms: Form-specific properties like action, method, and element collections
- Elements: Individual properties like value, type, and event handlers
Conclusion
Understanding the DOM hierarchy is essential for JavaScript web development. This structure provides a systematic way to access and manipulate web page elements, from the top-level window object down to individual form controls.
Updated on: 2026-03-15T23:18:59+05:30
287 Views
Advertisements