NamedNodeMap, DocumentFragmentのサンプル

サンプル1

Firefoxではなぜかわかりませんがうまくいきません。





ソース1

<p class="sample">
<input type="button" id="checkattrbtn" value="この要素の属性を一覧表示(ALT+C)"
 onclick="ckattr()" accesskey="c" size="40" title="属性値を調べるサンプルです。" />
<input type="checkbox" id="accesson" checked="checked" onclick="changeaccess()"
 accesskey="s" /><label for="accesson">←ボタンのaccesskey属性の設定(ALT+S)</label>
</p>

<pre id="attrlist" class="sample"></pre>
inputattr = document.getElementById('checkattrbtn').attributes;  //これがNamedNodeMap型です。

function ckattr(){
  alert(inputattr.getNamedItem('title').value);
  while(document.getElementById('attrlist').hasChildNodes()){
    document.getElementById('attrlist').removeChild(document.getElementById('attrlist').firstChild);
  }
  df = document.createDocumentFragment();
  for(i=0;i<inputattr.length;i++){
    df.appendChild(document.createTextNode(inputattr.item(i).name + "			" + inputattr.item(i).value));
    df.appendChild(document.createElement('br'));
  }
  document.getElementById('attrlist').appendChild(df);
}

function changeaccess(){
  if(document.getElementById('accesson').checked){
    ak = document.createAttribute('accesskey');
    ak.value = 'c';
    inputattr.setNamedItem(ak);
    document.getElementById('checkattrbtn').value = 'この要素の属性を一覧表示(ALT+C)';
  }
  else
  {
    inputattr.removeNamedItem('accesskey');
    document.getElementById('checkattrbtn').value = 'この要素の属性を一覧表示';
  }
}

【書く項目が違う気がする】ブラウザによって出てくる属性値リストが違います。 明示している属性しか出さないものがたぶん仕様書通りですが、明示してない属性も書き出すブラウザがあります。 if(inputattr.item(i).specified)とか書き加えると同じ結果になります。