JavaScript Node Object : สอน method และ property ของ Node Object, เรียน method และ property ของ Node Object
 

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • appendChild() ใช้เพิ่ม child node ให้กับ parent node
    insertBefore() ใช้เพิ่ม child node ใหักับ parent node โดยจะแทรก new node ใหม่ให้อยู่ก่อน target node
    removeChild() ใช้ลบ child node ออกจาก parent node
    replaceChild() ใช้แทนที่ target_node ด้วย new_node
    cloneNode() ใช้คัดลอก node
    setAttribute() ใช้ในการกำหนดค่า attribute ให้กับ node
    getAttribute() ใช้ในการคืนค่า ค่าข้อมูล ของ attribute ที่กำหนด
    removeAttribute() ใช้ในการลบ attribute ออกจาก node
    attributes ใช้ในการอ้างถึง attribute node
    childNodes ใช้ในการอ้างถึง child node
    ownerDocument ใช้ในการอ้างถึง document object ของ node ที่กำหนด ( root element node )
    parentNode ใช้ในการอ้างถึง parent node
    hasChildNodes ใช้ตรวจสอบว่า node ที่กำหนดมี child node หรือไม่
    firstChild ใช้ในการอ้างถึง child node ที่อยู่ลำดับแรกสุด
    lastChild ใช้ในการอ้างถึง child node ที่อยู่ลำดับท้ายสุด
    previousSibling ใช้ในการอ้างถึง node ที่อยู่ลำดับก่อนหน้า
    nextSibling ใช้ในการอ้างถึง node ที่อยู่ลำดับถัดไป
    nodeName ใช้คืนค่า node name ของ node
    nodeValue ใช้คืนค่า node value ของ node
    nodeType ใช้คืนค่า node type ของ node
    innerText ใช้ในการกำหนดค่าของ text node ให้กับ element node
    innerHTML ใช้ในการกำหนดค่าของ text node ให้กับ element node
    outerText ใช้ในการกำหนดค่าของ text node ให้กับ element node
    outerHTML ใช้ในการกำหนดค่าของ text node ให้กับ element node
    tagName ใช้ในการคืนค่า ชื่อของ tag ของ node
    className ใช้ในการคืนค่า ชื่อ class ของ node
    style ใช้ในการอ้างถึง style object เพื่อกำหนด style sheet ( css ) ให้กับ node
    setNamedItem() ใช้ในการกำหนด attribute node ให้กับ element node
    item() ใช้ในการอ้างถึง node ที่เป็น array
    offsetTop ใช้คืนค่าตำแหน่งของ element ในแกน y เมื่อเทียบกับหน้าต่าง ( รวม scrollbar )
    offsetLeft ใช้คืนค่าตำแหน่งของ element ในแกน x เมื่อเทียบกับหน้าต่าง ( รวม scrollbar )
    x ใช้คืนค่าตำแหน่งของ element ในแกน x โดยเปรียบเทียบกับ browser ( รวม scrollbar )
    y ใช้คืนค่าตำแหน่งของ element ในแกน y โดยเปรียบเทียบกับ browser ( รวม scrollbar )
    addEventListener() การตรวจจับเหตุการณ์โดย Event Listener ( ของ browser Netscape และ Mozilla )
    removeEventListener() การยกเลิกการตรวจจับเหตุการณ์ของ Event Listener ( ของ browser Netscape และ Mozilla )
    captureEvent() การตรวจจับเหตุการณ์โดยการ Capture ( ของ browser Netscape )
    releaseEvent() การยกเลิกการตรวจจับเหตุการณ์โดยการ Capture ( ของ browser Netscape )
  • 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" นำหน้า

 
Share This Chapter Login with Facebook