-
-
-
-
method:appendChild ( child_node );
return type:void
content:ใช้เพิ่ม child node ให้กับ parent node
example:var tagOL = document.getElementById ( "bamboo" );
var tagLI = document.createElement ( "li" );
var textNode = document.createTextNode ( "manchester" );
tagLI.appendChild( textNode );
tagOL.appendChild( tagLI );
-
method:insertBefore ( new_node, target_node );
return type:void
content:ใช้เพิ่ม child node ใหักับ parent node
โดยจะแทรก new node ใหม่ให้อยู่ก่อน target node
example:var tagOL = document.getElementById ( "bamboo" );
var tagLI = document.getElementsByTagName ( "li" );
var newTagLI = document.createElement ( "li" );
var newTextNode = document.createTextNode ( "manchester" );
newTagLI.appendChild( newTextNode );
tagOL.insertBefore( newTagLI, tagLI[2] );
-
method:removeChild ( child_node );
return type:void
content:ใช้ลบ child node ออกจาก parent node
example:var tagOL = document.getElementById ( "bamboo" );
var tagLI = document.getElementsByTagName ( "li" );
tagOL.removeChild ( tagLI[2] );
-
method:replaceChild ( new_node, target_node );
return type:void
content:ใช้แทนที่ target_node ด้วย new_node
example:var tagOL = document.getElementById ( "bamboo" );
var tagLI = document.getElementsByTagName ( "li" );
var newTagLI = document.createElement ( "li" );
var newTextNode = document.createTextNode ( "manchester" );
newTagLI.appendChild( newTextNode );
tagOL.replaceChild( newTagLI, tagLI[2] );
-
method:cloneNode ( boolean );
return type:node
content:ใช้คัดลอก node โดยถ้ากำหนด true คือจะให้คัดลอก child node มาด้วย
ถ้ากำหนด false คือจะคัดลอกเฉพาะ node นั้น
example:var tagOL = document.getElementById ( "bamboo" );
var newTagOL = tagOL.cloneNode ( true );
-
method:setAttribute ( attribute_name, value );
return type:void
content:ใช้ในการกำหนดค่า attribute ให้กับ node
example:var tagDiv = document.getElementById ( "bamboo" );
tagDiv.setAttribute ( "id", "labcode" );
-
method:getAttribute ( attribute_name );
return type:string
content:ใช้ในการคืนค่า ค่าข้อมูล ของ attribute ที่กำหนด
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.getAttribute ( "id" ) );
-
method:removeAttribute ( attribute_name );
return type:void
content:ใช้ในการลบ attribute ออกจาก node
example:var tagDiv = document.getElementById ( "bamboo" );
tagDiv.removeAttribute ( "id" );
-
property:attributes;
return type:node array
content:ใช้ในการอ้างถึง attribute node
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.attributes[0].nodeName );
-
property:childNodes;
return type:node array
content:ใช้ในการอ้างถึง child node
example:var tagOL = document.getElementById ( "bamboo" );
var tagLI = tagOL.childNodes;
alert ( tagLI[0].tagName );
-
property:ownerDocument;
return type:document
content:ใช้ในการอ้างถึง document object ของ node ที่กำหนด ( root element node )
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.ownerDocument.tagName );
-
property:parentNode;
return type:node
content:ใช้ในการอ้างถึง parent node
example:var tagLI = document.getElementById ( "bamboo" );
alert ( tagLI.parentNode.tagName );
-
property:hasChildNodes;
return type:boolean
content:ใช้ตรวจสอบว่า node ที่กำหนดมี child node หรือไม่
example:var tagOL = document.getElementById ( "bamboo" );
if ( tagOL.hasChildNodes )
{
alert ( "tag have child node" );
}
-
property:firstChild;
return type:node
content:ใช้ในการอ้างถึง child node ที่อยู่ลำดับแรกสุด
example:var tagHTML = document.documentElement;
alert ( tagHTML.firstChild.tagName );
-
property:lastChild;
return type:node
content:ใช้ในการอ้างถึง child node ที่อยู่ลำดับท้ายสุด
example:var tagHTML = document.documentElement;
alert ( tagHTML.lastChild.tagName );
-
property:previousSibling;
return type:node
content:ใช้ในการอ้างถึง node ที่อยู่ลำดับก่อนหน้า
example:var tagHTML = document.documentElement;
var tagBody = tagHTML.lastChild;
alert ( tagBody.previousSibling.tagName );
-
property:nextSibling;
return type:node
content:ใช้ในการอ้างถึง node ที่อยู่ลำดับถัดไป
example:var tagHTML = document.documentElement;
var tagHead = tagHTML.firstChild;
alert ( tagHead.nextSibling.tagName );
-
property:nodeName;
return type:string
content:ถ้าเป็น element node จะคืนค่าชื่อของ tag
ถ้าเป็น attribute node จะคืนค่าชื่อของ attribute
ถ้าเป็น text node จะคืนค่า #text
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.nodeName );
-
property:nodeValue;
return type:string
content:ถ้าเป็น element node จะคืนค่า null หรือค่าว่าง
ถ้าเป็น attribute node จะคืนค่าค่าข้อมูลของ attribute
ถ้าเป็น text node จะคืนค่า เนื้อหา
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.nodeValue );
-
property:nodeType;
return type:number
content:ถ้าเป็น element node จะคืนค่า 1 ( Element_Node )
ถ้าเป็น attribute node จะคืนค่า 2 ( Attribute_Node )
ถ้าเป็น text node จะคืนค่า 3 ( Text_Node )
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.nodeType );
comment:และค่าอื่นๆที่เป็นไปได้
4 คือ Cdate_Section_Node
5 คือ Entity_Reference_Node
6 คือ Entity_Node
7 คือ Processing_Instruction_Node
8 คือ Comment_Node
9 คือ Document_Node
10 คือ Document_Type_Node
11 คือ Doucment_Fragment_Node
12 คือ Notation_Node
-
property:innerText;
return type:string, void
content:ใช้ในการกำหนดค่าของ text node ให้กับ element node
โดยถ้ามี tag ของ html ก็จะแสดงผล tag นั้น ( เพราะไม่ได้ประมวลผล )
example:var tagDiv = document.getElementById ( "bamboo" );
tagDiv.innerText = "tag bold of html is '<b>'";
-
property:innerHTML;
return type:string, void
content:ใช้ในการกำหนดค่าของ text node ให้กับ element node
โดยถ้ามี tag ของ html ก็จะไม่แสดงผล tag นั้น ( เพราะมีการประมวลผล )
example:var tagDiv = document.getElementById ( "bamboo" );
tagDiv.innerHTML = "<b>welcome</b>";
-
property:outerText;
return type:string, void
content:ใช้ในการกำหนดค่าของ text node ให้กับ element node
โดยถ้ามี tag ของ html ก็จะแสดงผล tag นั้น ( เพราะไม่ได้ประมวลผล )
โดยจะทับ element node ที่เรียกใช้คำสั่งนี้ไปด้วย
example:var tagDiv = document.getElementById ( "bamboo" );
tagDiv.outerText = "tag bold of html is '<b>'";
comment:เหมือนการนำ text node ไปแทนที่ element node
-
property:outerHTML;
return type:string, void
content:ใช้ในการกำหนดค่าของ text node ให้กับ element node
โดยถ้ามี tag ของ html ก็จะไม่แสดงผล tag นั้น ( เพราะมีการประมวลผล )
โดยจะทับ element node ที่เรียกใช้คำสั่งนี้ไปด้วย
example:var tagDiv = document.getElementById ( "bamboo" );
tagDiv.outerHTML = "<b>welcome</b>";
comment:เหมือนการนำ text node ไปแทนที่ element node
-
property:tagName;
return type:string
content:ใช้ในการคืนค่า ชื่อของ tag ของ node
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.tagName );
-
property:className;
return type:string
content:ใช้ในการคืนค่า ชื่อ class ของ node
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.className );
-
property:style;
return type:void
content:ใช้ในการอ้างถึง style object เพื่อกำหนด style sheet ( css ) ให้กับ node
example:var tagDiv = document.getElementById ( "bamboo" );
tagDiv.style.textIndex = "1cm";
-
method:attributes.setNamedItem ( attribute_node );
return type:void
content:ใช้ในการกำหนด attribute node ให้กับ element node
example:var attrNode = document.createAttribute ( "class" );
attrNode.nodeValue = "labcode";
var tagDiv = document.getElementById ( "bamboo" );
tagDiv.attributes.setNamedItem ( attrNode );
-
method:item ( index );
return type:node
content:ใช้ในการอ้างถึง node ที่เป็น array
example:var tagDivs = document.getElementsByTagName ( "div" );
for ( var i=0; i<tagDivs.length; i++ )
{
alert ( tagDivs.item(i).className );
}
comment:เหมือนกับการใช้คำสั่ง tagDivs[i].className
-
property:offsetTop;
return type:number
content:ใช้คืนค่าตำแหน่งของ element ในแกน y เมื่อเทียบกับหน้าต่าง ( รวม scrollbar )
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.offsetTop );
-
property:offsetLeft;
return type:number
content:ใช้คืนค่าตำแหน่งของ element ในแกน x เมื่อเทียบกับหน้าต่าง ( รวม scrollbar )
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.offsetLeft );
-
property:x;
return type:number
content:ใช้คืนค่าตำแหน่งของ element ในแกน x โดยเปรียบเทียบกับ browser ( รวม scrollbar )
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.x );
comment:ใช้กับ browser Netscape
-
property:y;
return type:number
content:ใช้คืนค่าตำแหน่งของ element ในแกน y โดยเปรียบเทียบกับ browser ( รวม scrollbar )
example:var tagDiv = document.getElementById ( "bamboo" );
alert ( tagDiv.y );
comment:ใช้กับ browser Netscape
-
method:addEventListener ( "eventName", function_name, capture );
return type:void
content:การตรวจจับเหตุการณ์โดย Event Listener ( ของ browser Netscape และ Mozilla )
example:var showMessage = function()
{
alert ("welcome to bamboolabcode");
}
var tagDiv = document.getElementById( "bamboo" );
tagDiv.addEventListener ( "click", showMessage, true );
comment:ตัวแปร capture ถ้ากำหนด true คือจะโหลด function ไว้ที่หน่วยความจำเพื่อรอการเรียกใช้ตั้งแต่การโหลด page
แต่ถ้ากำหนด false คือจะโหลด function เฉพาะตอนที่มีการเรียกใช้ event นั้นๆ
ตัวแปร eventName จะไม่มีคำว่า "on" นำหน้า
-
method:removeEventListener ( "eventName", function_name, capture );
return type:void
content:การยกเลิกการตรวจจับเหตุการณ์ของ Event Listener ( ของ browser Netscape และ Mozilla )
example:var showMessage = function()
{
alert ("welcome to bamboolabcode");
}
var tagDiv = document.getElementById( "bamboo" );
tagDiv.addEventListener ( "click", showMessage, true );
tagDiv.removeEventListener ( "click", showMessage, true );
comment:ตัวแปร capture ถ้ากำหนด true คือจะโหลด function ไว้ที่หน่วยความจำเพื่อรอการเรียกใช้ตั้งแต่การโหลด page
แต่ถ้ากำหนด false คือจะโหลด function เฉพาะตอนที่มีการเรียกใช้ event นั้นๆ
ตัวแปร eventName จะไม่มีคำว่า "on" นำหน้า
-
method:captureEvent ( eventName );
eventName = function_name;
return type:void
content:การตรวจจับเหตุการณ์โดยการ Capture ( ของ browser Netscape )
example:var showMessage = function()
{
alert ("welcome to bamboolabcode");
}
var tagDiv = document.getElementById( "bamboo" );
tagDiv.captureEvent ( mouseover | mouseout );
tagDiv.onmouseover = showMessage;
tagDiv.onmouseout = showMessage;
comment:สามารถ capture ได้หลายๆ event พร้อมๆกัน โดยใช้เครื่องหมาย "|" คือหมายถึง OR
ตัวแปร eventName จะไม่มีคำว่า "on" นำหน้า
-
method:releaseEvent ( eventName );
return type:void
content:การยกเลิกการตรวจจับเหตุการณ์โดยการ Capture ( ของ browser Netscape )
example:var showMessage = function()
{
alert ("welcome to bamboolabcode");
}
var tagDiv = document.getElementById( "bamboo" );
tagDiv.captureEvent ( mouseover | mouseout );
tagDiv.onmouseover = showMessage;
tagDiv.onmouseout = showMessage;
tagDiv.releaseEvent ( mouseout );
comment:สามารถ capture ได้หลายๆ event พร้อมๆกัน โดยใช้เครื่องหมาย "|" คือหมายถึง OR
ตัวแปร eventName จะไม่มีคำว่า "on" นำหน้า
