DOM - nodes attributes


<html>
<head>
<script>

function swapA(node) {
  if (node.getAttribute('align') == 'center') {
    node.setAttribute('align', 'left');
  } else {
    node.setAttribute('align', 'center');
  }
}

function showA(node) {
  //var node = document.getElementById("p1");
  var name, val;
  for(var i=0, txt=''; i<node.attributes.length; i++){
    name = node.attributes[i].name;
    val = node.attributes[i].value;
    if (val != 'null' && val != '') { // pour pas tout affichez avec IE
      txt += name + " = " + val + '\n';
    }
  }
  alert(
    '------- node properties : -------------\n' +
    'node.id : ' + node.id + '\n' +
    'node.tagName : ' + node.tagName + '\n' +
    'node.nodeName : ' + node.nodeName + '\n' +
    'node.nodeValue : ' + node.nodeValue + '\n' +
    'node.nodeType : ' + node.nodeType + '\n' +
    'node.innerHTML : ' + node.innerHTML + '\n' +
    'node.innerText : ' + node.innerHTML + '\n' +
    '------- node.attributes : -------------\n' + txt);
}
</script>
</head>
<body>

  <p id="p1" style="color: red;background-color: yellow">
  barfoo <b>foobar</b>
</p>

<form>
  <input type="button" value="show properties &amp; attributes"
  onclick="showA(document.getElementById('p1'))"/><br/>
  <input type="button" value="change attribute align"
  onclick="swapA(document.getElementById('p1'))"/><br/>
  <input type="button" value="remove attribute style"
  onclick="document.getElementById('p1').removeAttribute('style')"/><br/>
</form>
 
</body>
</html>