javaScript Dom node properties

node.nodeName property

the nodeName property returns the name of the specified node.

if the Node is an element, the nodeName property will return the element name.

if the Node is an attribute, the nodeName property will return the name of the attribute.

syntax:

         var    name  =  node.nodeName
 <body>     
        <p>this is <cite class="fo">cite font</cite></p>
        
        <button onclick="nodename();">click show node names</button>
        
    <script> function nodename(){
    
alert(document.body.nodeName+"\n"+document.body.firstChild.nodeName);
                       
                   }   </script>
</body>

in the above example outer p element would have the node name p.

class attribute would have the node name class and the text would have the node name #text.


the javaScript nodeValue  property

the javascript node.nodeValue property sets or returns the node value of the specified node.

         node.nodeValue = value

for return value

         var  value = node.nodeValue
 <body>     
        <p>this is <cite class="fo">cite font</cite> google font msn font</p>
        
        <button onclick="nodevalue()">click show node values</button>
        
    <script> function nodevalue(){
    
alert("p tag value____"+document.body.firstChild.nodeValue);
                       
                   }  </script>
</body>

the  nodeType  property

the nodeType property returns the node type as a number of the specified node.

all nodes are typed. total nodes type is 12 look at DOM level 1:

          node.nodeType

the parent and child nodes

the JavaScript parentNode property returns the 'parent node' of the specified node as a Node-object.

if the specified node does not have any parent node returns Null.

          node.parentNode

the childNodes property returns a collection of a node's child nodes as a nodelist.

          node.childNodes
 <body>     
        <p>this is <cite class="fo">cite font</cite> google font msn font</p>
        
        <ul><li> google.com </li></ul>
        
        <h1> this is first heading </h1>
        
<button onclick="show()">click show parend and childs nodes of body</button>
        
    <script> function  show(){
    
     alert("p tag parent____"+document.body.parentNode);
  
     var   childs = document.body.childNodes;
     
     alert("total childs____"+childs.length+"\n"+"first child____"+childs[0]+"\n"+
     
                   "second  child_____"+childs[1]+"\n"+"third child____"+childs[2]);
                       
                   }  </script>
</body>

the javascript firstChild property - returns the 'first child' node of the specified node as a node-object.

         document.firstChild;

the javascript - lastChild property returns the last child node of the specified node as a node object.

         document.lastChild;

sibling properties

the previousSibling property returns the previous node of the specified node in the same tree level.

          node.previousSibling

note :in the node relationship - if there is no previousSibling node, the return value is null

the nextSibling property returns the node immediately following the specified node in the same tree level.

note :in the node relationship - if there is no nextSibling node, the return value is null

          node.nextSibling

example

 <body>     
        <p>this is <cite class="fo">cite font</cite> google font msn font</p> 
               
        <ul><li> google.com </li></ul>
                
        <h1> this is first heading </h1>
        
<button onclick="nextSib()">next shibling of the p element</button>

<button onclick="preSib()">previous shibling of the ul element</button>
        
<script> function  nextSib(){
    
                              var  next_s  = document.body.firstChild.nextSibling;
              
                              alert("the next sibling of the <p> element____"+next_s);} 
                   
   function  preSib(){
    
                                       var  childs  = document.body.childNodes;
              
 alert("the previous sibling of the <ul> element____"+childs[1].previousSibling);} 
                   
    </script>
    
</body>

the  attributes  property

the attributes property returns a collection of the specified node's attributes as a NamedNodeMap.

syntax:

         node.attributes
<body>

   <a href="http:\\www.google.com"   target="_blank">google.com</a>
   
   <script>
      
            var  a_attrs = document.body.firstChild.attributes;
                   
            alert("total anchor attributes"+a_attrs.length);
                   
alert("first attribute___"+a_attrs[0]+"attribute value_____"+a_attrs[0].value+
                   
 "\n"+"second attribute___"+a_attrs[1]+"attribute value_____"+a_attrs[1].value);
 
   </script>
   
 </body>