Permalink
Switch branches/tags
Nothing to show
Find file
Fetching contributors…
Cannot retrieve contributors at this time
190 lines (93 sloc) 8.63 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">❬</a>
<a class="next" href="/an-introduction-to-sass-and-compass.html" title="An Introduction to Sass and Compass">❭</a>
</nav>
<header>
<time datetime="2010-03-22T00:00:00-07:00" 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-07:00" 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="/assets/divya.png" height=50> <a href="http://twitter.com/divya">Divya Manian</a> is a Web Developer in Seattle. <a href="/about.html">More about me ❭</a></p>
<h2>Posts on Web Development</h2>
<ul><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 href="/current-color-in-css.html">Current Color in CSS</a></li><li><a href="/css-vocabulary.html">CSS Vocabulary</a></li><li><a href="/active-web-development.html">Active Web Development</a></li><li><a href="/sexy-css3-buttons.html">Sexy CSS3 Buttons</a></li><li><a href="/accessible-css-barcharts.html">Accessible CSS Barcharts</a></li><li><a href="/svg-is-coming.html">SVG is coming!</a></li><li><a href="/wee-marquee.html">Wee! Marquee</a></li><li><a href="/vignettes-with-css3-box-shadows.html">Vignettes with CSS3 Box Shadows</a></li><li><a href="/drop-shadows-with-css3.html">Drop Shadows with CSS3</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 2012 - 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>