JavaScript DOM学習ノート6――HTML DOM

8523 ワード
JavaScript 職場 dom レジャー HTMLDOM
DOMはXMLドキュメントを操作する標準です.言語によって実現されます.前にも述べたように、HTMLは特有のDOMがあります.HTML DOMは主にいくつかの一般的な操作を簡略化するためです.
        1.HTML要素の属性に直接アクセスする
        HTML要素は様々な属性を持っていますが、DOM方式でこれらの属性にアクセスするには、set Attribute()とget Attribute()の方法が必要です.HTML DOMはこの操作を単純化しています.直接にこれらの属性にアクセスできます.
        ウェブページの中に一つの要素があると仮定して、
、この元素のDOMオブジェクトoImgを取得しましたが、srcまたはborder属性を操作する必要があるなら、前に述べたように、下記のコードを書く必要があります.
  

  
  
  
  
    
   
   
   
   
  1. alert(oImg.getAttribute("src")); 
    2. 
   
   
   
   
  2. alert(oImg.getAttribute("border")); 
    3. 
   
   
   
   
  3. oImg.setAttribute("src","newImg.jpg"); 
    4. 
   
   
   
   
  4. oImg.setAttribute("border","2"); 
    5.
        HTML DOMがあります.上のコードは書き上げられます.
  

  
  
  
  
    
   
   
   
   
  1. alert(oImg.src); 
    2. 
   
   
   
   
  2. alert(oImg.border); 
    3. 
   
   
   
   
  3. oImg.src = "newImg.jpg"; 
    4. 
   
   
   
   
  4. oImg.border = "2"; 
    5.
        基本的にすべてのHTML要素の特性に対応する属性は同じです.以下の例外しかありません.
  

  
  
  
  
    
   
   
   
   
  1. <div class="myCls"></div> 
    2.
        上のdivのclass特性については、HTML DOMを使って操作する場合、必ず書きます.
  

  
  
  
  
    
   
   
   
   
  1. alert(oDiv.className); 
    2. 
   
   
   
   
  2. oDiv.className = "newCls"; 
    3.
        2.HTML DOM処理テーブルの方法
        HTMLのDOMは<テーブル/>などの要素にいくつかの特性と方法を追加しました.
        (1)テーブルに追加する部分:
 
caption
ポインティング要素(存在すれば)
tBodies
＜tbody/>要素の集合
tFoot
要素セット
tHead
＜thead/>要素セット
ローソン
表のすべての行の集合
createTHead()
要素を作成し、表に入れます.
createT Foot()
要素を作成し、表に入れます.
createCaption()
要素を作成し、表に入れます.
deleteTHead()
要素を削除します.
deleteT Foot()
要素を削除
deleteCaption()
要素を削除します.
deleteRow(pos)
指定された位置の行を削除します.
insertRow(pos)
指定された場所に行を挿入します.
 
         (2)＜tbody/＞要素には、以下の内容が追加されています.
 
ローソン
＜tbody/>のすべての行の集合
deleteRow(pos)
指定された位置の行を削除します.
insertRow(pos)
指定された場所に行を挿入します.
         (3)に追加された内容:
 
セル
要素内のすべてのセルのセット
deleteCell(pos)
指定されたセルを削除します.
insertCell(pos)
セルの挿入位置を指定します.
 
        以下、HTML DOMを使って完全な追加表の例を書きます.

  
  
  
  
    
   
   
   
   
  1. <html> 
    2. 
   
   
   
   
  2.     <head> 
    3. 
   
   
   
   
  3.         <title></title> 
    4. 
   
   
   
   
  4.         <script type="text/javascript"> 
    5. 
   
   
   
   
  5.             function createTableUsingHtmlDOM() { 
    6. 
   
   
   
   
  6.                 //     
    7. 
   
   
   
   
  7.                 var oTbl = document.createElement("table"); 
    8. 
   
   
   
   
  8.                 oTbl.setAttribute("border","1"); 
    9. 
   
   
   
   
  9.                 oTbl.setAttribute("width","800"); 
    10. 
   
   
   
   
  10.                  
    11. 
   
   
   
   
  11.                 //     
    12. 
   
   
   
   
  12.                 oTbl.insertRow(0); 
    13. 
   
   
   
   
  13.                 //     
    14. 
   
   
   
   
  14.                 oTbl.rows[0].insertCell(0); 
    15. 
   
   
   
   
  15.                 //         
    16. 
   
   
   
   
  16.                 oTbl.rows[0].cells[0].appendChild(document.createTextNode("   11")); 
    17. 
   
   
   
   
  17.                 //     
    18. 
   
   
   
   
  18.                 oTbl.rows[0].insertCell(1); 
    19. 
   
   
   
   
  19.                 //         
    20. 
   
   
   
   
  20.                 oTbl.rows[0].cells[1].appendChild(document.createTextNode("   12")); 
    21. 
   
   
   
   
  21.  
    22. 
   
   
   
   
  22.                 //     
    23. 
   
   
   
   
  23.                 oTbl.insertRow(1); 
    24. 
   
   
   
   
  24.                 //     
    25. 
   
   
   
   
  25.                 oTbl.rows[1].insertCell(0); 
    26. 
   
   
   
   
  26.                 //         
    27. 
   
   
   
   
  27.                 oTbl.rows[1].cells[0].appendChild(document.createTextNode("   21")); 
    28. 
   
   
   
   
  28.                 //     
    29. 
   
   
   
   
  29.                 oTbl.rows[1].insertCell(1); 
    30. 
   
   
   
   
  30.                 //         
    31. 
   
   
   
   
  31.                 oTbl.rows[1].cells[1].appendChild(document.createTextNode("   22")); 
    32. 
   
   
   
   
  32.  
    33. 
   
   
   
   
  33.                 //        <body/>    
    34. 
   
   
   
   
  34.                 document.body.appendChild(oTbl); 
    35. 
   
   
   
   
  35.             } 
    36. 
   
   
   
   
  36.         </script> 
    37. 
   
   
   
   
  37.     </head> 
    38. 
   
   
   
   
  38.     <body> 
    39. 
   
   
   
   
  39.         <input type="button" value="    " onclick="createTableUsingHtmlDOM()"> 
    40. 
   
   
   
   
  40.     </body> 
    41. 
   
   
   
   
  41. </html> 
    42.
        これでJavaScript DOMの基礎部分はもう勉強し終わりました.DOMは他の多くの特性があります.その後の勉強の中で、接触したら、もう一つのシリーズを作って専門的に記録します.
 
参考図書目録:
「JavaScript高級プログラム設計」
Math.flor(Math.random()*(max-min+1)+min)