sélecteurs.md

Sélecteurs

Balises

console.time('jQuery');

// jQuery
var divs = $('div');

console.timeEnd('jQuery')

console.time('vanilla')

// vanilla
var divs = document.querySelectorAll('div');

console.timeEnd('vanilla');

ID

 // jQuery  
var el = $(".my-id")
 
// vanilla 
var el = document.getElementsById("my-id")  // plus rapide
document.querySelector("#my-id")


// on peut inspecter quelques propiétés DOM de cet élement
console.log(el.NodeName)
console.log(el.NodeType)
console.log(el.children.length)

Classe

// jQuery  
var els = $(".my-class")
 
// vanilla
var els = document.getElementsByClassName("my-class")  // plus rapide
var els = document.querySelectorAll(".my-class")

//jQuery iteration
els.each(function(i, el){
 
  // i est l'index en cours , el est l'élement
  $(this).css('background-color', 'blue');  // = el.css(...)
  
});

//vanilla iteration
for (var i = 0, len = els.length; i < len; i++) {
  els[i].style.backgroundColor = "blue";
}

// Une autre manière d'itérer sur une collection NodeList
[].slice.call(els).forEach(function(el,i){
     el.style.backgroundColor = "blue";
});

/*
On appelle la méthode "slice" de l'objet natif "Array", 
ce qui permets de renvoyer la collection d'élements sous la forme d'un tableau. 
On peut ensuite utiliser la méthode "forEach" disponible pour tout objet natif de type "Array".

L'expression "[].slice.call(...)" est un raccourci pour "Array.prototype.slice.call()".

*/

CSS

// jQuery 
$(".my-class li:first-child")

// vanilla 
document.querySelectorAll(".my-class li:first-child") 

Attribut

// jQuery
$('img[src="myimage.png"]')

// vanilla
document.querySelectorAll("img[src='my-image.png']");


// jQuery
$('img').filter(':first').attr('alt', 'MOn image')

// Vanilla
document.querySelector('img').setAttribute('alt', 'Mon image')

Attribut HTML5

// jQuery
$('[data-attribute="value"]')

// vanilla
document.querySelectorAll('[data-attribute="value"]');

Nom de l'attribut

// jQuery
$('[id]')

// vanilla
document.querySelectorAll('[id]');

Élement unique

// jQuery
$(".my-class").get(0) //retourne un élement du DOM
$(".my-class").eq(0)  //réduit la collection au premier élement.
 
// vanilla 
document.querySelector(".my-class")

Valeur d'un attribut

// jQuery
$('[name^="value"]')   // tous les attributs "id" commençant par "value"
$('[name$="value"]')   // tous les attributs "id" finissant par "value" 
$('[name*="value"]')   // tous les attributs "id" contenant "value"


// vanila
document.querySelectorAll([name^='value']) 
document.querySelectorAll([name$='value'])
document.querySelectorAll([name*='value'])

Valeur d'un noeud texte

// jQuery
$( "div:contains('some-text')" )

//vanilla
var els = document.querySelectorAll('article > p a');
va matches = return [].filter.call(els, function(el){
  return RegExp('some-text').test(el.textContent);  // Définit ou obtient le contenu textuel d'un nœud et de ses descendants.
});

// vanilla ( avec une requête XPATH )
document.evaluate('//*[contains(text(),"some-text")]')
 

Une nano librairie

(function (window){

	var document = window.document,

    _isTag = /^[a-z0-9]+$/i,
	_isClass = /^\.[-\w]+$/i,
	_isId = /^#[-\w]+$/i

	;

	function f(selector){

		if(!selector){
			return null;
		}

		if(typeof selector === 'string'){
			return _find(document, selector)
		}
		else if(selector == document || selector == window )
		{
			return [selector];
		}
	};

	function _find(element, selector){

		if(selector){

			if(_isTag.test(selector)){
				return [].slice.call(element.getElementsByTagName(selector));
			}
			else{
				return [].slice.call(element.querySelectorAll(selector));
			}
	
		}

		return [];
	};

	f.text = function(element){
		return element.textContent;
	}

	// f devient une propriété de l'objet "window"
	window.f = f;

})(window);

It's getElementById not getElementsById ;)