Grouping Content Elements in DOM
HTML Grouping and Sectioning Content Elements in DOM – Part 1
Foreword: In this part of the series I talk about HTML grouping content elements in DOM.
By: Chrysanthus Date Published: 5 Aug 2015
Introduction
So, some grouping elements have internal elements. The grouping elements and internal elements are of grouping content.
Pre-Knowledge
At the bottom of this page, you will find links to the series you should have read before coming here. This series is part of the volume, DOM for HTML.
Review of HTMLElement Interface
All HTML elements use the HTMLElement interface directly or indirectly. An element would use the interface indirectly if it uses an interface derived (inherited) from the HTMLElement interface. In the HTML5 specification, the HTMLElement Interface is written as follows:
interface HTMLElement : Element {
// metadata attributes
attribute DOMString title;
attribute DOMString lang;
attribute boolean translate;
attribute DOMString dir;
readonly attribute DOMStringMap dataset;
// user interaction
attribute boolean hidden;
void click();
attribute long tabIndex;
void focus();
void blur();
attribute DOMString accessKey;
readonly attribute DOMString accessKeyLabel;
attribute DOMString contentEditable;
readonly attribute boolean isContentEditable;
attribute boolean spellcheck;
};
The first line in the code indicates that the HTMLElement interface is derived (inherited) from the Element interface. I will not talk about the Element interface in this series.
I talked about these attributes and methods of the HTMLElement interface in the previous series. What you should note here is that all grouping content elements have these attributes and methods.
All grouping content elements have the attributes and methods of the HTMLElement interface. I talk about these attributes and methods in the previous series; and I will not repeat them in this series. However, the blockquote, ol and li HTML elements, each has extra attributes, which I talk about for the rest of this tutorial.
The HTMLQuoteElement Interface
The HTMLQuoteElement interface inherits from the HTMLElement interface, and it is written as:
interface HTMLQuoteElement : HTMLElement {
attribute DOMString cite;
};
This interface is for the blockquote HTML element. It has an extra attribute called, cite. If the cite attribute is present, its value in HTML coding is the URL to the source (web page) of the quotation. This value is not clickable by the user. However, it is there to be used by DOM (and ECMAScript). An example HTML code with the cite attribute is:
<blockquote cite=http://en.wikipedia.org/wiki/John_Smith id=Q1>
The boys recognize themselves in their commodities; they find their
soul in their automobile, hi-fi set, split-level home, kitchen equipment.
</blockquote>
For the DOM, the value of this attribute can be set (changed) or gotten (read). In the following ECMAScript statement, the value is gotten (read) into the variable, citeValue:
citeValue = document.getElementById('Q1').cite;
The HTMLLIElement Interface
The HTMLLIElement interface inherits from the HTMLElement interface, and it is written as:
interface HTMLLIElement : HTMLElement {
attribute long value;
};
This interface is for the li HTML element of the ol list (not the ul list). ol means Ordered List, while ul means Unordered List. The interface has an extra attribute called, value. The value attribute can be present or absent. If present, then it is an integer (whole number) identifying the position of the li element in the ol list. Consider the following HTML code for the best selling top 10 movies, counting downward:
<figure>
<figcaption>The top 10 movies of all time</figcaption>
<ol>
<li value="10"><cite>Josie and the Pussycats</cite>, 2001</li>
<li value="9"><cite lang="sh">Црна мачка, бели мачор (Foriegn)</cite>, 1998</li>
<li value="8"><cite>A Bug's Life</cite>, 1998</li>
<li value="7"><cite>Toy Story</cite>, 1995</li>
<li value="6"><cite>Monsters, Inc</cite>, 2001</li>
<li value="5" id=L5><cite>Cars</cite>, 2006</li>
<li value="4"><cite>Toy Story 2</cite>, 1999</li>
<li value="3"><cite>Finding Nemo</cite>, 2003</li>
<li value="2"><cite>The Incredibles</cite>, 2004</li>
<li value="1"><cite>Ratatouille</cite>, 2007</li>
</ol>
</figure>
This example has been copied from the HTML5 specification. Note the use of the figure, figcaption, and cite elements, as well as the value attributes.
For the DOM, the value attribute can be set or gotten. The following statement reads the value of the value attribute of the element whose ID is L5, into the variable, val:
val = document.getElementById('L5').value;
The HTMLOListElement interface inherits from the HTMLElement interface, and it is written as:
interface HTMLOListElement : HTMLElement {
attribute boolean reversed;
attribute long start;
attribute DOMString type;
};
This interface is for the ol HTML element (not the ul elemet). The extra attributes are reversed, start and type.
The reversed attribute is Boolean, meaning its presence is true and its absence is false. Its presence effectively means, “number the list in reversed ordering”, while its absence means, “number the list in normal (forward) ordering”. The above HTML code (top ten movies counting downward) could have been written as follows and would still be correct:
<figure>
<figcaption>The top 10 movies of all time</figcaption>
<ol reversed>
<li><cite>Josie and the Pussycats</cite>, 2001</li>
<li><cite lang="sh">Црна мачка, бели мачор (Foriegn)</cite>, 1998</li>
<li><cite>A Bug's Life</cite>, 1998</li>
<li><cite>Toy Story</cite>, 1995</li>
<li><cite>Monsters, Inc</cite>, 2001</li>
<li id=L5><cite>Cars</cite>, 2006</li>
<li><cite>Toy Story 2</cite>, 1999</li>
<li><cite>Finding Nemo</cite>, 2003</li>
<li><cite>The Incredibles</cite>, 2004</li>
<li><cite>Ratatouille</cite>, 2007</li>
</ol>
</figure>
However, there is a problem here. Since the value attribute is absent, the statement,
val = document.getElementById('L5').value;
returns zero, even though an integer was displayed at the browser.
Note that the reversed attribute has been typed in the ol start tag and not in any li start tag.
<ol start=4>
<li>Geography</li>
<li>History</li>
<li>English Language</li>
</ol>
and the display will be:
4.Geography
5.History
6.English Language
The numbering has started from 4, which is the value of the start attribute. Note that the start attribute has been typed in the ol start tag and not in any li start tag.
For the DOM, the start attribute can be set or gotten. The following statement reads the value of the start attribute of the OL element with ID of OL1, into the variable, val:
val = document.getElementById('OL1').start;
The type attribute is for the type of numbering. The different possible values for the type attribute are:
Value Description
decimal Decimal numbers
lower-alpha Lowercase latin alphabet
upper-alpha Uppercase latin alphabet
lower-roman Lowercase roman numerals
upper-roman Uppercase roman numeral
An HTML code example is:
<ol type=upper-alpha id=OL1>
<li>Geography</li>
<li>History</li>
<li>English Language</li>
</ol>
Note that the type attribute has been typed in the ol start tag and not in any li start tag.
For the DOM, the type attribute can be set or gotten. The following statement reads the value of the type attribute of the OL element with ID of OL1, into the variable, val:
val = document.getElementById('OL1').type;
And that is it for this part of the series. We take a break and continue in the next part.
Chrys
Related Links
DOM Basics for HTMLDOM Event Basics for HTML
HTML Text and Other Elements in DOM
HTML Grouping and Sectioning Content Elements in DOM
DOM and HTML Embedded Content
HTML Canvas 2D Context
More Related Links
PurePerl MySQL API
Major in Website Design
Web Development Course
Producing a Pure Perl Library
NEXT