mail us  |  mail this page

contact us
training  | 
tech stuff  | 

Tech Stuff - DOM HTMLAnchorElement

W3C HTML Reference. Part of the HTML Interface

HTMLAnchorElement

The Anchor HTML element may be defined in HTML using <a id="one"></a> and then referenced using a method such as getElementById, or created dynamically using the createElement method of a document. An HTMLAnchorElement is identified when it returns nodeType = 1 (ELEMENT_NODE) and the value "a" when a node's nodeName attribute is inspected.

Usage

// create HTMLAnchorElement
anchor = document.createElement{"a");
// discover HTMLAnchorElement
if(somenode.nodeType == 1){
 if(somenode.nodeName == "a"){
  // now use HTMLAnchorElement methods and properties
  href = somenode.href;
 }
}

Related Information

createElement, createTextNode and getElementById methods

Methods and Attributes

W3C HTMLAnchorElement Reference. Methods and Attributes reference. Also inherits the HTMLElement and Node properties.

Examples

// get reference to existing anchor element
// defined as <a id="our-home" href="http://www.example.com">home</a>
anchor = document.getElementById("our-home");
hs = anchor.href; // hs = "www.example.com"
vs = anchor.childNodes[0].data;	// vs = "home"

// create the above anchor dynamically
anchor = document.createElement("a");
anchor.href = "www.example.com";
anchor.id = "our-home";
hometext = document.createTextNode("home");
anchor.appendChild(hometext);
// stick it onto an existing element with id="links"
obj = document.getElementById("links");
obj.appendChild(anchor);

Notes:

The first fragment shows obtaining a reference to an anchor element defined statically in the HTML page, the second creates the same anchor using javascript DOM API methods and attributes and appends it to an existing object in the page with an id="links". This last fragment also illustrates how the 'clickable'/visible text is created for an anchor with the textnode.



Problems, comments, suggestions, corrections (including broken links) or something to add? Please take the time from a busy life to 'mail us' (at top of screen), the webmaster (below) or info-support at zytrax. You will have a warm inner glow for the rest of the day.

Tech Stuff

If you are happy it's OK - but your browser is giving a less than optimal experience on our site. You could, at no charge, upgrade to a W3C standards compliant browser such as Firefox

Search

web zytrax.com

Share

share page via facebook tweet this page

Page

email us Send to a friend feature print this page Decrease font size Increase font size Display full width page

Resources

HTML Stuff

W3C HTML 4.01
HTML5 (WHATWG)
HTML4 vs HTML5
HTML5 Reference
W3C Page Validator
W3C DOCTYPE

CSS Stuff

W3C CSS2.1
W3C CSS2.2
Default Styles
CSS3 Selectors
CSS 3 Media Queries
CSS 3 Colors

DOM Stuff

W3C DOM
W3C DOM 3 Core
W3C 3 Events

Accessibility

usability.gov
W3C - WAI
Web Style Guide
WebAim.org

Useful Stuff

Peter-Paul Koch
A List Apart
Eric Meyer on CSS
glish.com

Our Stuff

Our DOM Pages
DOM Navigation
Liquid Layout
CSS Short Cuts
CSS overview
CSS One Page

Javascript Stuff

ECMA-262

Site

CSS Technology SPF Record Conformant Domain
Copyright © 1994 - 2017 ZyTrax, Inc.
All rights reserved. Legal and Privacy
site by zytrax
Hosted by super.net.sg
web-master at zytrax
Page modified: October 21 2015.