From my basic understanding of the Document Object Model also known as the DOM is that it is a type of model that allows program code to access and manipulate(adding, changing, or removing) the structure of the properties of any hosted document. With HTML or DHTML documents, I know one may ask what the "hosted Document" is but that generally means the displayed web page. This configuration is sometimes called a "web context", or "web browser". Client-side JavaScript is noted for its widespread use of the DOM as it is the combination of these three components namely, a browser with functionalities to show a web page, the web page loaded in your browser, and a popular programming language known as the JavaScript.
An example would be that of functions, both built-in and tamper-resistant using JavaScript extensions, which help provide for direct manipulation of displayed documents. Furthermore, it is also possible to add, remove, or substitute a displayed content element for another. For example, graphical media can be added to then removed from an HTML file at the urging of a user, or an HTML element's spelling or other property can be temporarily replaced yet this substitution can be both temporary and reversible. Throughout this article, I will try elaborate further into it and even conclude with an implementation scenario.
So in the beginning there was HTML and it was good. HTML stands for HyperText Markup Language, which is a rather a name for simple markup. With HTML, as an author, you can declare text to be a certain way like for instance large, bold, italic or even a different color. You can divide the text into sections, create lists, insert images and links to other pages, and much more. You create your document and put it on an Internet or an intranet server where it can be read by anyone in the world with an Internet connection. However, as good as HTML is at displaying or formatting a page, it does not allow you to manipulate the page. To access and manipulate extended HTML documents after they are delivered to the browser, a new technology was needed and this is where the object model of a document comes in.
Structure
Jumping right straight into the structure of the associated document is available on view and makes up the nodes of the logical tree. All meaning that the document is simply the root of the DOM tree. The children of the highest document are always the "HTML" element such as the (Document object) and the DOCTYPE (DocumentType object). All other nodes are accessible by traversing them, or it is possible using "where" methods to refer directly to the elements in the document.
As I have specified earlier, the DOM is an object-oriented, event-driven interface. Meaning that it is widely accepted that the manipulation of DOM objects is the core of many programs. Most of the lack of browser’s use of another system is a result of the "object model" design because the association from HTML elements to their respective nodes is stored before anyone knows which element the node corresponds to. The careless treatment associated with such associations, as well as the presence of several different objects on each page can lead to unpredictable results not specified in the language documentations that being W3C or also known as the World Wide Web Consortium. When going through the structure itself I realized that there are actually two forms of DOM - the Level 1 (DOM-1) and Level 2 (DOM-2); a third one, that is the present development of the association.
The Document Object Model, or DOM, is a programming interface, or platform-specific framework, meaning that it connects web pages to scripts or programming languages. It was introduced by the World Wide Web Consortium (W3C), the Netscape Communications Corporation and enabled by ActiveX Technologies. Like I had specified earlier that the DOM is separated into three different parts, each of which represents a different part of the web page. The DOM was designed to be platform-independent and language-neutral, meaning that it allows programs and scripts to update the content, structure, and the style of documents. It further represents a document with a logical tree.
Every document in a browser environment has built-in objects based on the information present in the document, and it is always based on a tree structure. The Document Object Model (DOM) represents a document within a browser. DOM has its own way of representing and populating a document tree, which is called the DOM tree. The web document has an XML representation, and the details in the XML are exposed to scripting through an interface in a host language. The DOM tree of the web document, whenever created, is always mutable, which means the content within a node is always allowed to be changed. Each type of node in DOM has properties that are associated with that particular type. Usually, through these properties, the users of web-based information can easily access and manipulate the DOM for the script interaction.
The DOM provides a variety of properties to access, traverse, and manipulate the structure and content of the document. This further came to my understanding that the properties found in the DOM can be broken up into two main categories namely accessibility properties and language-specific properties. JavaScript has access to property interfaces listed in the DOM via the JavaScript hosting environment. In other words, these host's objects are available to the language via the browser, server, or platforms that host them. Most of the key members of the DOM objects are user agents' properties, both language questioner and user agent's model, which allow for greater access, manipulation, and behavior of the document object model. Moreover, the DOM contains more than a thousand methods, events, and properties.
In this article I primarily focus on the overview of the following properties of the Document Object Model (DOM) for HTML elements. However, there is also an overview of setting conditional checks on the private property of HTML elements.
Properties
Elements of a document can be accessed and changed by using the properties of the DOM. By using these properties, the size of the window, the current URL of the page, and its title can be found. These properties are also useful for finding the "href" attribute, the "src" attribute, and the text content of elements in the document. These properties vary in their use and interpretation in different browsers. It is suggested to prefer the official browser for proceeding with the demonstration of the use of these properties. This further came to my understanding that the application of browser features can only run with specific versions and limitations.
The object's property can be different from one browser to another, so in order to avoid confusion, the following example application has to be performed with browsers like Google Chrome, Firefox, Opera, or Internet Explorer. Amongst many properties used in the DOM, some of the common properties like window, window.navigator, window.screen, window.history, window.location, and window.document are listed below.
To simply place it in simple term, a document creates a DOM at the time of page loading. This DOM is translated into the live layout of the page. After a document is created in the form of DOM, it can be manipulated by a program or JavaScript. Manipulation of the document to me simply means adding, changing, or removing elements or contents. When a change occurs in the DOM, it reflects in the live layout of the page.
So still have your misunderstandings about the model?...Well on how I would conclude my understanding about the DOM is that I understand that a Web page is a document written in HTML containing various tags. "html" is the root tag of the document and contains two children - "head" and "body". The head section of the document contains information about the document and the body displays it. All contents of the document reside inside these two tags. These tags are also called elements of HTML.
And so that further applies to the Document Object Model (DOM) as it is a programming interface for web documents. It represents the page so that programs can change the document structure, style, and content. The DOM represents the document as nodes and objects. That way, programming languages can connect with the page.
Top comments (2)
This is not necesarily true. An HTML-page is rendered from top to bottom, including scripts on the page. Look at this example:
Scripts (as long as they are not modules) are executed inline when they appear, so they can do a decent job to build the page. In fact, many modern frameworks do not use HTML at all, they create the DOM rightaway without using and HTML at all.
And here I was thinking that the frameworks actually do strictly need HTML to help execute the scripts. I guess we learn by the day huh!. Thanks for simplifying it for me through the example above, makes it a lot easier to understand.