The attribute element represents the attribute of an element object. The attribute is a node and it inherits all the node methods and properties. However it does not have a parent node. It has text and entity reference as child nodes. The attribute element's node name is Attr interface. Its node type value is 2.

The properties of attributes are:

baseURI

The baseURI attribute returns the absolute base URI of the attribute, i.e location and document name of the attribute.

Syntax for baseURI attribute

attrObject.baseURI;

isID

The isID attirbute returns true if the attribute is known to be of type ID, i.e. contain an identifier for it’s owner element.

Syntax for isID attirbute

attrObject.isID;

localName

The localName attribue returns local part of the name of the attribute.

Syntax for localName attribute

attrObject.localName;

schemeTypeInfo

The schemeTypeInfo attribute returns the type information associated with the attribute.

Syntax for schemeTypeInfo attribute

attrObject.schemeTypeInfo;

textContent

The textContent attribute sets or returns the text content of an attribute.

Syntax for textContent attribute

attrObject.textContent;

value

The value attribute sets or returns a attribute's value.

Syntax for value attribute

attrObject.value;

Example of how to add attribute's name and value to XML

The example adds attribute name and value to the <data> element of the xml document. It also displays the name and textContent attributes.

myData.xml

<?xml version='1.0'?>

<root>

    <data>

        <animal>Lion</animal>

            <habitat>jungle</habitat>

            <type>mammal</type>

            <eatingHabit>Carnivore</eatingHabit>

    </data>

     

      <data>

        <animal>Deer</animal>

            <habitat>jungle</habitat>

            <type>mammal</type>

            <eatingHabit>Herbivore</eatingHabit>

    </data>

</root>

myData.html

<!DOCTYPE html>

<html>

   <body>

      <h1>Adding Attribute </h1>     

      <script>

            function loadFile(name){

                   if (window.XMLHttpRequest)

                   {// code for IE7+, Firefox, Chrome, Opera, Safari

                        xmlhttp = new XMLHttpRequest();

                   }

                   else

                   {// code for IE6, IE5

                        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");

                   }

                  xmlhttp.open("GET",name,false);

                  xmlhttp.send();

                  return xmlhttp.responseXML;

 

            }

           

            xmlDoc = loadFile("myData.xml");         

            x=xmlDoc.getElementsByTagName("data");

           

            for(i=0; i<x.length; i++){

                  newAttr=xmlDoc.createAttribute("censusYear");

                  newAttr.nodeValue="2015";    

                  x[i].setAttributeNode(newAttr);    

            }

                       

            for (i=0; i<x.length; i++)

              {

                  document.write("censusYear for node" + i + " has attribute value " + x[i].getAttribute("censusYear") + "<br/>");              

                  document.write("name:" + x.item(i).attributes[0].name + " textContent: " + x.item(i).attributes[0].textContent + "<br/>");

              }          

           

      </script>

   </body>

</html>

Output from example:

Adding Attribute

censusYear for node0 has attribute value 2015
name:censusYear textContent: 2015
censusYear for node1 has attribute value 2015
name:censusYear textContent: 2015

 

›› go to examples ››