dev.enekoalonso.com » dom

Finding duplicate ID’s on an HTML page

Eneko Alonso — Fri, 06 May 2011 17:49:34 +0000

Looks like sometimes we forgot element ID’s are meant to be unique on a HTML page. Here is a little bit of code I just wrote to find duplicate ID’s on a page (run the code on your browser’s javascript console):

var idList = {};
var nodes = document.getElementsByClassName('');
for (var i in nodes) {
if (!isNaN(i) && nodes[i].id) {
idList[nodes[i].id] = idList[nodes[i].id]? idList[nodes[i].id]+1:1;
}
}
for (var id in idList) {
if (idList[id] > 1) console.log("Duplicate id: #" + id);
}

Have fun!

May 12, 2011 -- Angry Birds as a Web App (0)
May 14, 2010 -- Interesting JSON vulnerability (old stuff) (0)
April 14, 2010 -- Getting unique timestamps in Javascript (0)
March 24, 2010 -- Mooml 1.1 – No more eval(), say Hi to Mooml.Template and Mooml.Templates (0)

Interesting JSON vulnerability (old stuff)

Eneko Alonso — Fri, 14 May 2010 21:00:56 +0000

Somebody at work passed this article about an interesting vulnerability in web APIs that use JSON.

The exploit combines Cross Site Request Forgery (CSRF) with a JSON Array hack allowing an evil site to grab sensitive user data from an unsuspecting user. The hack involves redefining the Array constructor, which is totally legal in Javascript.

http://haacked.com/archive/2008/11/20/anatomy-of-a-subtle-json-vulnerability.aspx

I’ve found a while ago that you can put pretty much any URL on a script tag and the browser will download the content right away, whether it’s javascript or not, as long as the type attribute in the tag is set to ‘text/javascript’. But although browsers download the URL content and place it inside the script tag, you can’t get to the content from Javascript (using innerHTML, for instance). Or can you? Apparently, Firebug can, at least on the HTML tab. I’m not sure if Firebug has direct access to the DOM, other than through Javascript, but I hope that is the case.

May 6, 2011 -- Finding duplicate ID’s on an HTML page (0)
August 12, 2010 -- Little tricks: concatenating arrays in Javascript (4)
February 19, 2010 -- Having fun with Mooml & Twitter (0)
October 12, 2011 -- Command line scripting with Node.js (0)

I never use $$ on my projects (and barely use $)

Eneko Alonso — Sat, 16 Jan 2010 04:53:28 +0000

On all the projects I’ve worked on, I always try to follow the MVC arquitectural pattern, separating the model from the view *and* creating a controller. It may be a simple controller in charge of a tab-set, or an accordion. Or it may be a full size controller in charge of the whole page structure, on sites that make an extensive use of javascript.

Either way, I always have a controller for a dynamic section of the page and the controller always works with the container of that section. If I need to reference any element inside the container I will use this.container.getElementById() or this.container.getElements(), which will do a search only on the child elements of the container and not on the whole dom tree of the page.

Yes, it is very usual to see nowadays code that alters the links of a page we are searching the whole page. And coding like that is just a waste of resources.

December 18, 2008 -- Gravity in the DOM (0)
May 6, 2011 -- Finding duplicate ID’s on an HTML page (0)
October 5, 2010 -- Javascript console in the terminal (command line) (1)
September 17, 2010 -- MooTools Core for Server and Mobile Development (1)

Gravity in the DOM

Eneko Alonso — Fri, 19 Dec 2008 05:58:27 +0000

A couple of days ago I created a demo to simulate planets on a 2D universe interacting each other like Gravity does in our lives. To compute the movements every planet had to be evaluated with each other on every step. Their position will be affected by the other planet position and in proportion to their respective mass. This means the speed of the planets doesn’t impact the attraction between them.

Today I decided to extend this demo a little bit more and I added a few things:

Mass parameter to make mass independent from size.
Collision detector to merge planets when they meet each other with color effect.
Orbit trails

The result is very nice. The first option make it possible to create bigger planets with more mass but with a size that fits appropiately on the screen. The second option merged planets that collide, making it more like a real world. Finally, the orbit trails are just some sugar to see the trajectory followed by the plantes. To avoid the screen getting very messy, the trails clean up themselves after 25 seconds.

As you can see, the universe controller uses the Thread class I was talking about few days ago.

See both demos here:
http://dev.enekoalonso.com/research/gravity.php
http://dev.enekoalonso.com/research/gravity-2.php

PS: Please note there is no Canvas involved here. All objects on screen are DOM elements. Of course this is not the best way to do graphic animations on the web, but it is fun!

January 15, 2010 -- I never use $$ on my projects (and barely use $) (0)
April 23, 2009 -- Sending messages between Javascript objects (2)
December 14, 2008 -- Threads in Javascript (1)
May 6, 2011 -- Finding duplicate ID’s on an HTML page (0)

Very basic $ function to deal with element classes

Eneko Alonso — Fri, 05 Dec 2008 05:36:37 +0000

If you are working with plain Javascript but still want to have some advantajes when dealing with element classes (element.className) you can write a small $ function like this:

var $ = function(element) {
this.element = element;
this.getClasses = function() {
return this.element.className.replace(/\s+/,' ').split(' ');
}
this.hasClass = function(className) {
var classes = this.getClasses();
return (classes.indexOf(className) > -1);
}
this.addClass = function(className) {
if (!this.hasClass(className)) {
this.element.className += (this.element.className ? ' ' :'') + className;
}
}
this.removeClass = function(className) {
if (this.hasClass(className)) {
var classes = this.getClasses();
classes.splice(classes.indexOf(className), 1);
this.element.className = classes.join(' ');
}
}
return this;
}

Then, once you have a variable that contains a DOM element, you can use it like this:

$(mydomelement).addClass('test');
if ($(mydomelement).hasClass('test')) alert('element has class test');
$(mydomelement).removeClass('test');
var classes = $(mydomelement).getClasses();

This will let you work with elements that have multiple classes very easily.

May 6, 2011 -- Finding duplicate ID’s on an HTML page (0)
May 14, 2010 -- Interesting JSON vulnerability (old stuff) (0)
January 18, 2010 -- Finally: Singletons, the Mootools way (0)
January 17, 2010 -- Mooml: Mootools markup language (intro) (7)

dev.enekoalonso.com » dom

Finding duplicate ID’s on an HTML page

Related Posts:

Interesting JSON vulnerability (old stuff)

Related Posts:

I never use $$ on my projects (and barely use $)

Related Posts:

Gravity in the DOM

Related Posts:

Very basic $ function to deal with element classes

Related Posts: