Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Newer
Older
100644 190 lines (93 sloc) 8.835 kB
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
1
2 <!doctype html>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
3 <!--[if lt IE 9]> <html class="no-js oldie" lang="en"> <![endif]-->
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
4 <head>
5 <meta charset="utf-8">
6 <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
7 <title>DOM, ECMAScript and other puzzles | Divya Manian</title>
8 <meta name="author" content="Divya Manian">
9
10 <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;">
11
12
13 <meta name="viewport" content="width=device-width, initial-scale=1">
14
15
16 <link rel="canonical" href="http://nimbupani.github.com/dom-ecmascript-and-other-puzzles.html">
17 <link href="/stylesheets/screen.css" rel="stylesheet">
8f21f85 Site updated at 2011-12-11 02:10:56 UTC
Divya Manian authored
18 <link href="http://feeds.feedburner.com/nimbupani" rel="alternate" title="Subscribe" type="application/atom+xml">
19 <link href="http://feeds.feedburner.com/nimbu" rel="alternate" title="Subscribe to Web Development updates" type="application/atom+xml">
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
20
21 </head>
22
23
cd5e6a9 Site updated at 2011-12-24 06:16:39 UTC
Divya Manian authored
24 <body >
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
25 <div class="container">
26 <div class="content">
27 <header role="banner"> <h1><a href="/">Divya Manian</a></h1>
28
69c30f5 Site updated at 2011-12-11 14:45:02 UTC
Divya Manian authored
29 <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>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
30
31 </header>
9d25e1e Site updated at 2011-12-11 01:21:19 UTC
Divya Manian authored
32 <nav class="sitenav"><a href="/">Home</a>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
33 <a href="/archives">Archives</a>
34 <a href="/about.html">About</a>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
35 </nav>
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
36
37
38
39
40
41
42
43
44 <article>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
45 <nav class="article">
46
47 <a class="previous" href="/it-is-not-the-users-fault.html" title="It is not the User's Fault">❬</a>
48
49
50 <a class="next" href="/an-introduction-to-sass-and-compass.html" title="An Introduction to Sass and Compass">❭</a>
51
52
53
54 </nav>
55 <header>
56
57
58
59
60
61
62
63 <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>
64
65 <h1 class="entry-title"><a href="/dom-ecmascript-and-other-puzzles.html">DOM, ECMAScript and other puzzles</a></h1>
66
67
68
69
70 </header>
71 <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>
72
73
74 <p></p>
75
76 <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>
77
78
79
80
81 <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>
82
83
84
85
86 <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>
87
88
89
90
91 <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>
92
93
94
95
96 <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>
97
98
99
100
101 <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>
102
103
104 <p></p>
105
106 <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>
107 </div>
108
109 <footer>
110 <p class="meta">This post was posted by
111
112
113 <a href="/about.html">Divya Manian</a>
114 on
115
116
117
118
119
120
121 <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
122
123 <span class="categories">
124
125 <a class='category' href='/categories/web-development/'>Web Development</a>
126
127 </span>
128
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
129 . 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>.
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
130 </p>
131 </footer>
132 </article>
133
134 <section>
135 <h1>Comments</h1>
136 <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>
137 </div>
138 </section>
139
140
141 </div>
142 </div>
143 <aside id="articles">
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
144 <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>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
145 <h2>Posts on Web Development</h2>
2cc1469 Site updated at 2012-01-23 12:45:44 UTC
Divya Manian authored
146 <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>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
147 </aside>
148 <footer role="contentinfo"><p>
3c9d77b Site updated at 2012-01-01 19:06:29 UTC
Divya Manian authored
149 Copy to your heart’s content 2012 - Divya Manian -
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
150 <span class="credit">Powered by <a href="http://octopress.org">Octopress</a></span>
151 </p>
152
153
154 </footer>
155
156
157 <script type="text/javascript">
158 var disqus_shortname = 'nimbublog';
159 var disqus_developer = 1;
160
161
162 var disqus_url = 'http://nimbupani.com/dom-ecmascript-and-other-puzzles.html';
163 var disqus_identifier = 'http://nimbupani.com/dom-ecmascript-and-other-puzzles.html';
164
165
166
167
168 (function () {
169 var dsq = document.createElement('script'); dsq.type = 'text/javascript'; dsq.async = true;
170 dsq.src = 'http://' + disqus_shortname + '.disqus.com/embed.js';
171 (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
172 }());
173 </script>
174
175
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
176 <script src="/javascripts/octopress.js"></script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
177
e42f8f2 Site updated at 2011-12-11 00:44:12 UTC
Divya Manian authored
178 <script>
179 var _gaq=[['_setAccount','UA-97188-1'],['_trackPageview']];
180 (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
181 g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
182 s.parentNode.insertBefore(g,s)}(document,'script'));
183 </script>
418c130 Site updated at 2011-12-10 19:57:24 UTC
Divya Manian authored
184
185
186
187
188 </body>
189 </html>
Something went wrong with that request. Please try again.