Cookies improve the way our website works, by using this website you are agreeing to our use of cookies. For more information see our privacy policy. OK
WordPress Theme & Editor Syntax Highlighter Blog
WordPress Theme & Editor Syntax Highlighter Forum Blog
You are here: Reference > JavaScript > client-side > HTML DOM > objects > nodes and tags > a

a object

Browser support:
Defines a link to the same or to another document, or defines a destination anchor.
The a (anchor) tag is one of the most useful HTML elements.
You can define a destination anchor with the name or a source anchor with the href property of the a element. A source anchor can refer to a document, a file or a destination anchor, or it can open the email client of the user, or it can execute a JavaScript code.
The following table contains protocols that can be used in the value of the href property.
Commonly used protocols:
  • Inner links:
    The inner links are useful to create a destination point where the browser may jump directly (scrolling the target to the top of the page if possible). The target must be an anchor tag with the name property specified, and if you want to jump to this point, you must only insert the value of the name property after a # (hash mark) sign in the href property of the source anchor or area element, as shown in Example 2.
  • http, https:
    Link to an external webpage, as shown in Example 1.
  • ftp:
    Opens a file transfer session (an FTP site), with or without a username and password, as shown in Example 4.
  • file:
    Allows downloading a file from the specified location. Because of security restrictions, most browsers allow downloading files only from the same domain where the original document is placed.
  • javascript:
    Allows the execution of JavaScript code, as shown in Example 5.
  • mailto:
    Opens the 'new message' dialog of user's default e-mail application with the specified e-mail address as the recipient, as shown in Example 3.

Syntax:

Methods that return the object:
•document.createElement ("a")
•links.item (nameOrIndex [, subIndex])
•anchors.item (nameOrIndex [, subIndex])
•links.namedItem (name)
•anchors.namedItem (name)
The base interface, through which you can add new functionalities to the anchor object, is the HTMLAnchorElement interface.
If you want to see the HTML objects by categories, please visit this page.
HTML page for this element: a

Possible members:

 Properties
Methods
Events
Style properties
accessKey
Sets or retrieves an access key to an element.
all
Represents a collection of all elements contained by an element or the entire document.
attributes
Represents a collection of attribute nodes that belong to an element.
baseURI
10
 Returns the base URL for the object.
behaviorUrns
Represents a collection of the Uniform Resource Names for all behaviors attached to an element.
canHaveChildren
Retrieves a Boolean value that indicates whether the element can contain child elements.
canHaveHTML
Retrieves a Boolean value that indicates whether the element can contain HTML formatted text.
charset
Sets or retrieves the character encoding of the document, a linked document or a script block.
childElementCount
93.5
 Returns the number of element nodes that are direct descendants of the current element.
childNodes
Represents a collection of all nodes that are direct descendants of an element.
children
3.5
 Represents a collection of all element nodes that are direct descendants of an element.
className
Sets or retrieves the style class or classes that belong to the element.
clientHeight
Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, but it does not include the scrollBar, border, and the margin.
clientLeft
Returns the width of the left border in pixels.
clientTop
Returns the height of the top border in pixels.
clientWidth
Returns the width of the visible area for an object, in pixels. The value contains the width with the padding, but does not include the scrollBar, border, and the margin.
contentEditable
3
 Sets or retrieves whether the contents of the object are editable.
coords
Sets or retrieves the position of a shape. You can select the type of shape with the shape property.
currentStyle
Represents the computed style settings for an element.
dataFld
Specifies or returns which field of a given data source should be bound to the specified object.
dataSrc
Sets or retrieves the identifier of the data source that is bound to the element.
dir
Sets or retrieves the text direction as related to the lang property.
disabled
Sets or retrieves the state of an object for user interaction.
draggable
3.55
 Sets or retrieves whether an element is draggable.
filters
Represents a collection of all filter objects applied to an element.
firstChild
Returns a reference to the first child of the current element.
firstElementChild
93.5
 Returns a reference to the first child element of the current element.
