☰

jQuery の $(document) に相当する vanilla JS は何ですか? 質問する

tag-icon • tag-icon javascript jquery
jQuery の $(document) に相当する vanilla JS は何ですか? 質問する

私は次のコードに相当するバニラ版を見つけようとしています:

$(document).attr('key', 'value');

これまで私が調べたのは

  • document- 要素ではないので呼び出すことはできませsetAttributeん
  • document.documentElement-htmlタグを返します。これはjQueryがターゲットとする「要素」と同じではありません
  • $(document)[0]Chromeインスペクタで影の要素を返すようです
  • $(document).attr('key', 'somethingUnique')Chromeインスペクタには存在しません

jQuery は、ドキュメントを実際の要素のように扱えるように、ドキュメントの独自のシャドウ要素モックを作成していますか? これを行うと、jQuery は実際にどの要素を参照しますか$(document)?

ベストアンサー1

jQuery の結果セットは、一般に を保持する配列のようなオブジェクトですDOMElementが、jQuery は結果セット内のオブジェクトの型をあまり気にしません。 も、DOMElementsjQuery 結果セット内に格納される他の要素も、何らかの形でモック化/ラップされることなく、結果セットに直接格納されます。jQuery は、使用可能な関数を確認して、それらのオブジェクトに対して何をすべきかを判断しようとします。

を呼び出すと.attr、jQuery はセット内の各オブジェクトに 関数があるかどうかをチェックし、getAttributeある場合は 関数も持っているものと想定しますsetAttribute。

関数がない場合getAttribute、関数呼び出しを関数に転送し.prop()、 prop は内部的に次の操作を実行します。

elem[name] = value

したがって、プレーンなオブジェクトを jQuery に渡すと、そのプロパティが設定されるだけです。

var a = {  
}

$(a).attr('test', 'hello world');

console.dir(a) // for `a`  the property `test` is set
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

getAttributeそのオブジェクトに関数を追加するとsetAttribute、jQuery はそれらを呼び出します。

var a = {
  getAttribute() {

  },
  setAttribute() {
    console.log('setAttribute was called')
  }
}

$(a).attr('test', 'hello world');

console.dir(a);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

ただし、jQuery がこれらのテストを実行する方法と順序は変更される可能性があることを常に想定する必要があります。また、ドキュメントに明示的に記載されている場合にのみ、jQuery に依存してください。

おすすめ記事