<?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>Code That Matters &#187; DOM</title>
	<atom:link href="http://www.codethatmatters.com/tag/dom/feed/" rel="self" type="application/rss+xml" />
	<link>http://www.codethatmatters.com</link>
	<description>Pylons, rails, jQuery and other stuff that matters</description>
	<lastBuildDate>Sat, 16 Jul 2011 10:57:54 +0000</lastBuildDate>
	<generator>http://wordpress.org/?v=2.8.4</generator>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
			<item>
		<title>Check if an element exists in the DOM with jQuery</title>
		<link>http://www.codethatmatters.com/2010/04/check-if-an-element-exists-in-the-dom-with-jquery/</link>
		<comments>http://www.codethatmatters.com/2010/04/check-if-an-element-exists-in-the-dom-with-jquery/#comments</comments>
		<pubDate>Mon, 19 Apr 2010 19:17:14 +0000</pubDate>
		<dc:creator>jorgen</dc:creator>
				<category><![CDATA[Coding]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[element]]></category>
		<category><![CDATA[exists]]></category>
		<category><![CDATA[find]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>

		<guid isPermaLink="false">http://www.codethatmatters.com/?p=192</guid>
		<description><![CDATA[Need to check if an element exists in the page you have loaded using jQuery. It is very simple. The jQuery object encapsulates zero or more DOM elements, and allows us to interact with them in many different ways. Therefor, we can just use the length property to check if our jQuery object, that is [...]]]></description>
			<content:encoded><![CDATA[<p>Need to check if an element exists in the page you have loaded using jQuery. It is very simple. The jQuery object encapsulates zero or more DOM elements, and allows us to interact with them in many different ways. Therefor, we can just use the length property to check if our jQuery object, that is returned by our selector query has one or several DOM elements attached to it.</p>
<p>Check if a specific element exists based on ID.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span class="kw1">if</span><span class="br0">&#40;</span>$<span class="br0">&#40;</span><span class="st0">'#my-element'</span><span class="br0">&#41;</span>.<span class="me1">length</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// Action code goes here</span>
<span class="br0">&#125;</span></pre></div></div>

<p>Check if a specific or several elements exists based on CLASS.</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span class="kw1">if</span><span class="br0">&#40;</span>$<span class="br0">&#40;</span><span class="st0">'.my-element'</span><span class="br0">&#41;</span>.<span class="me1">length</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// Elment found</span>
<span class="br0">&#125;</span></pre></div></div>

<p>or</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span class="kw1">if</span><span class="br0">&#40;</span>$<span class="br0">&#40;</span><span class="st0">'.my-element'</span><span class="br0">&#41;</span>.<span class="me1">length</span> <span class="sy0">!=</span> <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// Elements found</span>
<span class="br0">&#125;</span></pre></div></div>

<p>or</p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;"><span class="kw1">if</span><span class="br0">&#40;</span>$<span class="br0">&#40;</span><span class="st0">'.my-element'</span><span class="br0">&#41;</span>.<span class="me1">length</span> <span class="sy0">&gt;</span> <span class="nu0">0</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// Elements found</span>
<span class="br0">&#125;</span></pre></div></div>

<p>Remy Sharp have written an excellent post and recorded a screencast that explains this further on <a href="http://jqueryfordesigners.com/element-exists/">jQuery for Designers</a></p>
]]></content:encoded>
			<wfw:commentRss>http://www.codethatmatters.com/2010/04/check-if-an-element-exists-in-the-dom-with-jquery/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
		<item>
		<title>Load that DOM, please. Thank you!</title>
		<link>http://www.codethatmatters.com/2010/01/load-that-dom-please-thank-you/</link>
		<comments>http://www.codethatmatters.com/2010/01/load-that-dom-please-thank-you/#comments</comments>
		<pubDate>Tue, 26 Jan 2010 22:33:47 +0000</pubDate>
		<dc:creator>jorgen</dc:creator>
				<category><![CDATA[Uncategorized]]></category>
		<category><![CDATA[Dojo]]></category>
		<category><![CDATA[DOM]]></category>
		<category><![CDATA[javascript]]></category>
		<category><![CDATA[jQuery]]></category>
		<category><![CDATA[MooTools]]></category>
		<category><![CDATA[Prototype]]></category>
		<category><![CDATA[YUI3]]></category>

		<guid isPermaLink="false">http://www.codethatmatters.com/?p=167</guid>
		<description><![CDATA[Get started with 5 different JavaScript frameworks and how they handle DOM readiness. 
Frequently there is talk about to check if the DOM is loaded or not when using JavaScript today. There is quite a few ways to do this and it is an interesting story to read up about the origin of &#8220;DOM ready&#8221;. [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Get started with 5 different JavaScript frameworks and how they handle DOM readiness. </strong></p>
<p>Frequently there is talk about to check if the DOM is loaded or not when using JavaScript today. There is quite a few ways to do this and it is an interesting story to read up about the origin of &#8220;DOM ready&#8221;. We should just be thankful that we don&#8217;t have to think about this on a everyday basis and that guys like John Resig does what he does and just hands it over to us. So we can play with it and build businesses around it. Thank you all JavaScript framework creators and contributors.</p>
<p>There is a whole bunch of great JavaScript frameworks and libraries out there, with various specialities and pros and cons. I mainly use jQuery, Prototype and sometimes I play with YUI. jQuery and Prototype aren&#8217;t that different from each other on a high level and easy to get started with. YUI on the other hand requires a bit of more knowledge and works a bit different. Despite your choice of JavaScript framework, there is one thing that we all want to know when getting started with one. How to check if the DOM is loaded.</p>
<p>We&#8217;ll look at how to check if the DOM is loaded in five different JavaScript frameworks; Dojo, jQuery, MooTools, Prototype and YUI 3. First out is Dojo.</p>
<p><strong>DOM readiness in Dojo</strong><br />
Learn more about Dojo&#8217;s <a href="http://api.dojotoolkit.org/jsdoc/1.3.2/dojo.addOnLoad">addOnLoad</a></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">dojo.<span class="me1">addOnLoad</span><span class="br0">&#40;</span><span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span><span class="br0">&#123;</span>
    <span class="co1">// The DOM is ready, lets say hello!</span>
    say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="kw2">function</span> say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">'Hello Dojo! DOM is loaded!'</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>

<p><strong>DOM readiness in jQuery</strong><br />
Learn more about jQuery&#8217;s <a href="http://docs.jquery.com/Events/ready">ready</a></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">$<span class="br0">&#40;</span>document<span class="br0">&#41;</span>.<span class="me1">ready</span><span class="br0">&#40;</span><span class="kw2">function</span> <span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// The DOM is ready, lets say hello!</span>
    say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="kw2">function</span> say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">'Hello jQuery! DOM is loaded!'</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>

<p><strong>DOM readiness in MooTools</strong><br />
Learn more about MooTools <a href="http://mootools.net/docs/core/Utilities/DomReady">DomReady</a></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">window.<span class="me1">addEvent</span><span class="br0">&#40;</span><span class="st0">'domready'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// The DOM is ready, lets say hello!</span>
    say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="kw2">function</span> say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">'Hello MooTools! DOM is loaded!'</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>

<p><strong>DOM readiness in Prototype</strong><br />
Learn more about Prototypes <a href="http://api.prototypejs.org/dom/document.html">document observe and loaded</a></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">document.<span class="me1">observe</span><span class="br0">&#40;</span><span class="st0">&quot;dom:loaded&quot;</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="co1">// The DOM is ready, lets say hello!</span>
    say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="kw2">function</span> say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">'Hello Prototype! DOM is loaded!'</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>

<p><strong>DOM readiness in YUI 3</strong><br />
Learn more about YUI 3&#8217;s <a href="http://developer.yahoo.com/yui/3/event/#ondomready">domready</a></p>

<div class="wp_syntax"><div class="code"><pre class="javascript" style="font-family:monospace;">YUI<span class="br0">&#40;</span><span class="br0">&#41;</span>.<span class="kw2">use</span><span class="br0">&#40;</span><span class="st0">'node'</span><span class="sy0">,</span> <span class="kw2">function</span><span class="br0">&#40;</span>Y<span class="br0">&#41;</span> <span class="br0">&#123;</span>
&nbsp;
    <span class="kw2">function</span> init<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
        <span class="co1">// The DOM is ready, lets say hello!</span>
        say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span><span class="sy0">;</span>
    <span class="br0">&#125;</span>
&nbsp;
     Y.<span class="me1">on</span><span class="br0">&#40;</span><span class="st0">&quot;domready&quot;</span><span class="sy0">,</span> init<span class="br0">&#41;</span><span class="sy0">;</span> 
<span class="br0">&#125;</span><span class="br0">&#41;</span><span class="sy0">;</span>
&nbsp;
<span class="kw2">function</span> say_hello<span class="br0">&#40;</span><span class="br0">&#41;</span> <span class="br0">&#123;</span>
    <span class="kw3">alert</span><span class="br0">&#40;</span><span class="st0">'Hello YUI 3! DOM is loaded!'</span><span class="br0">&#41;</span><span class="sy0">;</span>
<span class="br0">&#125;</span></pre></div></div>

]]></content:encoded>
			<wfw:commentRss>http://www.codethatmatters.com/2010/01/load-that-dom-please-thank-you/feed/</wfw:commentRss>
		<slash:comments>0</slash:comments>
		</item>
	</channel>
</rss>