hash
Sets or returns the subsection (begins with a '#' sign) of the URL assigned to the object.
hideFocus
Specifies or returns whether a dotted rectangle (focus rectangle) is drawn around an object while it has focus.
host
Specifies or retrieves the host name and port of the URL assigned to the object.
hostname
Specifies or retrieves the host name of the URL assigned to the object.
href
Specifies or returns the location of the destination.
hreflang
Sets or retrieves the language of a linked resource or anchor element.
id
Sets or retrieves a unique identifier for the object.
innerHTML
Sets or retrieves the inner HTML content (the source code between the opening and closing tags) of an element.
innerText
Sets or returns the text content of an element including the text content of its descendants.
isContentEditable
Returns a Boolean value that indicates whether the contents of the object are editable by the user.
isDisabled
Returns a Boolean value that indicates whether the object is disabled.
isMultiLine
Returns a Boolean value that indicates whether the contents of an element can be multiline or not.
isTextEdit
Returns a Boolean value that indicates whether the createTextRange method can be used for the element.
lang
Specifies or returns the language of the element.
language
Sets or retrieves the scripting language for the current element. Use it only for the script element.
lastChild
Returns a reference to the last child of the current element.
lastElementChild
93.5
 Returns a reference to the last child element of the current element.
localName
9
 Returns the local part of the qualified name of the current node.
Methods
Specifies or returns a comma-separated list of HTTP METHODS supported by the object and accessible to the user.
mimeType
Retrieves the type of the document file or the type of a linked file.
name
Sets or retrieves the name of a target anchor.
nameProp
Returns the file name from the URL specified by the href or src property of the current element.
namespaceURI
93.6
 Sets or returns the namespace URI of the current node.
nextElementSibling
93.5
 Returns a reference to the next child element of the current element's parent.
nextSibling
Returns a reference to the next child of the current element's parent.
nodeName
Returns the name of the current node.
nodeType
Returns an integer that indicates the type of the node.
nodeValue
Sets or returns the value of the current node.
offsetHeight
Returns the height of the visible area for an object, in pixels. The value contains the height with the padding, scrollBar, and the border, but does not include the margin.
offsetLeft
Returns the left position of an object relative to the left side of its offsetParent element, in pixels.
offsetParent
Returns a reference to the closest ancestor element in the DOM hierarchy from which the position of the current element is calculated.
offsetTop
Returns the top position of the object relative to the top side of its offsetParent element, in pixels.
offsetWidth
Returns the width of the visible area for an object, in pixels. The value contains the width with the padding, scrollBar, and the border, but does not include the margin.
outerHTML
Sets or retrieves the outer HTML content (the source code including the opening and closing tags) of an element.
outerText
Sets or returns the text content of an element including the text content of its descendants.
ownerDocument
Returns the document object that contains the current node.
parentElement
Returns the parent element of the object in the DOM hierarchy.
parentNode
Returns the parent element of the current node in the DOM hierarchy.
parentTextEdit
Returns the closest ancestor element of the current element in the DOM hierarchy that can be used to create a TextRange object.
pathname
Specifies or retrieves the path component of the URL assigned to the object (relative to the host).
port
Sets or retrieves the port component of the URL assigned to the object.
previousElementSibling
93.5
 Returns a reference to the previous child element of the current element's parent.
previousSibling
Returns a reference to the previous node of the current element's parent.
protocol
Sets or retrieves the protocol component of the URL assigned to the object.
protocolLong
Retrieves a long description about the protocol component of the URL assigned to the object.
readyState
Returns a string value that represents the state of the object.
recordNumber
Returns an integer value that indicates the ordinal position of the item within the data set that generated the current object.
rel
Specifies or returns the relationship between the current document and the destination of an anchor or link.
rev
Specifies or returns a reverse relationship from an anchor or link to the current document.
runtimeStyle
Represents the overridden style settings for an element.
scopeName
Retrieves the local name of the namespace declared for the current element.
scrollHeight
Returns the total height of an element's contents, in pixels. The value contains the height with the padding, but does not include the scrollBar, border, and the margin.
scrollLeft
Sets or retrieves the number of pixels by which the contents of an object are scrolled to the left.
scrollTop
Sets or retrieves the number of pixels by which the contents of an object are scrolled upward.
scrollWidth
Returns the total width of an element's contents, in pixels. The value contains the width with the padding, but does not include the scrollBar, border, and the margin.
search
Sets or returns the subsection (begins with a '?' sign) of the URL assigned to the object.
shape
Sets or retrieves the shape type of the selectable region for a hypertext or an area.
sourceIndex
Returns the position of the current object in the all collection of the document.
spellcheck
Sets or retrieves whether the automatic spellchecker is enabled.
style
Represents the inline style settings for an element or a CSS rule.
tabIndex
Specifies or returns the tabbing order for keyboard navigation using the TAB key.
tagName
Returns the tag name of the current element.
tagUrn
Sets or retrieves the Uniform Resource Name (URN) of the namespace declared for the current element.
target
Specifies or returns the target window or frame where the document is to be opened.
text
Sets or returns a string that corresponds the contents of the element.
textContent
9
 Sets or returns the text content of an element including the text content of its descendants.
