Posts Tagged ‘DOM’

Check if an element exists in the DOM with jQuery

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.

Check if a specific element exists based on ID.

if($('#my-element').length) {
    // Action code goes here
}

Check if a specific or several elements exists based on CLASS.

if($('.my-element').length) {
    // Elment found
}

or

if($('.my-element').length != 0) {
    // Elements found
}

or

if($('.my-element').length > 0) {
    // Elements found
}

Remy Sharp have written an excellent post and recorded a screencast that explains this further on jQuery for Designers

Load that DOM, please. Thank you!

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 “DOM ready”. We should just be thankful that we don’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.

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’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.

We’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.

DOM readiness in Dojo
Learn more about Dojo’s addOnLoad

dojo.addOnLoad(function(){
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello Dojo! DOM is loaded!');
}

DOM readiness in jQuery
Learn more about jQuery’s ready

$(document).ready(function () {
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello jQuery! DOM is loaded!');
}

DOM readiness in MooTools
Learn more about MooTools DomReady

window.addEvent('domready', function() {
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello MooTools! DOM is loaded!');
}

DOM readiness in Prototype
Learn more about Prototypes document observe and loaded

document.observe("dom:loaded", function() {
    // The DOM is ready, lets say hello!
    say_hello();
});
 
function say_hello() {
    alert('Hello Prototype! DOM is loaded!');
}

DOM readiness in YUI 3
Learn more about YUI 3′s domready

YUI().use('node', function(Y) {
 
    function init() {
        // The DOM is ready, lets say hello!
        say_hello();
    }
 
     Y.on("domready", init); 
});
 
function say_hello() {
    alert('Hello YUI 3! DOM is loaded!');
}