What is the meaning of DOM element in the following statements?
Statement #1
You can add multiple classes to a single 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.
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
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
If the statements are in the context of how CSS affects HTML then DOM element refers to an HTML element.
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.
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.