The Document Object Model DOM is the data representation of the objects that comprise the structure and content of a document on the web. In this guide, we'll briefly introduce the DOM. It represents the page so that programs can change the document structure, style, and content.
The DOM represents the document as nodes and objects.
Document Object Model or DOM
All of the properties, methods, and events available for manipulating and creating web pages are organized into objects for example, the document object that represents the document itself, the table object that implements the special HTMLTableElement DOM interface for accessing HTML tables, and so forth. This documentation provides an object-by-object reference to the DOM. The core DOM defines the objects that fundamentally describe a document and the objects within it.
This reference tries to describe the various objects and types in simple terms. But there are a number of different data types being passed around the API that you should be aware of. Note: Because the vast majority of code that uses the DOM revolves around manipulating HTML documents, it's common to refer to the nodes in the DOM as elementsalthough strictly speaking not every node is an element.
There are also some common terminology considerations to keep in mind. It's common to refer to any Attribute node as simply an attributefor example, and to refer to an array of DOM nodes as a nodeList. You'll find these terms and others to be introduced and used throughout the documentation. This guide is about the objects and the actual things you can use to manipulate the DOM hierarchy. In both cases, the property you want is simply in that form object.
But the relationship between objects and the interfaces that they implement in the DOM can be confusing, and so this section attempts to say a little something about the actual interfaces in the DOM specification and how they are made available.
Many objects borrow from several different interfaces. When you get a reference to a table object, as in the following example, you routinely use all three of these interfaces interchangeably on the object, perhaps without knowing it.
This section lists some of the most commonly-used interfaces in the DOM. The idea is not to describe what these APIs do here but to give you an idea of the sorts of methods and properties you will see very often as you use the DOM.The DOM aims to make it easy for programmers to access components and to delete, add, or edit their content, attributes and style.
In essence, the DOM makes it possible for programmers to write applications that work properly on all browsers and servers and on all platforms.
While programmers may need to use different programming languages, they do not need to change their programming model. W3C's DOM thus offers programmers a platform- and language-neutral program interface which will make programming reliably across platforms with languages such as Java and ECMAScript a reality.
This list is for general discussion about the existing W3C Recommendations. The DOM Activity would not have been successful without the support of individuals and their companies.
It has been a mesmerizing experience to work with people of high human quality. W3C would like to thank. Many thanks to all Working, Interest, and Public participants who have helped to improve the various specifications. W3C liabilitytrademarkdocument use and software licensing rules apply. Your interactions with this site are in accordance with our public and Member privacy statements. Acknowledgements The DOM Activity would not have been successful without the support of individuals and their companies.This means that there are no capabilities to edit the values of an attribute or content of an element, or the ability to insert and remove nodes with the XmlReader.
Editing is the primary function of the DOM. It is the common and structured way that XML data is represented in memory, although the actual XML data is stored in a linear fashion when in a file or coming in from another object.
The following is XML data. XML document structure. Within the XML document structure, each circle in this illustration represents a node, which is called an XmlNode object. The XmlDocument class, which extends XmlNodesupports methods for performing operations on the document as a whole for example, loading it into memory or saving the XML to a file. In addition, XmlDocument provides a means to view and manipulate the nodes in the entire XML document. Both XmlNode and XmlDocument have performance and usability enhancements and have methods and properties to:.
Access and modify nodes specific to the DOM, such as element nodes, entity reference nodes, and so on. Retrieve entire nodes, in addition to the information the node contains, such as the text in an element node. For more information, see XmlReader and XmlWriter. Node objects have a set of methods and properties, as well as basic and well-defined characteristics.
Some of these characteristics are:. Nodes have a single parent node, a parent node being a node directly above them. The only nodes that do not have a parent is the Document root, as it is the top-level node and contains the document itself and document fragments.
Most nodes can have multiple child nodes, which are nodes directly below them. The following is a list of node types that can have child nodes. Nodes that are at the same level, represented in the diagram by the book and pubinfo nodes, are siblings. One characteristic of the DOM is how it handles attributes.
Attributes are not nodes that are part of the parent, child, and sibling relationships. Attributes are considered a property of the element node and are made up of a name and a value pair.
As XML is read into memory, nodes are created. However, not all nodes are the same type. An element in XML has different rules and syntax than a processing instruction. Therefore, as various data is read, a node type is assigned to each node. This node type determines the characteristics and functionality of the node.
New classes enable you to access relational data, giving you methods for synchronizing with ADO. The DOM is most useful for reading XML data into memory to change its structure, to add or remove nodes, or to modify the data held by a node as in the text contained by an element. However, other classes are available that are faster than the DOM in other scenarios.
You may also leave feedback directly on GitHub. Skip to main content. Exit focus mode. Both XmlNode and XmlDocument have performance and usability enhancements and have methods and properties to: Access and modify nodes specific to the DOM, such as element nodes, entity reference nodes, and so on. Is this page helpful? Yes No.It defines the logical structure of documents and the way a document is accessed and manipulated.
DOM is a way to represent the webpage in the structured hierarchical way so that it will become easier for programmers and users to glide through the document. DOM can be thought of as Tree or Forest more than one tree. The term structure model is sometimes used to describe the tree-like representation of a document.
One important property of DOM structure models is structural isomorphism : if any two DOM implementations are used to create a representation of the same document, they will create the same structure model, with precisely the same objects and relationships.
Introduction to the DOM
Documents are modeled using objects, and the model includes not only the structure of a document but also the behavior of a document and the objects of which it is composed of like tag elements with attributes in HTML. If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute. See your article appearing on the GeeksforGeeks main page and help other Geeks. Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.
Writing code in comment? Please use ide.
What is DOM? DOM Document Object Model is a cross-platform and language-independent convention for representing and interacting with objects of documents. Every nodes of a document are organized in a tree structure which called the DOM tree.
In he DOM tree, objects may be addressed and manipulated by using methods on the objects. This allows the dynamic behavior of DOM. It is platform and language independent. The benefits of DOM are given bellow. Some drawbacks of DOM are given bellow. Once upon a time the DOM was not same for every web browser. There were some fundamental differences between the web browsers. But today every web browsers flow DOM standard.
I have over 10 years of working experience in the field of software design and development. I like to share my knowledge and technical stuff with others. I am a community contributor, providing problem solving answer through different forum. Really good article. It is so informative. I like it very much. Thanks cybarlab team for sharing such a fantastic article. Your email address will not be published.
Summary of the article: What is DOM? Information in the XML DOM is organized in a hierarchy that allows developer to navigate around the hierarchy looking for specific information.
Change your preferences any time. Stack Overflow for Teams is a private, secure spot for you and your coworkers to find and share information. I am asking this question because I primarily worked in. I read tutorials online but I am unable to make sense of the whole picture. I know that it is an API! In general terms a DOM is a model for a structured document.
DOM (Document Object Model)
That's where the DOM comes in. Although HTML 4 is not "well formed", browsers build an internal representation of the page with the "body" element at its top and plenty of html tags below, in a hierarchical organisation child nodes, parent nodes attributes etc. The W3C stepped in to allow smaller browser vendors to enter the competition and endeavoured to standardised the DOM.
All it did was just to introduce another dialect and as everybody knows it took years and two serious competitors to force MS to comply with the standards. HTML made obvious the disadvantages of showing leniency towards the "well-formedness" of documents and this ushered a new craze : XML.
Developing a SAX parser is not straightforward but is a low footprint solution. However you have to develop a specific one for each new document type So it was not long before libraries started to appear to parse any document and build an in-memory map of its hierarchy.
A DOM is a general concept applicable to any document, especially those the vast majority of them do showing a hierarchical structure in which you need to navigate. It is used in any place where you interact with the elements of a web page any element - style, text, attributes, etc.
If you are programming. NET it is important if you are doing web-based work. If you are doing application programming, it's not as important. The DOM is definitely not a thing of the past - it is used and worked within every day by many developers. With that said, there has been work towards standardization of the DOM across web browsers. Again, libraries can help hide these differences.
In the first place, Legacy DOM was limited in the kinds of elements that could be accessed. In the same vein, the nodes of every document are organized in a tree structure, called the DOM tree.
Such that it automatically parses it to display the page on screen. When a web page is loaded, the browser creates a Document Object Model of the page, which is an object oriented representation of an HTML document.
Since DOM supports navigation in any direction and allows for arbitrary modifications. Correspondingly, an implementation must at least buffer the document that has been read so far. Others, including Blink, WebKit, and Gecko. The different layout engines implement the DOM standards to varying degrees of compliance. Many browsers extend the standard, so care must be exercised when using them on the web where documents may be accessed by various browsers with different DOMs.
The programming interface is the properties and methods of each object.