Need help with querySelector alternative

Hey All,

I'm using mootools and need help with an alternative to "querySelector" and "querySelectorAll" since its not working in ie.

This is the line I need help with:

var listitem = content.querySelector(".list ul li");

var allContent = content.querySelectorAll(".listpage");

Any help would be great. Thanks.
Who is Participating?
Chris StanyonConnect With a Mentor Commented:
I don't really use MooTools, but your code seems to be using traditional javascript within your MooTools code. While that's not wrong, MooTools should offer you most of what you need, and make things easier

Here's a more MooTools way to do it. Not complete code, but should give you more of an idea.

window.addEvent('domready', function() {
	var content = $("content");
	if (content) {
		var listitem = content.getElement(".list ul li");
		var idCheck ="_")[1];
		var tabs = content.getElements(".bbtabs ul li");
		content.getElements(".listpage").each(function(el) {
			el.addEvent('click',function() {
				//put your click code in here.

Open in new window

Chris StanyonCommented:
Don't you just use the native Mootool selectors: $, $$, $E, $ES:

var listitem = $E('.list ul li');
var allContent = $$(".listpage");
yando18Author Commented:
Here is the full code. Its tabbed content. I have tried to implement what you have above but still get an error in ie for querySelector. I'm missing something.

    var content = $("listContent");
    if (content) {
        var listitem = content.querySelector(".list ul li");
        var idCheck ="_")[1];

        var pages = content.querySelectorAll(".listpage");
            for (var i = 1; i < pages.length; i++) {
              pages[i].setStyle('display', 'none');

        var tabs = content.querySelectorAll(".bbtabs ul li");
            for (var i = 0; i < tabs.length; i++) {
              tabs[i].addEvent('click', function (){
                  var current = this.parentNode.getProperty("data");
                  $$("#tabHeader_" + current).removeClass("active");
                  $$("#listpage_" + current).setStyle('display', 'none');

                  var idCheck ="_")[1];
                  $$("#listpage_" + idCheck).setStyle('display', 'block');

Open in new window

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.