<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
 <head>
  <title>DOM Core: Changing Attributes</title>
  <script type="text/javascript">
    function doTest1() {
      var element = document.getElementById('test');
      var attributeBefore = element.getAttributeNodeNS('http://www.example.org/test', 'attribute');
      document.getElementById('result1').setAttributeNS('', 'title', attributeBefore.value == 'before' ? 1 : 0);
      element.setAttributeNS('http://www.example.org/test', 'newtest:attribute', 'after');
      document.getElementById('result2').setAttributeNS('', 'title', attributeBefore.value == 'after' ? 1 : 0);
      var attributeAfter = element.getAttributeNodeNS('http://www.example.org/test', 'attribute');
      document.getElementById('result3').setAttributeNS('', 'title', attributeBefore == attributeAfter ? 1 : 0);
    }
  </script>
  <style type="text/css">
    p:after { content: "Not Tested"; content: "Result (green = passed; red = failed; black = untested)"; }
    p[title]:after { content: "Failed"; color: red; }
    p[title="1"]:after { content: "Passed"; color: green; }
  </style>
 </head>
 <body onload="doTest1()">
  <div xmlns:test="http://www.example.org/test" id="test" test:attribute="before"></div>
  <p id="result1">Test #1: </p>
  <p id="result2">Test #2: </p>
  <p id="result3">Test #3: </p>
 </body>
</html>
