HTML IN-DEPTH-1
I am at the heart of every web page. I am your Document Object Model and I am not necessarily a tree
Are you a person who just started with HTML/CSS or someone who wants to have an in-depth knowledge of the advanced features of HTML? Then you are in the right place. So grab a cup of coffee and enjoy the third part of our HTML series, HTML DOM in Depth. Do not forget to cross-check the Additional Point section to get some interesting fact.
The W3C Document Object Model (DOM) 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."
Confused? Let me make that simple. Imagine that, every web page is a document and every element( be it text or image or table) inside that webpage is stored in that document as an object in a tree format, which can be manipulated later with a scripting language such as JavaScript.
src: w3schools.com
Now, when a web page is loaded, the browser creates such a document every time which is called, Document Object Model (DOM) of the page.
The DOM represents the document as nodes and objects so that programs can change the document structure, style, and content. In that hat way, programming languages connect to the webpage.
Why DOM is important?
JavaScript fan? Then definitely read it out.
The DOM is not a programming language, but without it, the JavaScript language wouldnt be able to acess any of the web pages elements in HTML documents, XML documents or their component parts .
As per the W3C specification, one important objective for the Document Object Model is to provide a standard programming interface that can be used in a wide variety of environments and applications.
With DOM, JavaScript gets all the power it needs to create dynamic HTML such as changing the HTML elements, attributes, CSS styles, elements and events in the page. We can say that:
API = DOM + JavaScript
Types of DOM:
The W3C DOM standard is separated into 3 different parts:
Core DOMstandard model for all document types(All DOM implementations must support the interfaces listed as fundamental in the Core specification.)
XML DOMstandard model for XML documents (As the name suggests, all XML elements can be accessed through the XML DOM.)
HTML DOMstandard model for HTML documents (The HTML DOM is a standard for how to get, change, add, or delete HTML elements.)
In this article, we will mostly deal with Core and HTML DOM so if you want to know more about XML Dom, refer this.
THE Document
The **Document** the interface represents any web page loaded in the browser and serves as an entry point into the web page's content, which is the DOM tree. The DOM includes elements such as <body> and <table> etc. as nodes. It provides various functionality globally to the document, for example how to obtain the page's URL or create new elements in the document.
HTML documents served with the "text/html" content-type, also implement the HTMLDocument interface, whereas XML and SVG documents implement the XMLDocument interface.
know more about the
**Document**interface here
The Window (BOM)
Before getting into the window object, lets talk briefly about another concept, BOM. The Browser Object Model (BOM) allows JavaScript to talk to the browser. Even though there are no official standards for the Browser Object Model (BOM), modern browsers have implemented (almost) the same methods and properties for JavaScript interactivity.
Now, the window object basically represents the browser window. All global JavaScript objects, functions, and variables automatically become members of the window object. Even the document object (of the HTML DOM) is a property of the window object:
window.document.getElementById(header);
Obviously there are even more stuff you can do with the window object which you will be able to find here
The Object
All of the properties, methods, and events available for manipulating and creating web pages are organized into objects inside dom (for example, the document is itself an object that represents the document itself, the table an object that implements the special [HTMLTableElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLTableElement) DOM interface for accessing HTML tables, and so forth).
The modern DOM is built using multiple APIs that work together. The core DOM defines the objects that fundamentally describe a document and the objects within it. This is enhanced and expanded upon need. For example, the HTML DOM API adds support for representing HTML documents to the core DOM.
The Interface
Many objects borrow from several different interfaces.
The
**HTMLTableElement**interface provides special properties and methods (beyond the regular[HTMLElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement)object interface it also has available to it by inheritance) for manipulating the layout and presentation of tables in an HTML document.
The table object, for example, implements a specialized HTMLTableElement interface, which includes such methods as createCaption and insertRow. But since it's also an HTML element, table implements the Element interface described in the DOM Element Reference chapter. And finally, since an HTML element is also, as far as the DOM is concerned, a node in the tree of nodes that make up the object model for an HTML or XML page, the table object also implements the more basic Node interface, from which Element derives.
When you get a reference to a
tableobject, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.
Commonly used interfaces: (src: https://developer.mozilla.org/)
[document.getElementById](https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById)(id)document.[getElementsByTagName](https://developer.mozilla.org/en-US/docs/Web/API/Element/getElementsByTagName)(name)[document.createElement](https://developer.mozilla.org/en-US/docs/Web/API/Document/createElement)(name)parentNode.[appendChild](https://developer.mozilla.org/en-US/docs/Web/API/Node/appendChild)(node)element.[innerHTML](https://developer.mozilla.org/en-US/docs/Web/API/Element/innerHTML)element.[style](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/style).leftelement.[setAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/setAttribute)()element.[getAttribute](https://developer.mozilla.org/en-US/docs/Web/API/Element/getAttribute)()element.[addEventListener](https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener)()[window.content](https://developer.mozilla.org/en-US/docs/Web/API/Window/content)[window.onload](https://developer.mozilla.org/en-US/docs/Web/API/Window/onload)[window.scrollTo](https://developer.mozilla.org/en-US/docs/Web/API/Window/scrollTo)()
Accessing data from DOM
JavaScript uses the DOM to access the document and its elements in the webpage using the API for the [document](https://developer.mozilla.org/en-US/docs/Web/API/Document) or [window](https://developer.mozilla.org/en-US/docs/Web/API/Window) .
For example, the standard DOM specifies that the getElementsByTagName the method in the code below must return a list of all the <p> elements in the document:
const paragraphs = document.getElementsByTagName("p");
// paragraphs[0] is the first <p> element
Similarly, we can also access HTML elements by:
id :
var x = document.getElementById(intro);(Only one element gets returned with this method)class name:
var x = document.getElementsByClassName(intro);CSS selectors:
var x = document.querySelectorAll(p.intro);HTML elements by HTML object collections:
document.anchors.length;
document.forms.length;
document.images.length;
document.links.length;
document.scripts.length;
Though we focus exclusively on JavaScript in this reference documentation, implementations of the DOM can be built for any language, as this Python example demonstrates:
`# Python DOM example
#src:` [https://developer.mozilla.org/](https://developer.mozilla.org/)
import xml.dom.minidom as m
doc = m.parse(r"C:\Projects\Py\chap1.xml")
doc.nodeName # DOM property of document object
p_list = doc.getElementsByTagName("para")
DOM Datatypes
As DOM is a huge object, there are a number of different data types being passed around the API to use DOM, that you should be aware of.
Document: represents any web page loaded in the browser and serves as an entry point into the web pages content
Node: Basically every object located within a document is a node of some kind.
Element: It refers to an element or a node of type
elementwhich is basically an object in the DOM APINodeList: A
nodeListis an array of elementsAttribute: Attributes are nodes in the DOM just like elements are, though an HTML attribute always belongs to an HTML element in the DOM.
Know more of the DOM properties and methods here.
What the Document Object Model is not
This section is designed to give a more precise understanding of the Document Object Model by distinguishing it from other systems that may seem to be like it.
The Document Object Model does not define any binary source code in its interfaces.
The Document Object Model is not a way of describing the objects of XML or HTML. Instead, it specifies how XML and HTML documents are represented as objects, so that they may be used in object-oriented programs.
The Document Object Model is not a set of data structures, it is an object model that uses various interfaces to access the objects.
The Document Object Model does not define the true inner semantics of XML or HTML. It doesn't understand which object in the document is appropriate to the context or vice versa
The Document Object Model, despite its name, is not a competitor to the Component Object Model (COM). COM, like CORBA, is a language-independent way to specify interfaces and objects.
Interaction with DOM element
Additional Points to Note
In the Document Object Model, documents have a logical structure which is very much like a tree; or to be precise like a forest which can contain more than one tree. However, the DOM does not specify that documents need to be implemented as a tree, nor does it specify how the relationships among objects should be implemented in any way. In other words, the object model specifies the logical model for the programming interface, and this logical model may be implemented in any way that a particular implementation finds convenient.
One important property of DOM structure models is structural isomorphism : if any two DOM implementations are used to create a representation of the same documents, they will create the same structure model, with precisely the same objects and relationships.
The name Document Object Model was chosen because it is an object model is used in the traditional object-oriented design sense: documents are modelled using objects. In other words, the nodes in the DOM diagram do not represent a data structure, they represent objects, which have functions and identity.
If the browser encounters malformed HTML, it automatically corrects it when making the DOM. As an example, if the HTML file is the single word
"Hello", the browser will wrap it into<html>and<body>in the DOM and add the required<head>. Similarly, Tables always have<tbody>Browser tools (to be covered soon) that work with DOM usually do not show spaces at the start/end of the text and empty text nodes (line-breaks) between tags
If somethings in HTML, then it also must be in the DOM tree and that includes comment.
Levels of DOM:
src: https://www.geeksforgeeks.org/dom-document-object-model/
Resources
So thats it for this article. I hope you all liked it and if you liked it then do not forget to tell us your thoughts in the comment section below.
If you want to connect with me, here I am at Twitter or Instagram
Follow our community LinkedIn group, Facebook Page and Twitter for more such articles and posts and meet like-minded people to collaborate.
Top comments (0)