What is DOM element?

Dom Problem Overview

What is the meaning of DOM element in the following statements?

> You can add multiple classes to a > single DOM element.

> The -- point is that inheritance in > CSS is done not through classes, but > through element hierarchies. So to > model inherited traits you need to > apply them to different levels of > elements in the DOM.

I know that DOM stands for Domain Object Model. It seems to be synonym to API in the statements.

Dom Solutions

Solution 1 - Dom

Document object model.
The DOM is the way Javascript sees its containing pages' data. It is an object that includes how the HTML/XHTML/XML is formatted, as well as the browser state.

A DOM element is something like a DIV, HTML, BODY element on a page. You can add classes to all of these using CSS, or interact with them using JS.

Solution 2 - Dom

It's actually Document Object Model. HTML is used to build the DOM which is an in-memory representation of the page (while closely related to HTML, they are not exactly the same thing). Things like CSS and Javascript interact with the DOM.

Solution 3 - Dom

If the statements are in the context of how CSS affects HTML then DOM element refers to an HTML element.

Solution 4 - Dom

To find out concept of DOM element it is essential to understand concept of Dynamic HTML and DOM. Everything is started from the time that requirements of all stockholders of web pages are enhanced. They wanted the Web pages that can be more interactive, dynamic and lively. In addition, to reach this goal, developers required the tools and mechanisms that via them the presentation and content of each section of web page can be modified or manipulated. Therefore the concept of Dynamic HTML is created. To understand it, a great definition for Dynamic HTML is accessible in Wikipedia:

> Dynamic HTML, or DHTML, is an umbrella term for a collection of > technologies used together to create interactive and animated websites > by using a combination of a static markup language (such as HTML), a > client-side scripting language (such as JavaScript), a presentation > definition language (such as CSS), and the Document Object Model > (DOM).

So, writing standard DHTML web pages are standardized in three fields, including client-side scripting language (such as JavaScript), a presentation definition language (such as CSS) and uniform programming interface(API) to access and modify the Web page (Document Object Model). This activity is performed by W3C and others. Also to solve the problem of cross browser, W3C tried to reach a general consensus (with different browser vendors) about scripts to access and manipulate HTML and XML documents via Document Object Model (DOM) as a standard application programming interface (API).

But the main question is that how they designed the structure of Document Object Model to meet their needs. Their solution was simple but wonderful. They used a hierarchical structure such as tree which at the root of the tree you can find document object, also each node is equivalent of a HTML elements (DOM element). This abstraction of your web page give you a great facility to access any HTML element, style sheets, and ... . To understand it better you can map each indent of your HTML code to each level of DOM tree. Please pay attention to this example:

Your HTML:

<!DOCTYPE html>
<html>
	<head>
	</head>
	<body>
		<p>...</p>
		<ul>
			<li>...</li>
		</ul>
		<table>
			<tr>...</tr>
		</table>
	</body>
</html>

DOM Structure:

    document
      |    .    
    <html>    .
    /   \         .
 <head> <body>  styleSheets
        /  \  \
      <p> <ul> <table>
      /     \       \
    text    <li>    <tr>

So, each node of this hierarchical structure (DOM tree) refers to a DOM element. To learn more use tis reference

Solution 5 - Dom

Document Object Model (DOM), a programming interface specification being developed by the World Wide Web Consortium (W3C), lets a programmer create and modify HTML pages and XML documents as full-fledged program objects.

Solution 6 - Dom

DOM stands for Document Object Model. It is the W3C(World Wide Web Consortium) Standard. It define standard for accessing and manipulating HTML and XML document and The elements of DOM is head,title,body tag etc. So the answer of your first statement is

Statement #1 You can add multiple classes to a single DOM element.

Explanation : "div class="cssclass1 cssclass2 cssclass3"

Here

tag is element of DOM and i have applied multiple classes to DOM element.

Solution 7 - Dom

As per W3C: DOM permits programs and scripts to dynamically access and update the content, structure and style of XML or HTML documents.

DOM is composed of:

set of objects/elements
a structure of how these objects/elements can be combined
and an interface to access and modify them

cheers

Solution 8 - Dom

DOM (Document Object Model) is a standard for accessing documents.

'When a web page is loaded, the browser creates a Document Object Model of the page.'

it's divided into 3 parts:

- Core DOM - standard model for all document types
- XML DOM - standard model for XML documents
- HTML DOM - standard model for HTML documents

To learn more, see:http://www.w3schools.com/js/js_htmldom.asp

Solution 9 - Dom

See that your statements refer to "elements of the DOM", which are things such as the HTML tags (A, INPUT, etc). Thse statements simply mean that multiple CSS classes may be assigned to one such element.

Solution 10 - Dom

DOM is a logical model that can be implemented in any convenient manner.It is based on an object structure that closely resembles the structure of the documents it models.

For More Information on DOM : Click Here

Solution 11 - Dom

When a web page is loaded, the browser creates a Document Object Model of the page.

The HTML DOM model is constructed as a tree of Objects:

With the object model, JavaScript gets all the power it needs to create dynamic HTML:

JavaScript can change all the HTML elements in the page
JavaScript can change all the HTML attributes in the page
JavaScript can change all the CSS styles in the page
JavaScript can remove existing HTML elements and attributes
JavaScript can add new HTML elements and attributes
JavaScript can react to all existing HTML events in the page
JavaScript can create new HTML events on the page

source

Content Type	Original Author	Original Content on Stackoverflow
Question	Léo Léopold Hertz 준영	View Question on Stackoverflow
Solution 1 - Dom	Ian Elliott	View Answer on Stackoverflow
Solution 2 - Dom	geofflane	View Answer on Stackoverflow
Solution 3 - Dom	Martin Liversage	View Answer on Stackoverflow
Solution 4 - Dom	MMKarami	View Answer on Stackoverflow
Solution 5 - Dom	ist_lion	View Answer on Stackoverflow
Solution 6 - Dom	Ram Ch. Bachkheti	View Answer on Stackoverflow
Solution 7 - Dom	Arnkrishn	View Answer on Stackoverflow
Solution 8 - Dom	senior	View Answer on Stackoverflow
Solution 9 - Dom	Otávio Décio	View Answer on Stackoverflow
Solution 10 - Dom	Reetika	View Answer on Stackoverflow
Solution 11 - Dom	Asyraf	View Answer on Stackoverflow