[html5] r3432 - [e] (0) Elaborate on attributes and DOM trees in the intro section.
whatwg at whatwg.org
whatwg at whatwg.org
Thu Jul 16 17:57:04 PDT 2009
Author: ianh
Date: 2009-07-16 17:57:02 -0700 (Thu, 16 Jul 2009)
New Revision: 3432
Modified:
index
source
Log:
[e] (0) Elaborate on attributes and DOM trees in the intro section.
Modified: index
===================================================================
--- index 2009-07-17 00:39:25 UTC (rev 3431)
+++ index 2009-07-17 00:57:02 UTC (rev 3432)
@@ -1419,6 +1419,7 @@
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
+ <!-- this is a comment -->
</body>
</html></pre>
@@ -1428,8 +1429,8 @@
certain cases be <a href=#syntax-tag-omission title=syntax-tag-omission>omitted</a>
and are implied by other tags.)</p>
- <p>Tags have to be nested correctly, so that elements do not
- partially overlap each other:</p>
+ <p>Tags have to be nested such that elements are all completely
+ within each other, without overlapping:</p>
<pre class=bad><p>This is <em>very <strong>wrong</em>!</strong></p></pre>
<pre><p>This <em>is <strong>correct</strong>.</em></p></pre>
@@ -1446,19 +1447,38 @@
<p><a href=#syntax-attributes title=syntax-attributes>Attributes</a> are placed
inside the start tag, and consist of a <a href=#syntax-attribute-name title=syntax-attribute-name>name</a> and a <a href=#syntax-attribute-value title=syntax-attribute-value>value</a>, separated by an "<code title="">=</code>" character. The attribute value can be left
- unquoted if it is a keyword, but generally will be quoted. (The
- value can also be omitted altogether if it is empty.)</p>
+ unquoted if it is a keyword. Otherwise, it has to be quoted using
+ either single or double quotes. The value, along with the "<code title="">=</code>" character, can be omitted altogether if the value
+ is the empty string.</p>
- <p>The tree formed by an HTML document in this way is turned into a
+ <pre><!-- empty attributes -->
+<input name=address disabled>
+<input name=address disabled="">
+
+<!-- attributes with a value -->
+<input name=address maxlength=200>
+<input name=address maxlength='200'>
+<input name=address maxlength="200"></pre>
+
+ <hr><p>The tree formed by an HTML document in this way is turned into a
DOM tree when parsed. This DOM tree can then be manipulated from
scripts. Since DOM trees are the "live" representation of an HTML
document, this specification is mostly phrased in terms of DOM
trees, instead of the serialisation described above.</p>
- <p>Each element in the DOM tree is represented by an object, and
+ <p>The markup snippet at the top of this section represents the
+ following DOM tree:</p>
+
+ <ul class=domTree><li class=t10>DOCTYPE: <code><a href=#the-html-element>html</a></code><li class=t1><code><a href=#the-html-element>html</a></code><ul><li class=t1><code><a href=#the-head-element>head</a></code><ul><li class=t3><code>#text</code>: <span title="">⏎␣␣</span><li class=t1><code><a href=#the-title-element>title</a></code><ul><li class=t3><code>#text</code>: <span title="">Sample page</span></ul><li class=t3><code>#text</code>: <span title="">⏎␣</span></ul><li class=t3><code>#text</code>: <span title="">⏎␣</span><li class=t1><code><a href=#the-body-element>body</a></code><ul><li class=t3><code>#text</code>: <span title="">⏎␣␣</span><li class=t1><code><a href=#the-h1,-h2,-h3,-h4,-h5,-and-h6-elements>h1</a></code><ul><li class=t3><code>#text</code>: <span title="">Sample page</span></ul><li class=t3><code>#text</code>: <span title="">⏎␣␣</span><li class=t1><code><a href=#the-p-element>p</a></code><ul><li class=t3><code>#text</code>: <span title="">This is a </span><li class=t1><code><a href=#the-a-element>a</a></code> <span class=t2 title=""><code class="attribute name">href</code>="<code class="attribute value">demo.html</code>"</span><ul><li class=t3><code>#text</code>: <span title="">simple</span></ul><li class=t3><code>#text</code>: <span title=""> sample.</span></ul><li class=t3><code>#text</code>: <span title="">⏎␣␣</span><li class=t8><code>#comment</code>: <span title=""> this is a comment </span><li class=t3><code>#text</code>: <span title="">⏎␣⏎</span></ul></ul></ul><p>There are many more text nodes in the DOM tree than one would
+ initially expect, because the source contains a number of spaces
+ (presented by "␣") and line breaks ("⏎") that all end
+ up as text nodes in the DOM.</p>
+
+ <hr><p>Each element in the DOM tree is represented by an object, and
thus objects have APIs so that they can be manipulated. For
- instance, a link can have its "<code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>" attributed changed in
- several ways:</p>
+ instance, a link (e.g. the <code><a href=#the-a-element>a</a></code> element in the tree above)
+ can have its "<code title=attr-hyperlink-href><a href=#attr-hyperlink-href>href</a></code>"
+ attributed changed in several ways:</p>
<pre>var a = <a href=#htmldocument title=HTMLDocument>document</a>.<a href=#dom-document-links title=dom-document-links>links</a>[0]; // obtain the first link in the document
a.<a href=#dom-a-href title=dom-a-href>href</a> = 'sample.html'; // change the destination URL of the link
Modified: source
===================================================================
--- source 2009-07-17 00:39:25 UTC (rev 3431)
+++ source 2009-07-17 00:57:02 UTC (rev 3432)
@@ -416,6 +416,7 @@
<body>
<h1>Sample page</h1>
<p>This is a <a href="demo.html">simple</a> sample.</p>
+ <!-- this is a comment -->
</body>
</html></pre>
@@ -427,8 +428,8 @@
certain cases be <span title="syntax-tag-omission">omitted</span>
and are implied by other tags.)</p>
- <p>Tags have to be nested correctly, so that elements do not
- partially overlap each other:</p>
+ <p>Tags have to be nested such that elements are all completely
+ within each other, without overlapping:</p>
<pre class="bad"><p>This is <em>very <strong>wrong</em>!</strong></p></pre>
<pre><p>This <em>is <strong>correct</strong>.</em></p></pre>
@@ -449,20 +450,45 @@
title="syntax-attribute-name">name</span> and a <span
title="syntax-attribute-value">value</span>, separated by an "<code
title="">=</code>" character. The attribute value can be left
- unquoted if it is a keyword, but generally will be quoted. (The
- value can also be omitted altogether if it is empty.)</p>
+ unquoted if it is a keyword. Otherwise, it has to be quoted using
+ either single or double quotes. The value, along with the "<code
+ title="">=</code>" character, can be omitted altogether if the value
+ is the empty string.</p>
+ <pre><!-- empty attributes -->
+<input name=address disabled>
+<input name=address disabled="">
+
+<!-- attributes with a value -->
+<input name=address maxlength=200>
+<input name=address maxlength='200'>
+<input name=address maxlength="200"></pre>
+
+ <hr>
+
<p>The tree formed by an HTML document in this way is turned into a
DOM tree when parsed. This DOM tree can then be manipulated from
scripts. Since DOM trees are the "live" representation of an HTML
document, this specification is mostly phrased in terms of DOM
trees, instead of the serialisation described above.</p>
+ <p>The markup snippet at the top of this section represents the
+ following DOM tree:</p>
+
+ <ul class="domTree"><li class="t10">DOCTYPE: <code>html</code></li><li class="t1"><code>html</code><ul><li class="t1"><code>head</code><ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span></li><li class="t1"><code>title</code><ul><li class="t3"><code>#text</code>: <span title="">Sample page</span></li></ul></li><li class="t3"><code>#text</code>: <span title="">⏎␣</span></li></ul></li><li class="t3"><code>#text</code>: <span title="">⏎␣</span></li><li class="t1"><code>body</code><ul><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span></li><li class="t1"><code>h1</code><ul><li class="t3"><code>#text</code>: <span title="">Sample page</span></li></ul></li><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span></li><li class="t1"><code>p</code><ul><li class="t3"><code>#text</code>: <span title="">This is a </span></li><li class="t1"><code>a</code> <span title="" class="t2"><code class="attribute name">href</code>="<code class="attribute value">demo.html</code>"</span><ul><li class="t3"><code>#text</code>: <span title="">simple</span></li></ul></li><li class="t3"><code>#text</code>: <span title=""> sample.</span></li></ul></li><li class="t3"><code>#text</code>: <span title="">⏎␣␣</span></li><li class="t8"><code>#comment</code>: <span title=""> this is a comment </span></li><li class="t3"><code>#text</code>: <span title="">⏎␣⏎</span></li></ul></li></ul></li></ul>
+
+ <p>There are many more text nodes in the DOM tree than one would
+ initially expect, because the source contains a number of spaces
+ (presented by "␣") and line breaks ("⏎") that all end
+ up as text nodes in the DOM.</p>
+
+ <hr>
+
<p>Each element in the DOM tree is represented by an object, and
thus objects have APIs so that they can be manipulated. For
- instance, a link can have its "<code
- title="attr-hyperlink-href">href</code>" attributed changed in
- several ways:</p>
+ instance, a link (e.g. the <code>a</code> element in the tree above)
+ can have its "<code title="attr-hyperlink-href">href</code>"
+ attributed changed in several ways:</p>
<pre>var a = <span title="HTMLDocument">document</span>.<span title="dom-document-links">links</span>[0]; // obtain the first link in the document
a.<span title="dom-a-href">href</span> = 'sample.html'; // change the destination URL of the link
More information about the Commit-Watchers
mailing list