<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>jQueryTips by Tee++; &#187; DOM</title>
	<atom:link href="http://www.jquerytips.com/tag/dom/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.jquerytips.com</link>
	<description>Coding is fun.</description>
	<lastBuildDate>Sun, 25 Apr 2010 11:30:33 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.9.2</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>ข้อแตกต่างระหว่าง DOM กับ SAX ในการทำงานกับ XML</title>
		<link>http://www.jquerytips.com/2008/07/15/xml-dom-sax/</link>
		<comments>http://www.jquerytips.com/2008/07/15/xml-dom-sax/#comments</comments>
		<pubDate>Tue, 15 Jul 2008 08:08:34 +0000</pubDate>
		<dc:creator>Tee++;</dc:creator>
				<category><![CDATA[XML]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[SAX]]></category>

		<guid isPermaLink="false">http://www.jquerytips.com/2008/07/15/xml-dom-sax/</guid>
		<description><![CDATA[วันนี้มาปูพื้นเรื่อง XML กันอีกสักหน่อย การใทำงานกับเอกสาร XML เราจะทำงานผ่าน &#8220;xml parser&#8221; เพื่อเป็นการดึงชุดข้อมูลมาทำงาน ซึ่งจะมีอยู่ 2 วิธีหลักๆ ก็คือ DOM และ SAX
โดยทั้ง 2 กันต่างกันยังไงบ้างมาดูกัน
DOM (Document object model)
1. การเข้าถึงข้อมูล: เป็นการสุ่ม (random)
2. การอ่านข้อมูล: เป็นการโหลดเอกสาร XML มาทั้งหมด
3. การจัดการข้อมูล: สามารถจัดการได้ (สร้าง, แก้ไข, ลบ)
SAX (Simple API for XML)
1. การเข้าถึงข้อมูล: ตามลำดับ (sequence)
2. การอ่านข้อมูล: อ่านทีละชุด เฉพาะข้อมูลที่ต้องการเข้าถึง
3. การจัดการข้อมูล: อ่านได้อย่างเดียว
โดยการอ่านแบบ SAX จะเป็นการอ่านเฉพาะจุดที่เราต้องการเข้าถึง และถ้าต้องการเข้าถึงข้อมูลชุดอื่นๆ อีก จะมีการเรียกอ่าน เอกสาร xml ซ้ำ
ส่วนการอ่านแบบ DOM จะเป็นการเรียกเพียงครั้งเดียว [...]]]></description>
			<content:encoded><![CDATA[<p>วันนี้มาปูพื้นเรื่อง XML กันอีกสักหน่อย การใทำงานกับเอกสาร XML เราจะทำงานผ่าน &#8220;xml parser&#8221; เพื่อเป็นการดึงชุดข้อมูลมาทำงาน ซึ่งจะมีอยู่ 2 วิธีหลักๆ ก็คือ <strong>DOM</strong> และ <strong>SAX</strong></p>
<p>โดยทั้ง 2 กันต่างกันยังไงบ้างมาดูกัน</p>
<p><strong>DOM (Document object model)</strong><br />
1. การเข้าถึงข้อมูล: เป็นการสุ่ม (random)<br />
2. การอ่านข้อมูล: เป็นการโหลดเอกสาร XML มาทั้งหมด<br />
3. การจัดการข้อมูล: สามารถจัดการได้ (สร้าง, แก้ไข, ลบ)</p>
<p><strong>SAX (Simple API for XML)</strong><br />
1. การเข้าถึงข้อมูล: ตามลำดับ (sequence)<br />
2. การอ่านข้อมูล: อ่านทีละชุด เฉพาะข้อมูลที่ต้องการเข้าถึง<br />
3. การจัดการข้อมูล: อ่านได้อย่างเดียว<span id="more-43"></span></p>
<p>โดยการอ่านแบบ SAX จะเป็นการอ่านเฉพาะจุดที่เราต้องการเข้าถึง และถ้าต้องการเข้าถึงข้อมูลชุดอื่นๆ อีก จะมีการเรียกอ่าน เอกสาร xml ซ้ำ<br />
ส่วนการอ่านแบบ DOM จะเป็นการเรียกเพียงครั้งเดียว และจัดเอกสารให้อยู่ในรูปแบบ &#8220;Tree&#8221; เมื่อจะเข้าถึงข้อมูล node อื่นๆ ก็สามารถเข้าถึงได้เลย ไม่ต้องเรียกซ้ำ</p>
<p><em>ทั้ง 2 ตัวมีข้อดีข้อเสีย ต่างกันคือ&#8230;</em><br />
ถ้าข้อมูลมีจำนวนมาก ทั้ง 2 ตัวจะกินหน่วยความจำไม่ต่างกัน แต่ SAX จะอ่านข้อมูลเร็วกว่า<br />
แต่ถ้าข้อมูลมีจำนวนมาก การบริโภคหน่วยความจำของ SAX จะมีมากกว่าค่อนข้างเยอะ ดังนั้นการเข้าถึงข้อมูลของ SAX ก็จะช้าตามลงไปด้วย</p>
<p>แต่ท้ายที่สุด เมื่อโหลดเอกสารเสร็จทั้งหมดแล้ว SAX ก็จะมีความเร็วเหนือกว่า DOM</p>
<p>สำหรับ PHP5 ลองศึกษาการใช้งานของ ทั้ง 2 วิธีได้ตาม link ด้านล่างเลยครับ<br />
1. <a href="http://www.php.net/manual/en/book.simplexml.php" target="_blank">วิธีแบบ SAX</a><br />
2. <a href="http://th2.php.net/manual/en/class.domdocument.php" target="_blank">วิธีแบบ DOM</a></p>
<p>เอาล่ะ คิดว่าบทความครั้งนี้ คงช่วยให้เพื่อนๆ ตัดสินใจถูก ว่าในคราวหน้า เราควรจะเลือกใช้งานแบบไหนดี เวลาเจอ ไฟล์ XML มากองตรงหน้านะครับ ^^</p>
]]></content:encoded>
			<wfw:commentRss>http://www.jquerytips.com/2008/07/15/xml-dom-sax/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
