node interface
Node Interface
| Node Property | Description |
|---|---|
| nodeType | Shows the node type |
| parentNode | Access the parent node |
| childNodes | List of all the child nodes |
| firstChild | Selects the first child of the node |
| lastChild | Selects the last child of this node |
| previousSibling | Selects the node just before the current node |
| nextSibling | Selects the node just after the current node |
| attributes | Lists all the attributes in case of an element node |
Before we get started on this part, let’s understand the node interface. In DOM every single piece of data can be viewed as a node.
Let’s look at this piece of code:
<html>
<head>
<title>DOM</title>
</head>
<body>
<h1>My Heading</h1>
<p>Hello World!</p>
<p>This is DOM</p>
</body>
</html>
If we add this script to the HTML code:
document.getElementsByTagName("h1")[0].previousSibling.data="I am now the main heading";
It will appear in a line before the h1 tag, Similarly the other commands behave as described.
For the firstChild and a lastChild node properties, sometimes when there is only one child in a node, in which case it is considered as the firstChild and the lastChild of that node.
It would probably be easier to explain in example form:
<html>
<head>
<title>First Child, Last Chold</title>
</head>
<script type="text/javascript">
function firstc(){
document.getElementsByTagName("p")[0].firstChild.data="Pie";
document.getElementsByTagName("p")[1].firstChild.data="Pie";
document.getElementsByTagName("p")[2].firstChild.data="Pie";
}
function lastc(){
document.getElementsByTagName("p")[0].lastChild.data="cake";
document.getElementsByTagName("p")[1].lastChild.data="cake";
document.getElementsByTagName("p")[2].lastChild.data="cake";
}
</script>
<body>
<p>first<em>Second</em>Third<em>Fourth</em>last</p>
<p>First<em>Second</em>Last</p>
<p>First and Last</p>
<input type="button" value="First" onclick="firstc()">
<input type="button" value="Last" onclick="lastc()">
</body>
</html>