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>In the above example, getElementById is a method and innerHTML is an attribute.
 | 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>nodeType property
The nodeType property returns the type of the node. nodeType is read-only.
The more important node types are:
| Element type | NodeType |
|---|---|
| Element | 1 |
| Attribute | 2 |
| Text | 3 |
| Comment | 8 |
| Documentation | 9 |