[Résolu] GetElementsByClass

(reprise du message précédent)

Il reste à ce stade à parcourir le tableau et à appeler les fonctions natives pour matcher les bons élements, il faut par contre implémenter la notion de pointeur, puisqu'on déscend l'arbre du DOM

Bon voilà j'ai essayer le selecteur js type css :

function $(selector){

  var regEsp = /\s/;
  
  if(regEsp.test(selector)){
    var css = selector.split(regEsp);
    var context = selectTagOrAttribut(css[0]);
    var element = selectTagOrAttribut(css[1],context);
  }
  else{
    var element = selectTagOrAttribut(selector);
  }
  return element;
}

function selectTagOrAttribut(selector,context){
  
  var context = (context)? context:document;

  var regId = /^#/;
  var regClass = /^\./;

  var regTag = /#|\./;
  var type = regTag.exec(selector);
  
  if(regId.test(selector)||regClass.test(selector)){
    var noTag = selectIdOrClass(selector,context,"*")
    return noTag;
  }else if(regTag.test(selector)){    
    var cutSelector = selector.split(type);
    var tag = selectIdOrClass(type+cutSelector[1],context,cutSelector[0]);
    return tag;
  }else{
    var classElements = new Array();
	  var els = context.getElementsByTagName(selector);
    for (I=0,j=0;I<els.length; I++) {
		  classElements[j] = els[I];
		  j++;
	  }
    return classElements;
  }
}

function selectIdOrClass(selector,context,tag){
    
  var regId = /^#/;
  var regClass = /^\./;

  var attribut = selector.replace(/#|\./.exec(selector),'')

  if(regId.test(selector)){
     var idElement = document.getElementById(attribut);
     return idElement;
  }
  if(regClass.test(selector)){
    var classElements = new Array();
	  var els = context.getElementsByTagName(tag);
    for (I=0,j=0;I<els.length; I++) {
		  if (els[I].className == attribut) {
		    classElements[j] = els[I];
		    j++;
		  }
	  }
    return classElements;
  }
}

on peut faire :
$('#menu'),
$('.item'),
$('ul#menu li'),
$('ul#menu li.item'),
$('#menu .item'),

J'ai juste oublié pour les elements aux multiples classes...
C'est encore un peu long, pas trés bien encapsulé mais je compte sur vous pour l'améliorer .
Modifié par matmat (12 Oct 2007 - 02:04)

Le plus simple reste d'utiliser filter() et de toujours travailler avec des arrays
Modifié par Shinuza (12 Oct 2007 - 03:57)

Shinuza a écrit :
Non, c'est juste la logique, le fait que ton code soit lié à la structure de la page est totalement illogique.

Shinuza a écrit :
Il suffit de déclarer le code javascript entre CDATA, mais vu qu'il est censé être dans un fichier à part, je ne vois pas le soucis.

Ce n'est pas moi qui décide pour ce cas. Mais, je te répondrais quand même en toute franchise que sur mon propre site il y a également du JS (non indispensable qui apporte un confort suplémentaire) dans ma structure.
Charger du JavaScript systématiquement sur toute les pages alors que l'on en a besoin sur une seul c'est pas terrible, j'ai des moyens à ma disposition, je les utilises. De plus on fais avec les connaissances qu'on a, réfléchi bien à ça avant de donner des leçons aussi expéditive.
Mon site est structuré et valide, c'est déjà bien suffisamment difficile comme ça pour ne pas en plus céder à la dernière mode du 0 JS dans la structure. Il y a des limites quand même, s'il y a des navigateur "spéciaux" que ça gène il n'ont cas l'ignorer, comme n'importe quel navigateur avec le JS de désactivé.

a écrit :
Mon site est structuré et valide, c'est déjà bien suffisamment difficile comme ça pour ne pas en plus céder à la dernière mode du 0 JS dans la structure.

Uuuurk. C'est pas une mode du tout, ca fait parti du "site structuré".
Et ce sont des conseils qui (te) sont donnés ici, pour que chacun puisse apprendre et s'améliorer.

J'ai actualisé ma fonction selector universel, c'est trés pratique:

Usages :

$('#div')
$('#div tag.class')
$('tag.class')
$('.class')
$('tag')

La fonction

function $(selector){

  if(/^#/.test(selector) && !/\s/.test(selector)){// id
    var getId = selector.replace(/#/,''); 
	  return document.getElementById(getId);
  }else{ // tag ou class  
     
    if(/\./.test(selector)){// class         
      var context = (/\s/.test(selector))? $(selector.split(/\s/)[0]) : document;   
      var tagOrStyle = (/\s/.test(selector))? selector.split(/\s/)[1] : selector;    
      var styleName = (/^\./.test(tagOrStyle))? tagOrStyle.replace(/\./,'') : tagOrStyle.split(/\./)[1];
      var tagName = (/^\./.test(tagOrStyle))? "*" : tagOrStyle.split(/\./)[0];      
    }else{// tag  
      var context = (/\s/.test(selector))? $(selector.split(/\s/)[0]) : document;   
      var tagName = (/\s/.test(selector))? selector.split(/\s/)[1] : selector;       
    }
  
    var tagElements = new Array();
    var tag = context.getElementsByTagName(tagName);
    var tag_length = tag.length;
  	
    for (I=0;I<tag_length; I++) {
      if(styleName){
        if(RegExp("(^|\\s)"+styleName+"(\\s|$)").test(tag[I].className)){
          tagElements.push(tag[I]);
        }
      }else{
        tagElements.push(tag[I]);
      }
    }
  return tagElements;
  }
   	
}

Si vous avez des idées pour l'améliorer...
Modifié par matmat (09 Nov 2007 - 19:52)

Peut être que ça peur répondre à ton attente :

/**
 * CSSClass.js: utilities for manipulating the CSS class of an HTML element.
 * 
 * This module defines a single global symbol named CSSClass.  This object
 * contains utility functions for working with the class attribute (className
 * property) of HTML elements.  All functions take two arguments: the element
 * e being tested or manipulated and the CSS class c that is to be tested,
 * added, or removed.  If element e is a string, it is taken as an element
 * id and passed to document.getElementById().
 */
var CSSClass = {};  // Create our namespace object

// Return true if element e is a member of the class c; false otherwise
CSSClass.is = function(e, c) {
    if (typeof e == "string") e = document.getElementById(e); // element id

    // Before doing a regexp search, optimize for a couple of common cases.
    var classes = e.className;
    if (!classes) return false;    // Not a member of any classes
    if (classes == c) return true; // Member of just this one class

    // Otherwise, use a regular expression to search for c as a word by itself
    // \b in a regular expression requires a match at a word boundary.
    return e.className.search("\\b" + c + "\\b") != -1;
};

// Add class c to the className of element e if it is not already there.
CSSClass.add = function(e, c) {
    if (typeof e == "string") e = document.getElementById(e); // element id
    if (CSSClass.is(e, c)) return; // If already a member, do nothing
    if (e.className) c = " " + c;  // Whitespace separator, if needed
    e.className += c;              // Append the new class to the end
};

// Remove all occurrences (if any) of class c from the className of element e
CSSClass.remove = function(e, c) {
    if (typeof e == "string") e = document.getElementById(e); // element id
    // Search the className for all occurrences of c and replace with "".
    // \s* matches any number of whitespace characters.
    // "g" makes the regular expression match any number of occurrences
    e.className = e.className.replace(new RegExp("\\b"+ c+"\\b\\s*", "g"), "");
};