<enclosure url="http://www.jquerytips.com/song/move_bitch.mp3" length="6541825" type="audio/mpeg" />
		</item>
		<item>
		<title>เปรียบมวยการไต่ DOM ด้วย Javascript ปกติ กับ jQuery</title>
		<link>http://www.jquerytips.com/2008/01/15/dom-jquery-javascript/</link>
		<comments>http://www.jquerytips.com/2008/01/15/dom-jquery-javascript/#comments</comments>
		<pubDate>Tue, 15 Jan 2008 11:41:59 +0000</pubDate>
		<dc:creator>Tee++;</dc:creator>
				<category><![CDATA[jQuery]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[Node]]></category>
		<category><![CDATA[selector]]></category>

		<guid isPermaLink="false">http://www.jquerytips.com/2008/01/15/%e0%b9%80%e0%b8%9b%e0%b8%a3%e0%b8%b5%e0%b8%a2%e0%b8%9a%e0%b8%a1%e0%b8%a7%e0%b8%a2%e0%b8%81%e0%b8%b2%e0%b8%a3%e0%b9%84%e0%b8%95%e0%b9%88-dom-%e0%b8%94%e0%b9%89%e0%b8%a7%e0%b8%a2-javascript-%e0%b8%9b/</guid>
		<description><![CDATA[สำหรับคนที่เริ่มหัด jQuery ใหม่ๆ อาจจะมีคำถามในใจว่า jQuery มันดีกว่า Javascript ปกติยังไง ทำไมถึงต้อง jQuery ในเมื่อ js ก็ทำได้อยู่แล้ว วันนี้ผมเลยขอนำเสนอบทความเปรียบเทียบ ความสามารถนึงในนั้นของ jQuery คือการไต่เอกสารในรูปแบบ DOM ว่ามีขั้นตอนง่ายและสั้นกว่า ยังไง &#8230;
Javascript without jQuery
var external_links = document.getElementById('external_links');
var links = external_links.getElementsByTagName('a');
for (var i=0;i < links.length;i++) {
    var link = links.item(i);
    link.onclick = function() {
        [...]]]></description>
			<content:encoded><![CDATA[<p>สำหรับคนที่เริ่มหัด jQuery ใหม่ๆ อาจจะมีคำถามในใจว่า jQuery มันดีกว่า Javascript ปกติยังไง ทำไมถึงต้อง jQuery ในเมื่อ js ก็ทำได้อยู่แล้ว วันนี้ผมเลยขอนำเสนอบทความเปรียบเทียบ ความสามารถนึงในนั้นของ jQuery คือการไต่เอกสารในรูปแบบ DOM ว่ามีขั้นตอนง่ายและสั้นกว่า ยังไง &#8230;<span id="more-19"></span></p>
<p><strong>Javascript without jQuery</strong><br />
<code>var external_links = document.getElementById('external_links');<br />
var links = external_links.getElementsByTagName('a');<br />
for (var i=0;i < links.length;i++) {<br />
    var link = links.item(i);<br />
    link.onclick = function() {<br />
        return confirm('You are going to visit: ' + this.href);<br />
    };<br />
}</code></p>
<p><strong>jQuery</strong><br />
<code>$('#external_links a').click(function() {<br />
    return confirm('You are going to visit: ' + this.href);<br />
});</code></p>
<p>จากตัวอย่างด้านบนเราจะเห็นได้ว่า Javascript แบบปกติ ต้องมีการ get กันเป็นทอดตั้งแต่<br />
1. getElemenetById<br />
2. getElementsBytagName<br />
3. วนลูปเพื่อหา event onclick<br />
4. เรียกใช้ function</p>
<p>แต่ถ้าเป็น jQuery เราจะเขียนแค่<br />
1. เรียก id ที่ต้องการอ้างถึงรวมทั้ง a tag โดยใช้แค่<br />
<code>$("#external_links a") </code></p>
<p>จากนั้นใส่ event ที่ต้องการดักจับแล้วเรียก function ได้ทันที</p>
<p>จะเห็นได้ว่า Code สั้นกว่ากันมากและมีขั้นตอนน้อยกว่า ค่อนข้างเยอะ </p>
]]></content:encoded>
			<wfw:commentRss>http://www.jquerytips.com/2008/01/15/dom-jquery-javascript/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>
