February 1, 2001 - Setting an Attribute Node | WebReference

February 1, 2001 - Setting an Attribute Node

Yehuda Shiran February 1, 2001
Setting 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(). The setAttributeNode() adds an attribute object to an existing DOM node. Here is the syntax:

elementNode.setAttributeNode(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:

    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>