39184

[code]

    func(document.querySelector('div > span[data-name="name"]');
    
    function func(element) {
      // div > span[data-name="name"] という文字列をここで使いたい
    }
    
[/code]

`querySelector()` の引数で渡したCSSセレクタを `func()` 関数内で取得することはできますか？


CC BY-SA 3.0
2017-10-31T08:23:24.297
39178
2017-10-31T13:44:36.517
19687
question
javascript html
querySelector()で渡したCSSセレクタ文字列を関数内で使用したい


文字列引数としてセレクタを渡すのが不可なばあい、実現するのは困難かとおもわれます。  
理由としては`querySelector`および`querySelectorAll`の返り値はそれぞれDOM要素またはDOM要素を含むNodeListオブジェクトであり、これらはquerySelectorに固有のデータ型ではなく、したがってそれらのセレクタを保存しているようなプロパティは（すくなくとも標準では）存在しません。  
ターゲットとする環境がprototypeの変更を許容するのであれば、まだアプローチは残っています。既定の動作をオーバーライドして先ほど述べたようなセレクタを保存するプロパティを追加してしまう方法です。querySelectorはDOM要素そのものなのでやめておきますが、Allのほうであればこのアプローチは有効かもしれません。実装例を示します:

[code]

    // ネイティブ実装を保存
    const nativeDocQuerySelectorAll = Document.prototype.querySelectorAll;
    const nativeElmQuerySelectorAll = Element.prototype.querySelectorAll;
    
    // セレクタ保存用プロパティのシンボル @@selectorString
    const symbolSelectorString = Symbol("@@selectorString");
    
    // 既定の動作をオーバーライド
    Document.prototype.querySelectorAll = function (selector) {
        const result = nativeDocQuerySelectorAll.call(this, selector);
        // store selector
        result[symbolSelectorString] = selector;
        return result;
    };
    Element.prototype.querySelectorAll = function (selector) {
        const result = nativeElmQuerySelectorAll.call(this, selector);
        // store selector
        result[symbolSelectorString] = selector;
        return result;
    };
    
    // for example
    var result = document.querySelectorAll('div > span');
    console.assert(result instanceof NodeList);
    console.assert(result[symbolSelectorString] == 'div > span');
    
[/code]

この実装では返り値が本来のものとは厳密には異なりますから、この変更が外部に影響を与えないかよく検証する必要があります。以上、参考になれば幸いです。


CC BY-SA 3.0
2017-10-31T13:39:12.080
39184
2017-10-31T13:44:36.517
2017-10-31T13:44:36.517
39178
answer