HTML DOM property
May 09, 2021 HTML DOM
Table of contents
HTML DOM property
In the last section, we learned about the HTML DOM approach, and now let's take a look at the HTML DOM properties.
A property is a value of a node (HTML element) that you can get or set.
Programming interface
HTML DOMs are accessible through JavaScript (and other programming languages).
All HTML elements are defined as objects, while programming interfaces are object methods and object properties.
Methods are actions that you can perform, such as adding or modifying elements.
A property is a value that you can get or set, such as the name or content of a node.
InnerHTML property
The easiest way to get element content is to use the innerHTML property.
The innerHTML property is useful for getting or replacing the content of HTML elements.
The following code gets the inner HTML of the element of id"intro":
<body>
<p id="intro">Hello World!</p>
<script>
var txt=document.getElementById("intro").innerHTML;
document.write(txt);
</script>
</body>
</html>
Try it out . . .
In the example above, getElementById is a method, while innerHTML is a property.
|
The innerHTML property can be used to get or change any HTML element, including . |
|---|
The nodeName property specifies the name of the node.
- nodeName is read-only
- The nodeName of the element node is the same as the label name
- The nodeName of the property node is the same as the property name
- The nodeName of the text node is always #text
- The nodeName of the document node is always #document
Note: nodeName always contains the capital letter label name of the HTML element.
nodeValue property
The nodeValue property specifies the value of the node.
- The nodeValue of the element node is undefined or null
- The nodeValue of the text node is the text itself
- The nodeValue of the property node is the property value
Gets the value of the element
The following example will get back the text node value of the label:
<body>
<p id="intro">Hello World!</p>
<script type="text/javascript">
x=document.getElementById("intro");
document.write(x.firstChild.nodeValue);
</script>
</body>
</html>
Try it out . . .
nodeType property
The nodeType property returns the type of node, and nodeType is read-only.
The following table is the more important node type:
| The element type | NodeType |
|---|---|
| Elements | 1 |
| Property | 2 |
| Text | 3 |
| Comments | 8 |
| Document | 9 |