July 4, 2001 - Removing an Attribute Node in IE6 and NS6 | WebReference

July 4, 2001 - Removing an Attribute Node in IE6 and NS6

Yehuda Shiran July 4, 2001
Removing an Attribute Node in IE6 and NS6
Tips: July 2001

Yehuda Shiran, Ph.D.
Doc JavaScript

Unlike Internet Explorer 5.5 that supports only setAttribute() and getAttribute(), Internet Explorer 6 (as well as Netscape 6, though this tip is written specifically for IE) supports also setAttributeNode() and getAttributeNode(). The method getAttributeNode() adds an attribute object to an existing DOM node. 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 finally 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:

    if (bVer() >= 6) {
  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 (bVer()>=6) {alert(nodeBook.getAttribute('PublishDate'))} 
  else {alert('You must use Netscape 6 (or higher) or Internet Explorer 6 (or higher)')}">
<INPUT TYPE="button" VALUE="getAttributeNode('PublishDate').value" 
  onClick="javascript:if (bVer()>=6) {alert(nodeBook.getAttributeNode('PublishDate').value)} 
  else {alert('You must use Netscape 6 (or higher) or Internet Explorer 6 (or higher)')}">
</FORM>

    The browser version is computed by the bVer() function:

    function bVer() {
  // return version number (e.g., 4.03)
  msieIndex = navigator.appVersion.indexOf("MSIE") + 5;
  return(parseFloat(navigator.appVersion.substr(msieIndex,3)));
}

    Now, click this button to remove the attribute node:

    Here is how we define this button:

    <FORM>
  <INPUT TYPE="button" 
  VALUE="Remove the Attribute Node" 
  onClick="javascript:if (bVer()>=6) 
  {nodeBook.removeAttributeNode(nodePublishDate)} 
  else {alert('You must use Netscape 6 (or higher) or Internet Explorer 6 (or higher)')}">
</FORM>

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