javascript - all - ¿Cuál es el equivalente en JS de vainilla de $(documento) de jQuery?

jquery replace all

Question

Estoy tratando de averiguar el equivalente de vainilla del siguiente código:

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

Hasta ahora he mirado en

• document : no es un elemento, por lo que no puede llamar a setAttribute en él
• document.documentElement - devuelve la etiqueta html . Este no es el mismo "elemento" al que se dirige jquery
• $(document)[0] parece devolver un elemento de sombra en Chrome Inspector
• $(document).attr(''key'', ''somethingUnique'') no existe en el Chrome Inspector

¿Está jQuery creando su propio elemento de sombra simulado del documento para que pueda tratarlo como un elemento real? ¿A qué elemento hace referencia jQuery cuando haces $(document) ?

Answer 1

Creo que estás equivocado con respecto a $(document) no se refiere al document , por lo tanto, la respuesta es (simplemente):

document[''key'']  = ''value''

Por ejemplo, en Chrome:

> $(document)[0] === document
true

> $(document).attr(''blarg'', ''narf'')
n.fn.init [document, context: document]

> document.blarg
"narf"

> document.foo = ''bar''
"bar"

> document.foo
"bar"

Answer 2

Realmente pensé que jQuery habría envuelto elementos DOM, ya que por alguna razón, nunca escribo var x = $(''#x'') para reutilizarlo más tarde, pero recuerdo $.

Por eso escribí:

Si esta envuelto

Pero después de leer la answer @ t.niese aquí probé

var x = $(''#x'')
var y = $(''#y'')

var ref = x[0]
x[0] = y[0] // hack jQuery Object reference to DOM element

setTimeout(() => x.html(''1''), 1000) // actually writes in #y
setTimeout(() => x.html(''2''), 2000) // actually writes in #y
setTimeout(() => { x.push(ref) }, 2500) // hack jQuery Object reference to DOM element
setTimeout(() => x.html(''3''), 3000) // actually writes in both #x and #y

Y entendido, no escribo var x = $(''#x'') no porque sea un objeto envuelto, sino exactamente porque no es un objeto envuelto.

Pensé que el punto de entrada de la API era $ , pero puedo ver la API como var api = $() , y el punto de entrada como (el) => api.push(el) o (sel) => api.push(document.querySelector(sel))

Puedo $().forEach pero no puedo $().forEach cambio o cambio, pero sí eliminar un índice, también

En el ejemplo

setTimeout(() => { x.map((item) => {console.log(item)}) }, 3500)

Registra 0 y 1, no los elementos. Probado utilizando jQuery versión 3.3.1

Answer 3

Un conjunto de resultados de jQuery es un objeto similar a una matriz que, en general, contiene DOMElement , pero a jQuery realmente no le importa qué tipo tienen los objetos en el conjunto de resultados. Ni los elementos de DOMElements ni ningún otro elemento que se almacene dentro del conjunto de resultados de jQuery está de alguna manera simulado / envuelto, se almacenan directamente en el conjunto de resultados. jQuery trata de averiguar qué tiene que hacer con esos objetos mirando sus funciones disponibles.

Cuando llama a .attr , jQuery comprueba cada objeto del conjunto si tiene la función getAttribute este caso, se supone que también tiene una función setAttribute .

Si no tiene una función getAttribute , entonces reenviará la llamada a la función .prop() , y el prop internamente solo hará:

elem[name] = value

Entonces, si pasas un objeto plano a jQuery, entonces solo establecerá su propiedad.

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>

Si agrega una función getAttribute y setAttribute a ese objeto, jQuery los llamará:

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>

Sin embargo, siempre debe asumir que la forma y el orden en que jQuery hace estas pruebas pueden cambiar. Además, solo confíe en él si se menciona explícitamente en la documentación.

Answer 4

jQuery solo está asignando el valor al document directamente.

$(document).attr(''test'', ''hello world'');
console.log(document[''test'']); // prints "hello world"