3Aug

A Simple DOM example

Posted by คลีนโค้ด | Category: Javascript, Web applications | 1 Comment

HTML DOM สำหรับผม ผมคิดว่ามีความสำคัญมากๆ ในการทำเว็บ แต่ผมก็ยอมรับว่าในหลายๆ องค์กรและหลายๆ คน จะมองข้ามไป คิดว่าเป็นภาษาที่ใช้เพิ่มลูกเล่นให้กับเว็บเท่านั้น แต่จริงๆ แล้ว HTML DOM สามารถแก้ปัญหาหน้าจอที่ถูกออกแบบมายากๆ ลดระยะเวลาในการพัฒนาระบบ, ลดความยุ่งยากในการเขียนโปรแกรม และลด Load ของฝั่ง Server ได้ครับ

ก่อนหน้านั้นผมเขียนบทความเรื่อง HTML DOM Tutorial ผมเน้นการทำความเข้าใจในโครงสร้างของ DOM Node Tree ซึ่งมีตัวอย่างในการเรียกใช้น้อย ครั้งนี้ผมจะยกตัวอย่างให้มากขึ้น งั้นเรามาเริ่มกันเลยครับ

ขั้นตอนง่ายๆ ในการเรียกใช้ HTML DOM

<HTML>
<HEAD>
 <TITLE>Honglub.com</TITLE>
 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
</HEAD>
<BODY>
 <h1>ทำความเข้าใจ HTML DOM (1)</h1>
 <DIV ID="training"></DIV><br />
 <DIV ID="workspace"></DIV>
 <DIV>
  <button type="button" onclick="usingInnerHTML();" style="width:80px;">innerHTML</button>&nbsp;
  <button type="button" onclick="usingInnerText();" style="width:70px;">innerText</button>&nbsp;
  <button type="button" onclick="getNodeProperty();">nodeProperty</button><br />
  <button type="button" onclick="createDIV();" style="width:70px;">createDIV</button>&nbsp;
  <button type="button" onclick="cleanWorkspace();" style="width:70px;">Clean</button>
