DOM - HTML Elements

The HTMLElement interface directly represents all HTML elements in HTML DOM, some HTML elements directly inherit from this interface while others indirectly thorough other children of HTMLElements. HTMLElement inherits from DOM’s Element interface and hence inherits all the attributes and methods while adding many more of its own.

HTML Elements normally have a start tag and an end tag with content in-between them. The content in-between them can also have other HTML Elements, these are called as Nested HTML Elements.

Examples of HTML basic element structure

<body>

….. CONTENT

</body>

In the example above, HTML element ‘body’ has a start tag as <body> and end tag as </body>. 

<body>

      <h2>My Page</h2>

</body>

In the second example above, html is an example for nested HTML tags, HTML element ‘h2’ is nested inside the <body> tag.

Empty HTML elements

HTML elements with no content are called empty elements (or tags). HTML line break element <br> produces a line break in text. The element <br> does not need a closing </br> tag hence are called empty elements.

HTML and HTML5 elements are explained in greater details in following links:

DOM - HTML Attributes

An HTML attribute is a modifier of an HTML element. They are usually added to a HTML start tag, attributes can have additional information about an element and attributes are specified in “name=value” pairs.

Examples of HTML basic elements and attributes

<a href=”http://google.com”>Search</a>

href - HTML link address is specified in the href attribute of an <a> html element.

<p title=”Information about website”> … </p>

title - Additional information about the html element is provided in ‘title’ attribute, this information is shown as a tooltip text when mouse hovers over the element.

<html lang=”en-US”> .. </html>

lang - Document language is declared in ‘lang’ attribute, used for accessibility applications and search engines.

<img src="koala.jpg" alt="koala image" width="100" height="100">

alt - The alt attribute specifies an alternative text to be used, when an HTML element cannot be displayed.

HTML and HTML5 attributes are explained in greater details in following links:

DOM - HTML elements and attributes writing convention

HTML tags are not case sensitive, but W3C recommends lowercase in HTML4 and demands lower case for stricter document types like XHTML. Other recommendation is to always quote attribute values. Use of double quote is recommended unless the quoted value contains a double quote, then single quote can be used.

More about HTML writing rules read here:

Example of an properly written element with it's attribute

<a href=”http://www.brenkoweb.com”>Click here</a>

DOM methods to access HTML Attributes

Some important DOM methods dealing with html attributes are shown below:

getAttribute()

The getAttribute method can be used to fetch attribute's value by name. It returns attribute's value as a string, or empty string if the attribute does not exist. This method takes the name of the attribute as argument and its value is returned.

Syntax for getAttribute() method

element.getAttribute(attributename);

setAttribute()

The setAttribute method adds a new attribute; if the attribute is already present, the value of the attribute is changed. This method takes the attribute’s name and the attribute’s value to be set as input parameters.

Syntax for setAttribute() method

element.setAttribute(attributename, attributevalue);

removeAttribute()

The removeAttribute() method removes the attribute specified by a name. The method takes the name of the attribute to be removed as its input.

Syntax for removeAttribute() method

element.removeAttribute(attributename);

hasAttribute()

The hasAttribute() method returns true if the specified attribute exists in the element. Else it returns false.

Syntax for hasAttribute() method

element.hasAttribute(attributename);

The example below shows get, set and remove attributes functionality. When an attribute is set the button input is changed to text. The getAttribute on ‘onclick’ returns addFunction() method name. The removeAttribute removes the value ‘OK’ in the button id ‘innput’. When the alert is called on the value of the input element, it returns ‘null’. Note that the change don't get reflected in browser.

Example with getAttribute(), setAttribute() and removeAttribute() DOM methods

 

›› go to examples ››