Notice: The WebPlatform project, supported by various stewards between 2012 and 2015, has been discontinued. This site is now available on github.

node interface

Node Interface

Node PropertyDescription
nodeTypeShows the node type
parentNodeAccess the parent node
childNodesList of all the child nodes
firstChildSelects the first child of the node
lastChildSelects the last child of this node
previousSiblingSelects the node just before the current node
nextSiblingSelects the node just after the current node
attributesLists 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>

Next Tutorial: Adding and Deleting Elements