javaScript HTMLdom attributes Object

in the html dom, the attribute object represents an html attribute. which belong to html element.

dom nodes provide rich set of methods to html element attributes:

  • the getAttribute() method
  • the setAttribute() method
  • the removeAttribute() method
  • the hasAttribute() method

JavaScript - getAttribute() method

the getAttribute() method is return the value of the named attribute on the specified element. if the named attribute does not exist, the value returned will either be null or ("") empty string.

syntax:

         var  attr  =  element.getAttribute(attributeName)
  • attributeName : is the name of the attribute whose value you want to get.
   <script> function   attr(){
       
                  var   element = document.getElementById("gog");
                  
                  var   attr    = element.getAttribute("href");
                  
                          alert("the attribute href value ____"+attr);  }
  </script>
 
    <body>
          <p><a  id="gog"  href="http://www.google.com" > google.com</a></p>
                
          <p><a   href="http://www.facebook.com">facebook.com </a></p>
              
  <button   onclick="attr()">click to get the href attribute value</button>
  
</body>

JavaScript - setAttribute method

the setAttribute() method adds the specified attribute, and gives it the specified value.

if the specified attribute allready exists, only the value is set.

syntax:

         element.setAttribute(attributename , attributevalue)
  • attributename : the name of the attribute you want to add
  • attributevalue : the value of the attribute you want to add.
  <style type="text/css">
       
       .p {color:red;font-size:30px;font-weight:bold;border:5px inset black;
           
            background-color:gold;}  </style>
            
   <script> function   setattr(){
       
                  var   element = document.getElementById("fo");
                  
                  var   attr    = element.setAttribute("class", "p");
                }
  </script>
 
    <body>
          <p  id="fo">this is the first paragraph</p>
                
          <p><a   href="http://www.facebook.com">facebook.com </a></p>
              
<button   onclick="setattr()">click to set the class attribute of p tag</button>

</body>

JavaScript - removeAttribute() method

the removeAttribute() method removes an attribute from the specified element.

syntax:

          element.removeAttribute(attrName)
  • attrName : the name of the attribute you want to remove
  <style type="text/css">
       
       .p {color:red;font-size:30px;font-weight:bold;border:5px inset black;
           
            background-color:gold;}  </style>
            
   <script> function   setattr(){
       
                  var   element = document.getElementById("fo");
                  
                  var   attr    = element.setAttribute("class", "p");
                }
                
               function   removeattr(){
       
                  var   element = document.getElementById("fo");
                  
                  var   attr    = element.removeAttribute("class");
                }                    
  </script>
 
    <body>
                <p  id="fo">this is the first paragraph</p>
                
                <p><a   href="http://www.facebook.com">facebook.com </a></p>
              
<button onclick="setattr()">click to set the class attribute for p tag</button>

<button onclick="removeattr()">click to remove the class attribute from p tag</button>

</body>

JavaScript hasAttribute method

the hasAttribute() method returns a boolean true value if the specified attribute exists, otherwise it returns false.

syntax:

          element.hasAttribute(attName)
  • attName : is a string representing the name of the attribute.
          var  bool  = document.getElementById('gog').hasAttribute('href');