HTML DOM Attributes


Attributes are values of nodes (HTML elements) that you can get or set.


Programming

The HTML DOM is accessible through JavaScript (and other programming languages).

All HTML elements are defined as objects, and programming interfaces are object methods and object properties.

Methods are actions that you can perform (such as adding or modifying elements).

Attributes are values that you can get or set (such as the name or content of a node).


innerHTML property

The easiest way to get the content of an element is to use the innerHTML attribute.

The innerHTML property is useful for getting or replacing the content of an HTML element.

Example

The following code gets the innerHTML of the <p> element with id="intro":

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
</head>
<body>
 
<p id="intro">Hello World!</p>
 
<script>
    var txt=document.getElementById("intro").innerHTML;
    document.write(txt);
</script>
 
</body>
</html>

Try It! 

In the above example, getElementById is a method and innerHTML is an attribute.

lamp

The innerHTML attribute can be used to get or alter any HTML element, including <html> and <body>.


The nodeName attribute specifies the name of the node.

  • nodeName is read-only

  • The nodeName of the element node is the same as the tag name

  • The nodeName of the property node is the same as the property name

  • The nodeName of a text node is always #text

  • The nodeName of a document node is always #document

Note: nodeName always contains the HTML element's uppercase tag name.


nodeValue attribute

The nodeValue property specifies the value of the node.

  • The nodeValue of the element node is undefined or null

  • The nodeValue of a text node is the text itself

  • The nodeValue of the property node is the property value


Get the value of an element

The following example retrieves the text node value of the <p id="intro"> tag:

Example

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
 
<p id="intro">Hello World!</p>
 
<script>
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
 
</body>
</html>

Try It! 



nodeType property

The nodeType property returns the type of the node. nodeType is read-only.

The more important node types are:

Element typeNodeType
Element1
Attribute2
Text3
Comment8
Documentation9