aNieto2K Desarrollo web, Wordpress, y alguna cosilla más

Hoy via Ajaxian, leo que la W3C ha publicado un borrador sobre Selectors API, que se trata de mejorar el actual sistema de referencia de objetos del actual DOM. Al igual que herramienta como cssQuery de Dean Edwars, podremos acceder a cualquier elemento de nuestro árbol DOM usando la nomenclatura de CSS.

Para ello dispondremos de dos nuevas métodos hijos del objeto Document que nos permitirá hacer referencia a uno o varios elementos.

querySelector()

Element querySelector(in DOMString selectors, in NSResolver nsresolver);

Con esta función podremos seleccionar un solo elemento usando  la estructura usada actualmente en CSS.

Ejemplo

//Javascript actual 
function getObj() {
	var obj = document.getElementsByTagName("a");
	for (i in obj.length)
		if (obj[i].href == "http://www.google.es") return obj[i];
	return null;
}

var result = getObj();

//Selectors API
var result = document.querySelector('a[href="http://www.google.es"]');

querySelectoAll()

StaticNodeList  querySelectorAll(in DOMString selectors, in NSResolver nsresolver);

Con esta función podremos obtener una lista de elementos que cumplan las características que estamos buscando usando los selectores.

Ejemplo

//HTML
<table id="score">
  <thead>
    <tr>
      <th>Test
      <th>Result
  <tfoot>
    <tr>
      <th>Average
      <td>82%
  <tbody>
    <tr>
      <td>A
      <td>87%
    <tr>
      <td>B
      <td>78%
    <tr>
      <td>C
      <td>81%
</table>
//Javascript actual
var table = document.getElementById("score");
var groups = table.tBodies;
var rows = null;
var cells = [];

for (var i = 0; i < groups.length; i++) {
  rows = groups[i].rows;
  for (var j = 0; j < rows.length; j++) {
    cells.push(rows[j].cells[1]);
  }
}
//Selectors API 
var cells = document.querySelectorAll("#score>tbody>td:nth-of-type(2)");

Aunque en la API esté la cosa bastante clara y se haya decidido que esta funcionalidad será incrustada en el nuevo core DOM 3, aún se está debtiendo sobre que nombres se van a usar. Parece que la cosa está entre selectElement() / selectAllElements() y querySelector() / querySelectorAll();.