February 5, 2001 - Removing an Attribute Node | WebReference

February 5, 2001 - Removing an Attribute Node

Yehuda Shiran February 5, 2001
Removing an Attribute Node
Tips: February 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

Unlike Internet Explorer that supports only setAttribute() and getAttribute(), Netscape 6 supports also setAttributeNode() and getAttributeNode(). Moreover, it supports the removeAttributeNode() method. The removeAttributeNode() removes a specified attribute object from an existing DOM node. Here is the syntax:

elementNode.removeAttributeNode(attributeObject);
where:

elementNode is a tag node. It mush have been created with the createElement() method.
  • attributeObject is an object that must have been created with the createAttribute() method.

    Here is a sample code which first creates an object, nodePublishDate, that is equal to today's date. It then creates a tag element node ("P"), and converts this latter node to an attribute node:

    var nodeBook, nodePublishDate;
    nodePublishDate = document.createAttribute("PublishDate");
    nodePublishDate.value = String(Date());
    nodeBook = document.createElement("P");
    nodeBook.setAttributeNode(nodePublishDate);

    We put it in a conditional statement in the header of this tip:

    NS6 = false;
    if (document.all) {}
    else if (document.getElementById) {
      NS6 = true;
      var nodeBook, nodePublishDate;
      nodePublishDate = document.createAttribute("PublishDate");
      nodePublishDate.value = String(Date());
      nodeBook = document.createElement("P");
      nodeBook.setAttributeNode(nodePublishDate);
    }

    Click the following buttons to see that indeed nodeBook is an attribute node. The name of the attribute is PublishDate and its value is today's date:

    Here is how we define the buttons above:

    <FORM>
    <INPUT TYPE="button" VALUE="getAttribute('PublishDate')" 
    onClick="javascript:if (NS6) {alert(nodeBook.getAttribute('PublishDate'))} 
    else {alert('You must use Netscape 6')}">
    <INPUT TYPE="button" VALUE="getAttributeNode('PublishDate').value" 
    onClick="javascript:if (NS6) {alert(nodeBook.getAttributeNode('PublishDate').value)} 
    else {alert('You must use Netscape 6')}">
    </FORM>

    Now, click this button to remove the attribute node:

    Here is how we define this button:

    <INPUT TYPE="button" VALUE="Remove the Attribute Node" 
    onClick="javascript:if (NS6) {nodeBook.removeAttributeNode(nodePublishDate)} 
    else {alert('You have to use Netscape 6')}">
    </FORM>

    Click again the buttons below and see that the attribute object has been deleted and the date cannot be returned: