Creating attribute nodes

Unlike Internet Explorer 5.5 that supports only setAttribute() and getAttribute(), Internet Explorer 6 (as well as Netscape 6) supports also setAttributeNode(), getAttributeNode(), and removeAttributeNode(). The setAttributeNode() method adds an attribute object to an existing DOM node. The getAttributeNode() method extracts an attribute object from an existing DOM node. The removeAttributeNode() method removes an attribute object from an existing DOM node. Here is the syntax for these three methods:

elementNode.setAttributeNode(attributeObject);
elementNode.getAttributeNode(attributeObject);
elementNode.removeAttributeNode(attributeObject);

where:

• elementNode is a tag node. It must 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 fragment 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 page:

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 the buttons below again and see that the attribute object has been deleted and the date cannot be returned:

Next: How to replace DOM strings