The Anchor Element in DOM
HTML Text and Other Elements in DOM – Part 3
DOM for HTML
Foreword: In this part of the series, I talk about the attributes and methods proper to the a element.
By: Chrysanthus Date Published: 8 Jul 2015
Introduction
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 HTMLAnchorElement interface inherits from the HTMLElement interface. This means that the HTMLAnchorElement interface has the attributes and methods of the HTMLElement interface, plus its own attributes (and methods).
The attributes (and methods) of any a element node (object in memory) are the same attributes (and methods) of the HTMLAnchorElement interface, but the methods of the node should be defined by the browser.
HTML and DOM Attributes of the a Element
The HTML tag attributes are href, target, download, rel, hreflang and type. The a element in the DOM (HTMLAnchorElement interface) has these same attributes and more attributes. The names of the additional attributes are rev, relList and text.
The a element in DOM (HTMLAnchorElement interface) does not have methods, as you might expect. It has only attributes, which are listed above. I spend the rest of this tutorial talking about the attributes.
The href Attribute
The value of this attribute is a URL. The href attribute (and its value) is not required. This means that the attribute can be absent. However, if it is absent, then the a element will not form a hyperlink. You code the attribute in the HTML tag as follows:
<a href=http://www.site.com/file.htm id=a1>Link Label</a>
In DOM, the href attribute can be gotten (value read) or set (value changed). The following statement would set the attribute:
document.getElementById('a1').href = "http://www.site2.com/file2.htm";
This attribute can have any of the following values: _blank, _self, _parent, _top. I go on to give you an indication of what each of these values mean.
_blank
When the value of target is _blank as in,
<a href="http://www.somesite.com/page.htm" target=_blank id=a1>Name of Resource</a>
the document whose URL is the href value, is opened in a new tab (window).
_self
When the value of target is _self, the document is opened in front of the one that has the hyperlink (a element), in the same tab. You will have to click the Back Button to go to the document that has the hyperlink.
_parent
When the value of target is _parent, the opening can be the same as for _self. I will explain the difference in a different series.
_top
When the value of target is _top, the opening can be the same as for _self. I will explain the difference in a different series.
In DOM, the target attribute can be gotten (value read) or set (value changed). The following statement would set the attribute:
document.getElementById('a1').target = "_self";
_self is a constant (attribute) value in the HTML language but not a constant value in ECMAScript (DOM API) language; that is why it is in quotes in the statement. In HTML it does not have to be in quotes.
The download Attribute
This attribute may or may not have a value. It can be present without a value as in,
<a href="http://www.somesite.com/page.htm" download id=a1>Name of Resource</a>
If present without a value, it means, when the user clicks the hyperlink, the resource will be downloaded and not opened (displayed) by the browser. For example, assume the resource is a normal web page to be opened by the browser. If the attribute is present, the browser will no longer open the web page, and the web page will be downloaded to be saved in the user’s hard disk. If the attribute is absent, the web page will be opened by the browser (automatically).
Now, if the attribute is present and it has a value as in,
download="New Name of file"
the value is the new name that the resource will be saved as.
If the attribute is absent (value is absent too), then the hyperlink will download the resource only if the browser cannot open the resource.
In DOM, the download attribute can be gotten (value read) or set (value changed). The following statement would set the attribute:
document.getElementById('a1').download = "file.ext";
This attribute has a value. Its value is the language (English, French, German, etc.) of the destination resource. This attribute is only for advisory purpose to the browser (it is not really used for anything). If the language is English, the value will be, en. If the language is France the value will be fr. If the language is German, the value will be de. Assume that you have the HTML element,
<a href="http://www.site.com/file.htm" hreflang=fr id=a1>Link Label</a>
then the following code segment will display fr for French.
lang = document.getElementById('a1').hreflang;
alert(lang);
The type Attribute
The type attribute, if present, gives the MIME type of the linked resource. It is purely advisory. I will not say more about this attribute here. I will only talk about it in some other series.
The rel Attribute
The value of this attribute is a string of words separated by spaces. I will not say more about this attribute here. I will only talk about it in some other series.
The relList Attribute
This is a DOM attribute for the a element. It is not an HTML attribute. So you will not see it in the HTML a tag. It is a readonly attribute, so it can only be used to get (read) its value and not to set its value. Its value returned, is an array consisting of the words of the string value of the rel attribute. In the array, each word is in an element.
Assume that you have the following HTML element:
<a href="http://www.site.com/file.htm" rel="alternate author" id=a1>Link Label</a>
the following code segment will display, “altenate” and then “author”, which are the different words of the rel attribute.
arr = document.getElementById('a1').relList;
for (i=0; i<arr.length; ++i)
{
alert(arr[i]);
}
The text Attribute
This is a DOM attribute for the a element. It is not an HTML attribute. So you will not see it in the HTML a tag. This attribute returns all the text of the a element’s content and all the texts of its descendant elements. On setting (changing value) this attribute will replace all the text and all descendant elements including their texts with the given text.
Assume the HTML a element is:
<a href="http://www.site.com/file.htm" id=a1>Link <b>Label</b> One</a>
the following code segment will display “Link Label One”.
txt = document.getElementById('a1').text;
alert(txt);
On setting with the given text, “A Resource”, the following code segment will display “A Resource”, meaning all of “Link <b>Label</b> One” has been replaced by “A Resource”.
document.getElementById('a1').text = "A Resource";
innHT = document.getElementById('a1').innerHTML;
alert(innHT);
The rev Attribute
I will talk about this attribute in some other series.
End of Tutorial and End of Series
Note: for all attributes that can be set, the attribute (and value) does not have to be in the HTML tag before you can set it in DOM (with ECMAScript).
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