</DIV>
</BODY>
</HTML>
<script type="text/javascript">
 /* Using innerHTML */
 function usingInnerHTML(){
  document.getElementById("training").innerHTML=
   "<span style=\"color:red;\">ทดสอบด้วย&nbsp;innerHTML</span>";
 }

 /* Using innerText */
 function usingInnerText(){  
  var txt="<span style=\"color:red;\">ทดสอบด้วย&nbsp;innerHTML</span>";
  document.getElementById("training").innerText=txt;
  document.getElementById("training").textContent=txt; // Firefox
 }

 /* Get node property */
 function getNodeProperty(){
  var o_workspace=document.getElementById("workspace");
  var prop=o_workspace.nodeName+" element "+" is "+o_workspace.nodeType;
  document.getElementById("training").innerText=prop;
  document.getElementById("training").textContent=prop; // Firefox
 }

 /* Create new DIV  */
 function createDIV(){
  var o_training=document.getElementById("training");
  var newDIV=document.createElement("div");
  var txt=document.createTextNode("H");
  newDIV.appendChild(txt);
  newDIV.style.styleFloat="left"; // IE
  newDIV.setAttribute("style","float:left"); // Firefox and Chrome
  newDIV.style.color="#333";
  newDIV.style.textAlign="center";
  newDIV.style.width="20px";
  newDIV.style.height="20px";
  newDIV.style.border="1px solid red";
  o_training.appendChild(newDIV);
 }
 
 /* Clean workspace using innerHTML */
 function cleanWorkspace(){
  /* Clean using innerHTML */
  //document.getElementById("training").innerHTML="";

  /* Clean workspace using removeChild */
  var o_training=document.getElementById("training");
  while(o_training.childNodes.length>0){
   var cn=o_training.childNodes[0]; // get childNode
   o_training.removeChild(cn);
  }
}
</script>

  1. สร้างเอกสาร HTML ชื่อ html_dom01.html ใช้ Notepad ก็ได้นะครับ พิมพ์โค้ด HTML ตามตัวอย่างแล้ว save จะเป็นไฟล์นามสกุล htm หรือ html ก็ได้
  2. สร้างไฟล์ html_dom01.html เสร็จแล้วใช่ไหมครับ งั้นเราลองมาทดสอบแต่ละฟังก์ชันกันครับ ดับเบิ้ลคลิกที่ไฟล์ html_dom01.html ผลลัพธ์ที่ได้จะมีหน้าตาเหมือนโปรแกรมด้านล่างเลย เรามาเริ่มต้นคลิกทดสอบแต่ละฟังก์ชัน

    คลิกทดสอบฟังก์ชันได้ที่นี่ครับ :)

    • ลองคลิกที่ปุ่ม “innerHTML” ผลลัพธ์ที่ได้คือ “ทดสอบด้วย innerHTML” เป็นความที่มีสีแดง เพราะฉะนั้นเราจะใช้ innerHTML ในการแทนที่ข้อมูลที่เป็น Tag HTML
    • คลิกที่ปุ่ม “innerText” ผลลัพธ์ที่ได้คือ < span style="color:red;" >ทดสอบด้วย innerHTML< /span> แตกต่างจาก innerHTML ใช่ไหมครับ เราจะไม่เห็นข้อความที่เป็นสีแดง แถมแสดง Tag ต่างๆ ให้เราเห็นอีก เพราะมันจะมองทุกอย่างเป็นเพียงแค่ text ธรรมดา ดังนั้นเราจะใช้ innerText ในการแทนที่ข้อมูลธรรมดาที่ไม่มี Tag HTML ครับ
    • คลิกที่ปุ่ม “nodeProperty” ผลลัพธ์ที่ได้ “DIV element is 1″ แสดงวิธีการใช้ property ของ HTML DOM คือ nodeType และ nodeName โดย nodeType จะรีเทิร์นค่าเป็น Integer ส่วน nodeName จะรีเทิร์นค่าเป็น String ผมไปหาข้อมูลเพิ่มเกี่ยวกับ nodeType ผมเกิดความสงสัยว่า ค่าที่รีเทิร์นออกมาเท่ากับ 1 หมายความว่าอย่างไร ในที่สุดผมค้นพบคำตอบจาก Javascriptkit.com ตารางข้างล่างน่าจะบอกความหมายได้อย่างดี

      Returned integer Node type Constant
      1 ELEMENT_NODE
      2 ATTRIBUTE_NODE
      3 TEXT_NODE
      4 CDATA_SECTION_NODE
      5 ENTITY_REFERENCE_NODE
      6 ENTITY_NODE
      7 PROCESSING_INSTRUCTION_NODE
      8 COMMENT_NODE
      9 DOCUMENT_NODE
      10 DOCUMENT_TYPE_NODE
      11 DOCUMENT_FRAGMENT_NODE
      12 NOTATION_NODE

      ที่เราจะพบเจอบ่อยๆ น่าจะมีเพียงแค่ 3 ค่า ที่ผม hilight ไว้

    • คลิกที่ปุ่ม “createDIV” 3 ครั้ง ผลลัพธ์ที่ได้ จะเป็นกล่องสีแดงที่มีตัวอักษร H ต่อๆ กันไปเรื่อย
      Methods สำคัญที่ใช้คือ

      1. var element = document.createElement(tagName); // สร้าง element ใหม่
      2. var text = document.createTextNode(tagName); // สร้าง text node ใหม่
      3. node.appendChild(element); // แทรก element ใหม่เข้าไปใน node เป้าหมาย
    • คลิกปุ่ม “Clean” ผลลัพธ์ที่ได้ ล้างข้อมูลเก่าภายใน DIV ออกทั้งหมด จะมีด้วยกัน 2 วิธี คือ
      1. ล้างข้อมูลด้วย innerHTML หรือ innerText ก็ได้ ข้อดีคำสั่งเดียวจบ
      2. ล้างข้อมูลด้วย removeChild วิธีเรียกใช้ parentNode.removeChild(node); เขียนโปรแกรมยุ่งยากจิ๊ดนึง ต้อง while loop

ตัวอย่าง : HTML DOM DEMO
อ่านย้อนหลัง : ทำความรู้จัก HTML DOM, Recursive DOM Example

จัดทำโดยทีมงาน คลีนโค้ด

One Comments to “A Simple DOM example”

  1. gookoong says:
    September 7, 2011 at 7:50 am

    Good tutorial… thank you!

Leave a Reply

(required)

(required)

« »