title
Specifies or returns a tooltip for an element.
type
Specifies or returns the content type (MIME type) of the object or the linked object.
uniqueID
Returns the unique identifier generated by the browser for the object.
unselectable
Sets or retrieves whether the selection process can start in an element's content.
urn
Specifies or returns a Uniform Resource Name (URN) for a linked object.

Example HTML code 1:

This example shows how to create an external link:
 
<a href="http://www.example.com/" target="_blank">External Link</a>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 2:

This example shows how to jump to a destination anchor on the current page:
 
<a href="#to">External Link</a>

<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br />

<h1 id="to">The goal of the jump</h1>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 3:

This example shows how to send mail with the anchor tag:
 
<a href="mailto:support@example.com">Send mail</a>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 4:

This example shows how to create a link to a protected ftp:
 
<a href="ftp://user:secretpassword@example.com/path/file">FTP with password</a>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 5:

This example shows how to execute JavaScript code from a href attribute:
 
<a href="javascript: alert ('You clicked the link.')">Execute JavaScript</a>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 6:

This example shows how to change the text of an anchor at runtime:
 
<head>
    <script type="text/javascript">
        function ChangeAnchorText () {
            var anchor = document.getElementById ("myAnchor");
                // works if the element only contains pure text
            var oldLabel = anchor.innerHTML;
            newLabel = oldLabel.substr (1) + oldLabel.charAt (0);
            anchor.innerHTML = newLabel;
        }
    </script>
</head>
<body>
    <a id="myAnchor" href="http://help.dottoro.com" target="_blank">Dottoro Web Reference</a>
    <br /><br />
    <button onclick="ChangeAnchorText ()">Change the link label</button>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 7:

This example creates anchor elements dynamically:
 
<head>
    <script type="text/javascript">
        function AddAnchor () {
            var anchor = document.createElement ("a");
            anchor.innerHTML = "Create a new link";
            anchor.href = "javascript:AddAnchor ()";

            var container = document.getElementById ("anchorContainer");
            container.appendChild (anchor);
        }
    </script>
</head>
<body onload="AddAnchor ()">
    <div id="anchorContainer"></div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Example HTML code 8:

This example shows how to create an anchor when the user clicks on a button:
 
<head>
    <script type="text/javascript">
        function AddAnchor () {
            var anchor = document.createElement ("a");
            anchor.innerHTML = "Dottoro Web Reference";
            anchor.href = "http://help.dottoro.com";
            anchor.target = "_blank";

            var container = document.getElementById ("anchorContainer");
            container.appendChild (anchor);
        }
    </script>
</head>
<body>
    <button onclick="AddAnchor ()">Create a new link</button>
    <br /><br />
    <div id="anchorContainer"></div>
</body>
Copy Code Print Preview Syntax Highlighter
Did you find this example helpful? yes no

Related pages:

area

External links:

a element (MSDN)
a element (Safari Reference Library)
a element (W3C)
User Contributed Comments

Post Content

Post Content
WordPress Theme & Editor | Index Panel | Syntax Highlighter | Dottoro
Link To Us | Terms of Use | Contact Us | Privacy Policy
© 2024 Dottoro.com. All rights reserved.
HTML
CSS
JavaScript
Appendix