All posts in Web Development

So in the first part of this small snippet/tutorial i gave you a general concept of targeting classes in a cross browser environment without the need to use a library such as jQuery, in this second and last part i will show you the last few modifications needed to allow for element specific selections and multiple class selections with just a couple of changes. Basically the main two changes in this final part will focus on the wildcard selector and the regular expression in which are the key declarations we need otherwise the prototype won’t work as expected or at all, the first change will need to make is changing document to this:

var ele = document.getElementsByTagName('*')

↓↓↓↓↓↓↓↓↓↓

var ele = this.getElementsByTagName('*')

Next we need to change the regular expression so it looks for multiple classes within the given argument, to accomplish this we simply use the split and join methods like below:

reg = new RegExp(c, 'i')

↓↓↓↓↓↓↓↓↓↓

reg = new RegExp('(' + c.split(' ').join('|') + ')', 'i')

Read more…

I’m sure this has been posted before on the web but i felt like writing my own version anyway, if you notice performance tweaks as such or anything else simply leave a comment below and I’ll alter the code.

Basically these days classes are the best way for managing any website as you can assign them to elements and specifically select those elements in the CSS just by associating it with the class name, JS is also a great tool for manipulating these elements as it allows us to select a whole group of them at once without the need to manually go through and find the elements. This is all good and well when it comes to use libraries such as jQuery but when you only need to write a small amount of JS you would need something more simple.

In modern browsers the document.getElementsByClassName method is available to use but in IE8 and below the story isn’t the same, to accomplish the exact same result in all browsers we simply need to emulate the method as a protoype of the Object object.

Object.prototype.getElementsByClassName = function(c) {}

Now we can just create this really simple prototype and not think twice about how it runs in moderns browsers but if we want to avoid using extra processing power we can wrap it in an IF statement and check to see if the method exists within the document object.

if (typeof document.getElementsByClassName === 'undefined') {
    Object.prototype.getElementsByClassName = function(c) {}
}

Read more…