Очередной черновик по селекторам

[devote]

На W3.org выложили очередной черновик по Selector API 2, кому интересно вот. Что больше поразило, воткнули пару новых методов, особо сильно не отличающих от querySelector/querySelectorAll называются find/findAll отличия лишь в том что можно будет указывать контекст поиска вторым параметром. Ну и еще matches укороченный.

[Deff]

Хорошая Новость!

[devote]

это вся их работа? или я что-то не понял

не совсем так, но в принципе да. Примерно так:

Element.prototype.find = Document.prototype.find = DocumentFragment.prototype.find = function( selector, context ) {
    return ( context || this ).querySelector( selector );
}
 
Element.prototype.findAll = Document.prototype.findAll = DocumentFragment.prototype.findAll = function( selector, context ) {
    return ( context || this ).querySelectorAll( selector );
}

[devote]

вот если бы они добавили в NodeList подобные методы, цены бы небыло. Что-то типо этого:

document.querySelectorAll('div[data-lala="tratat"]').find('a');

то-есть искать в найденном ранее. что бы не делать так:

var result = [], a = document.querySelectorAll('div[data-lala="tratat"]');
for( var i = 0; i < a.length; i++ ) {
    result = result.concat( a[ i ].querySelectorAll('a') );
}

цены бы им не было.. а так да добавили ерунду.

[devote]

ведь селекторы и так могут искать в найденном)

правда чтоль? а у меня почему то в консоль ошибка лезет:

<div><a></a></div>
<div><a></a></div>
<script>
    alert( document.querySelectorAll('div').querySelectorAll('a'));
</script>

у меня в консоле вот что:

[29.06.2012 20:48:30] JavaScript - http://lookatcode.com/showhtml
Inline script thread
Uncaught exception: TypeError: 'document.querySelectorAll('div').querySelectorAll' is not a function
Error thrown at line 2, column 4 in http://lookatcode.com/showhtml:
    alert( document.querySelectorAll('div').querySelectorAll('a'));

а у тебя что то иное чтоль?

[devote]

в строчке с селектором просто через пробел пиши следующий селектор

ты не понял.. это понятно что оно так будет работать, но иногда нужно найти в том что уже где-то в коде выдал селектор.. а не писать длиннющий селектор каждый раз..

[devote]

а можно пример?

возьми к примеру джуквери, там подобное реализовано:

var blocks = jQuery("div.blocks");

blocks.click(function() {
    // ... some code
    var spans = blocks.find( 'span.tratata' ).show(); // ищем в уже найденном ранее списке.
    // ... some code
    spans.find("b").html( '' ); // так же ищем в уже найденном списке
    // ... some code
});

а если писать постоянно вбивая одни и те же селекторы то будет выглядеть так:

jQuery("div.blocks").click(function() {
    // ... some code
    jQuery("div.blocks span.tratata" ).show();
    // ... some code
    jQuery("div.blocks span.tratata b").html( '' );
    // ... some code
});

куда удобнее и производительный вариант выше

[devote]

вообщем очень было бы не плохо иметь подобную реализацию:

NodeList.prototype.querySelector = function( selector ) {

    var elem, listLength = this.length;

    for( var i = 0; i < listLength; i++ ) {
        if ( elem = this[ i ].querySelector( selector ) ) {
            return elem;
        }
    }

    return null;
}

NodeList.prototype.querySelectorAll = function( selector ) {

    var result = [], // Instead the Array, use NodeList
        listLength = this.length;

    for( var i = 0; i < listLength; i++ ) {
        result = result.concat( Array.prototype.slice.call( this[ i ].querySelectorAll( selector ), 0 ) );
    }

    return result;
}

// но назначение прототипов объекту NodeList эфекта никакого не дает
// тоесть сделав такую хрень:
alert( document.querySelectorAll('div').querySelectorAll ); // получим undefined
// браузеры не добавляют пользовательский метод экземпляру NodeList
// хотя тестил я тока в опере.

[melky]

возьми к примеру джуквери, там подобное реализовано:

получается, она повлияла на решения W3C ? о ужас

[devote]

получается, она повлияла на решения W3C ? о ужас

нет она еще ни на что не повлияла, так как там еще нет такого. Но если бы было, то это было просто идеальным решением. Хотя конечно можно юзать каждый раз прогоняя через for.

Да и в принципе оно есть, но не совсем полноценное. Возьми к примеру getElementsByTagName он же возвращает NodeList и при поиске можно указать контекст, но лишь из отдного элемента а не из списка. А в джуквери а точнее во всех селекторах написанных людьми, можно список элементов указать в контексте.