Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

190 lines (93 sloc) 9.003 kB
<!doctype html>
<!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>DOM, ECMAScript and other puzzles | Divya Manian</title>
<meta name="author" content="Divya Manian">
<meta name="description" content="I have for a long time pretended to know exactly what DOM, ECMAScript, JScript, DHTML, etc. mean, just to sound cool, but took this weekend to read &hellip;">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="canonical" href="http://nimbupani.github.com/dom-ecmascript-and-other-puzzles.html">
<link href="/stylesheets/screen.css" rel="stylesheet">
<link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
<link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
</head>
<body >
<div class="container">
<div class="content">
<header role="banner"> <h1><a href="/">Divya Manian</a></h1>
<h2><a class="twitter" href="https://twitter.com/divya">twitter</a> <a class="rss" href="http://feeds.feedburner.com/nimbupani">RSS Feed</a> <a class="youtube" href="http://youtube.com/nimbupani">Youtube Channel</a> <a class="github" href="https://github.com/nimbupani">Github</a></h2>
</header>
<nav class="sitenav"><a href="/">Home</a>
<a href="/archives">Archives</a>
<a href="/about.html">About</a>
</nav>
<article>
<nav class="article">
<a class="previous" href="/it-is-not-the-users-fault.html" title="It is not the User's Fault">&#x276C;</a>
<a class="next" href="/an-introduction-to-sass-and-compass.html" title="An Introduction to Sass and Compass">&#x276D;</a>
</nav>
<header>
<time datetime="2010-03-22T00:00:00+05:30" pubdate><span class='month'>Mar</span> <span class='day'>22</span> <span class='year'>2010</span></time>
<h1 class="entry-title"><a href="/dom-ecmascript-and-other-puzzles.html">DOM, ECMAScript and other puzzles</a></h1>
</header>
<div class="entry-content"><p>I have for a long time pretended to know exactly what <abbr title="Document Object Model">DOM</abbr>, ECMAScript, JScript, DHTML, etc. mean, just to sound cool, but took this weekend to read up on what they mean and how they are related.</p>
<p></p>
<p>This is how the <a href="http://www.w3.org/TR/DOM-Level-2-Core/introduction.html">DOM specification</a> defines a DOM:</p>
<blockquote><p>The Document Object Model (DOM) is an application programming interface (API) for valid HTML and well-formed XML documents. It defines the logical structure of documents and the way a document is accessed and manipulated.</p></blockquote>
<p>In other words, DOM is a standard way to let programming languages interact with HTML/XML documents. W3C provides, what is called, language bindings, for Java, and ECMAScript. This means, the functionalities defined in the DOM specification have been implemented in these languages.</p>
<p><a href"http://en.wikipedia.org/wiki/ECMAScript">ECMAScript</a> is a standardization of the cave-men scripting languages - Netscape’s <a href="http://en.wikipedia.org/wiki/JavaScript">JavaScript</a>, and Microsoft’s <a href="http://en.wikipedia.org/wiki/JScript">JScript</a> so that all browsers can understand instructions written using ECMAScript. Now, there are three major &ldquo;dialects&rdquo; of ECMAScript: JavaScript (Firefox/Chrome/Safari), JScript (IE), and ActionScript (Adobe Flash/Flex). These are called dialects as they support code written before standardisation and provide some features not available in ECMAScript or other dialects. </p>
<p>A browser provides an implementation of the DOM interfaces that allows ECMAScript (or supported dialects) to interact with the DOM of a HTML/XML document. So, most decent browsers release conformance statements to say which ECMAScript Standard each version of their browser supports. </p>
<p>The DOM of a HTML page has a &ldquo;tree-like&rdquo; structure when visualized. It is important to note that the DOM does not represent the content of the HTML but only represents objects through which the content can be accessed. These objects are modelled after the markup that exists on the HTML page. The relationships, functions, behaviors and attributes of these objects are identified by the DOM.</p>
<p></p>
<p>That is it! You typically do not need to know about DOM interfaces if you work primarily with a JavaScript library. But if you are interested, Quirksmode has a <a href="http://www.quirksmode.org/dom/intro.html">great introduction to DOM</a>.</p>
</div>
<footer>
<p class="meta">This post was posted by
<a href="/about.html">Divya Manian</a>
on
<time datetime="2010-03-22T00:00:00+05:30" pubdate><span class='month'>Mar</span> <span class='day'>22</span> <span class='year'>2010</span></time> in
<span class="categories">
<a class='category' href='/categories/web-development/'>Web Development</a>
</span>
. If you would like to update this post, <a href="https://github.com/nimbupani/nimbupani.github.com/blob/source/source/_posts/2010-03-22-dom-ecmascript-and-other-puzzles.md">please send a pull request</a>.
</p>
</footer>
</article>
<section>
<h1>Comments</h1>
<div id="disqus_thread" aria-live="polite"><noscript>Please enable JavaScript to view the <a href="http://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
</div>
</section>
</div>
</div>
<aside id="articles">
<p><img class="avatar" src="http://a2.twimg.com/profile_images/1696865113/me_normal" height=48> <a href="http://twitter.com/divya">Divya Manian</a> lives in SF. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><li><a href="/diversity-in-conferences.html">Diversity in Conferences</a></li><li><a href="/using-decimal-percentage-values-in-responsive-design.html">Using decimal percentage values in responsive design</a></li><li><a href="/using-background-clip-for-text-with-css-fallback.html">Using background clip for text with CSS fallback</a></li><li><a href="/markup-free-icon-fonts-with-unicode-range.html">Markup-free icon fonts using unicode-range</a></li><li><a href="/jscamp-css-next.html">JSCamp: CSS Next</a></li><li><a href="/some-updates.html">Some Updates</a></li><li><a href="/css-object-model.html">CSS Object Model</a></li><li><a href="/fake-bolding-of-web-fonts.html">Fake Bolding of Web Fonts</a></li><li><a href="/html5please-api.html">Html5please API</a></li><li><a href="/html5please.html">html5please</a></li><li><a href="/mustache.html">mustache, hogan, handlebars</a></li><li><a href="/redesign-notes.html">Redesign Notes</a></li><li><a href="/summary-of-various-exciting-css-drafts-and-proposals.html">Summary of various exciting CSS drafts and proposals</a></li><li><a href="/this-revolution-needs-new-revolutionaries.html">This revolution needs new revolutionaries</a></li><li><a href="/some-css-transition-hacks.html">Some CSS Transition hacks</a></li><li><a href="/safe-css-defaults.html">Safe CSS Defaults</a></li><li><a href="/unplugged-2011.html">Unplugged 2011</a></li><li><a href="/bokeh-with-css3-gradients.html">Bokeh with CSS3 Gradients</a></li><li><a href="/making-pure-css3-demos-better.html">Making "Pure CSS3" demos better</a></li><li><a href="/web-opener-at-opera.html">Web Opener at Opera</a></li><li><a class="btn" href="/categories/web-development/">More</a></li></ul>
</aside>
<footer role="contentinfo"><p>
Copy to your heart’s content 2013 - Divya Manian -
<span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
</p>
</footer>
<script type="text/javascript">
var disqus_shortname = 'nimbublog';
var disqus_developer = 1;
var disqus_url = 'http://nimbupani.com/dom-ecmascript-and-other-puzzles.html';
var disqus_identifier = 'http://nimbupani.com/dom-ecmascript-and-other-puzzles.html';
(function () {
var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
(document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
}());
</script>
<script src="/javascripts/octopress.js"></script>
<script>
var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
(function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
s.parentNode.insertBefore(g,s)}(document,'script'));
</script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.