JavaScript DOM学習ノート6——HTML DOM
3649 ワード
DOMはXMLドキュメントを操作する標準です.言語によって実現されます.前にも述べたように、HTMLは特有のDOMがあります.HTML DOMは主にいくつかの一般的な操作を簡略化するためです.
1.HTML要素の属性に直接アクセスする
HTML要素は様々な属性を持っていますが、DOM方式でこれらの属性にアクセスするには、set Attribute()とget Attribute()の方法が必要です.HTML DOMはこの操作を単純化しています.直接にこれらの属性にアクセスできます.
ウェブページの中に一つの要素があると仮定して、
src="img.jpg"border="1"を取得しました.この元素のDOMオブジェクトoImgを取得しました.srcまたはborder属性を操作する必要があれば、以前に話したように、下記のコードを書く必要があります.
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を使って完全な追加表の例を書きます.
これでJavaScript DOMの基礎部分は勉強を終わりました.DOMは他にもいろいろな特性があります.これからの勉強の中で、もし接触したら、もう一つの小さいシリーズの専門記録を作ります.
参考図書目録:
「JavaScript高級プログラム設計」
1.HTML要素の属性に直接アクセスする
HTML要素は様々な属性を持っていますが、DOM方式でこれらの属性にアクセスするには、set Attribute()とget Attribute()の方法が必要です.HTML DOMはこの操作を単純化しています.直接にこれらの属性にアクセスできます.
ウェブページの中に一つの要素があると仮定して、
src="img.jpg"border="1"を取得しました.この元素のDOMオブジェクトoImgを取得しました.srcまたはborder属性を操作する必要があれば、以前に話したように、下記のコードを書く必要があります.
alert(oImg.getAttribute("src"));
alert(oImg.getAttribute("border"));
oImg.setAttribute("src","newImg.jpg");
oImg.setAttribute("border","2");
HTML DOMがあります.上のコードは書き上げられます.alert(oImg.src);
alert(oImg.border);
oImg.src = "newImg.jpg";
oImg.border = "2";
基本的にすべてのHTML要素の特性に対応する属性は同じです.以下の例外しかありません.<div class="myCls"></div>
上のdivのclass特性については、HTML DOMを使って操作する場合、必ず書きます.alert(oDiv.className);
oDiv.className = "newCls";
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を使って完全な追加表の例を書きます.
<html>
<head>
<title></title>
<script type="text/javascript">
function createTableUsingHtmlDOM() {
//
var oTbl = document.createElement("table");
oTbl.setAttribute("border","1");
oTbl.setAttribute("width","800");
//
oTbl.insertRow(0);
//
oTbl.rows[0].insertCell(0);
//
oTbl.rows[0].cells[0].appendChild(document.createTextNode(" 11"));
//
oTbl.rows[0].insertCell(1);
//
oTbl.rows[0].cells[1].appendChild(document.createTextNode(" 12"));
//
oTbl.insertRow(1);
//
oTbl.rows[1].insertCell(0);
//
oTbl.rows[1].cells[0].appendChild(document.createTextNode(" 21"));
//
oTbl.rows[1].insertCell(1);
//
oTbl.rows[1].cells[1].appendChild(document.createTextNode(" 22"));
// <body/>
document.body.appendChild(oTbl);
}
</script>
</head>
<body>
<input type="button" value=" " onclick="createTableUsingHtmlDOM()">
</body>
</html>
これでJavaScript DOMの基礎部分は勉強を終わりました.DOMは他にもいろいろな特性があります.これからの勉強の中で、もし接触したら、もう一つの小さいシリーズの専門記録を作ります.
参考図書目録:
「JavaScript高級プログラム設計」