HTMLElement Interface and Text Elements
HTML Text and Other Elements in DOM – Part 2
DOM for HTML
Foreword: In this part of the series, I talk about the HTMLElement Interface and Text Elements.
By: Chrysanthus Date Published: 8 Jul 2015
Introduction
Recall
An interface is a set of attributes and undefined methods (functions). The methods are not defined. A software object (ECMAScript object) can use an interface in its creation (instantiation). In the software object, the methods are defined (by the browser).
A defined method is a method that has a body, within curly brackets consisting of statements. An undefined method has just the signature (i.e. return value, name of method and parameter list).
Why HTMLElement Interface
An HTML element in DOM is called a node. HTML elements in DOM are not created arbitrarily. They follow some rules in their creation, and the rules they follow are the particular attributes and undefined methods of the HTMLElement Interface. The HTMLElement interface is a particular set of attributes and undefined methods. Because HTML elements in DOM are created following the HTMLElement interface, we say, an HTML element uses the HTMLElement interface.
Attributes and Methods
The HTMLElement interface inherits from the Element interface. The Element interface has a set of attributes and undefined methods. By inheriting from the Element interface, the HTMLElement interface has the same attributes and undefined methods of the Element interface, plus additional attributes and additional undefined methods.
I talked about the attributes and methods of the Element Interface in the series, titled “DOM Basics for HTML”. You should have read that series before reaching here. The name of the tutorial (article) in that series is “DOM Element Node”. Attributes of the Element Interface I talked about are: localName, tagName, id, className, and attributes. Methods of the Element interface I talked about are: getAttribute(name), setAttribute(name, value), removeAttribute(name), hasAttribute(name), matches(selectors), getElementsByTagName(localName).
The attributes and methods of the Element Interface are also attributes and methods of the HTMLElement interface. So I will not talk about them again in this tutorial. In this tutorial I will only talk about the attributes and methods that are in the HTMLElement interface and not in the Element Interface. The names of the attributes I will talk about in this tutorial are: dataset, hidden, tabindex, tabIndex, accessKey, accessKeyLabel, contentEditable, isContentEditable, and spellcheck. The names of the methods I will talk about in this tutorial are: click(), focus() and blur().
The attributes and methods of the node (object in memory) of any HTML element are the same attributes and methods of the HTMLElement interface, but the methods of the node are defined (implemented) by the browser.
All HTML elements, including text elements, use the HTMLElement interface directly or indirectly. In the illustrations in this tutorial, I use text elements. Remember, the global attributes you saw in the previous part of the series, are applicable to all elements including text elements.
Attributes of the HTMLElement Interface
This is a Boolean attribute, meaning, its presence is true and its absence is false. Its presence means the element (HTML) will be hidden from the viewer (reader) of the web page. Its absence means the element is seen by the viewer of the web page. It is coded in HTML as follows:
<span hidden id=SP3>I love you.</span>
Under this condition, the span element and its content (I love you.) are not seen by the user of the web page. However, ECMAScript (and DOM) will still be able to access the element. You can use DOM to change the value of the attribute as follows:
document.getElementById('SP3').hidden = false;
With this DOM statement, the span element and its content will be seen by the viewer (and still be accessible by software-DOM API).
Note: true and false are constants in ECMAScript, so you do not type them in quotes (you type them as in the above statement).
The hidden attribute is an example of a user interaction attribute.
The tabIndex Attribute
An element (HTML) can be said to have focus. When an element has focus, if you press certain keys on the keyboard, such as the Enter key, the element will cause an action (activate) on the web page. Not all elements can have focus. The following elements are elements that can have focus (you may not know some of them):
- a elements that have an href attribute
- link elements that have an href attribute
- button elements
- input elements whose type attribute are not in the Hidden state
- select elements
- textarea elements
- Editing hosts
- Browsing context containers
I will talk about the elements you do not know here, in a different series.
If you press the tab key on the keyboard, the focus will move to the next focusable element. Pressing the tab key repeatedly, causes the focus to move to different focusable elements. There is a default order for an element to receive focus. However, this order can be changed by giving each focusable element, the tabIndex attribute and an integer (whole number) value beginning from 1. The higher the integer, the later the element will receive focus, when the tab key is pressed. You can code an element with the tabIndex attribute in HTML as follows:
<span tabIndex=3 id=SP3>I love you.</span>
I tried this in my computer and I pressed the tab key many times. When the span element received focus, it developed a dotted rectangular border. You can change the tabIndex value using DOM as follows:
document.getElementById('SP3').tabIndex = 4;
However, you will hardly need to change the tadIndex value using DOM in normal programming.
The accesskey attribute's value is used by the browser as a guide for creating a keyboard shortcut that activates or focuses the element. The value of the attribute is a character (case sensitive). The value has to be in quotes. You can have more than one character. If there is more than one character, then the characters have to be separated by spaces. If there is more than one character, the different characters are alternatives; they do not form a combination.
In the following example (web page), a variety of links are given with access keys so that keyboard users familiar with the site can more quickly navigate to the relevant pages:
<nav>
<p>
<a title="Group Activities" accesskey="A" href="site/Group/activities">Activities</a> |
<a title="Technical Reports and Recommendations" accesskey="T" href="site/TR/">Technical Reports</a> |
<a title="Alphabetical Site Index" accesskey="S" href="site/Group/siteindex">Site Index</a> |
<a title="About This Site" accesskey="B" href="site/Group/">About Group</a> |
<a title="Contact Group" accesskey="C" href="site/Group/contact">Contact</a>
</p>
</nav>
If the user (reader) wants to activate the second link, the shortcut key combination is, Alt+Shift+T. In this case, the CapsLock key on the keyboard has to be on, since the access key is T in uppercase and not lowercase. If you do not want the effect of the CapsLock key, then use lowercase t instead of T.
Using Alt+Shift+T is the same as clicking the second link.
The accessKeyLabel Attribute
The accessKeyLabel attribute must return a string that represents the element's assigned access key, if any. If the element does not have one, then the attribute must return the empty string. Assume that the id of the second link above is, ‘a2’; the following DOM code illustrates how to use DOM to return the assigned access key:
ak = document.getElementById('a2').accessKeyLabel;
alert(document.getElementById('a2').accessKeyLabel);
The accessKeyLabel is actually a key combination. I tried the code in my computer and I had, Alt+Shift+T returned.
The accessKeyLabel attribute is a readonly attribute, you cannot change its value using, DOM.
HTML5 is awesome. HTML 5 gives the reader (user) the possibility to edit the content of an element, such as the span element. This is not of much use in normal programming because the content at the server does not change. However, it can be useful for browser games. All you have to do is to give the element the contentEditable attribute with a value of true. This attribute has three possible constant values, which are true, false and inherit.
If the value is true, the content of the element is editable, by the user. If the value is false (which is the default), then the content of the element is not editable. If the value is inherit, then the element will assume the contentEditable value of the parent element. A constant HTML attribute value does not necessarily have to be in quotes.
Do not confuse between an HTML attribute value and an ECMAScript assigned value. An HTML attribute value is coded in the HTML tag, while an ECMAScript assigned value is assigned to an ECMAScript variable or an ECMAScript expression.
Try the following code and change the word, “love” to “hate” at the browser:
<!DOCTYPE html>
<html>
<head>
<title>Illustration</title>
</head>
<body>
<span contentEditable=true id=SP3>I love you.</span>
</body>
</html>
If you reload (refresh) the page, you will still have “I love you”.
The isContentEditable Attribute
This attribute returns true if the element is editable and false otherwise. Editable here, means if the element has the contentEditable attribute with the value, true. The following statement shows how to use DOM with the isContentEditable attribute:
edSate = document.getElementById('SP3').isContentEditable;
isContentEditable is a readonly attribute, meaning its value cannot be set.
This attribute can have the constant value of true or the constant value of false. true is the default state. This attribute works with the contentEditable attribute. If the value of the contentEditable attribute is true, and if the value of the spellcheck attribute is true, then any wrong spelling (of a word) in the element’s content will be underlined when the element has focus. In HTML, you code the attribute as follows:
<span contentEditable=true spellcheck=true id=SP3>I looove you.</span>
You can use DOM to change the value of the spellcheck attribute as follows:
document.getElementById('SP3').spellcheck = false;
Note: the hidden, tabIndex, accessKey, accessKeyLabel, contentEditable, isContentEditable, and spellcheck are examples of user (reader) interaction attributes.
Methods of the HTMLElement Interface
The names of the HTMLElement methods are: click(), focus() and blur(). All these are user interaction methods.
The click() Method
This method simulates the click event that you actually do with the mouse. When an element is clicked either with the mouse or by using this method, it receives focus. Assume that you have the following HTML tag:
<a href="http://www.site.com/file.htm" id="a2">Link</a>
then the following code in an ECMAScript will activate (click by simulation) the hyperlink.
document.getElementById('a2').click();
The focus() Method
This method forces an element to have focus. Assume that you have the above hyperlink in a document, then the following DOM statement will force the element to have focus:
document.getElementById('a2').focus();
I tried it in my computer and the hyperlink developed a rectangular dotted border as it received focus. Having focus does not mean that the element is activated. While a hyperlink element has focus, if you press the Enter key of the keyboard, the new page will be loaded (the focused element will be activated).
The blur() Method
This method removes focus from an element. To remove focus from the above hyperlink, you will use the following DOM statement:
document.getElementById('a2').blur();
After this, pressing the Enter key, no longer activates the element.
The dataset Attribute of the HTMLElement Interface
This attribute is an example of a metadata attribute. Metadata means data about data. The dataset attribute provides convenient accessors for all the data-* attributes on an HTML element. The data-* attributes are a new set of attributes in HTML, added in HTML5. They enable you to change the type and behavior of an HTML element. Well, I will not say any more about the dataset and the data-* attributes in this section; I will talk about them in detail in a different series. Stay in my blog.
Conclusion
DOM is part of HTML today. The node object or interface has attributes and methods. The Element interface inherits from the node interface. This means that the Element interface has the attributes and methods of the node interface, plus its own attributes and methods. The HTMLElement interface inherits from the Element interface. This means that the HTMLElement interface has the attributes and methods of the Element interface, plus its own attributes and methods.
The attributes proper to the HTMLElement interface are metadata and user interaction attributes. The methods proper to the HTMLElement interface are user interaction methods. Attributes proper to the HTMLElement interface are: dataset, hidden, tabindex, tabIndex, accessKey, accessKeyLabel, contentEditable, isContentEditable, and spellcheck. Methods proper to the HTMLElement interface are: click(), focus() and blur().
Note: The HTMLElement interface is for all HTML elements and not just the text elements.
Time to take a break. We continue in the next part of the series.
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
BACK NEXT