Sé que document.querySelector('..') toma el selector css como argumentos como
a.className, #idName, etc....
Pero no estoy seguro de cómo usar el nombre. Vi un ejemplo pero no pude entenderlo.
document.querySelector('[name="billContact.email"]')Puede usar document.querySelectorAll para encontrar el elemento usando el atributo.
document.querySelectorAll('[name="test"]'); [ Atributo de nodo HTML =" Valor "]
La id y class de HTML-Element-Attributes tienen su propia selección de css:
#id.classLos otros atributos necesitan algo más. Como "selectores de atributos".
Entonces, por ejemplo, tiene el siguiente código HTML:
<a href="#top">Go to top!</a>Con los selectores de atributos puedes obtener este elemento con todas las siguientes posibilidades:
[href] /*looking only for the attribut. No matter what value is inside*/ [href="#top"] /*the attributes value must be "#top"*/ a[href="#top"] /*the same as the example above but in this case href needs to be a attribute of "a"-tag*/Hay algunas posibilidades más geniales para abordar un elemento. Para obtener más información, consulte Selectores de atributos de MDN
querySelector / querySelectorAll
querySelectorle da el primer elemento que es igual al selector css pasado.
Bien, supongo que esto puede ser mucho más fácil de entender con ejemplos en lugar de una pared de texto. Así que empecemos:
Para este ejemplo, usaré este HTML cortado:
<div class="container"> <div data-id='cat'> <button name='cat' value='miau'>Cat</button> </div> <div data-id='dog'> <button name='dog' value='not miau'>Dog</button> </div> </div> Como preguntaste sobre cómo encontrar un elemento por su nombre con querySelector , comenzaré con eso:
Hay dos elementos con un atributo de nombre. Ambos son botones pero tienen nombres diferentes.
Para obtener el primer elemento con un atributo de nombre, use:
document.querySelector('[name]') //get button cat because it's the first one in the dom (in that example)Para conseguirlos todos prueba esto:
document.querySelectorAll('[name]') //get both buttons (cat, dog)Cuando sabes el nombre de lo que estás buscando, usa
document.querySelector('[name="cat"]') //get the first element where name equals 'cat'Lo mismo con otros atributos como datos, clase o id.
document.querySelector('[data-id="cat"]') //get divTambién puedes hacer más pasos de dom a la vez:
document.querySelector('[data-id="cat"] button') //gets the first button inside "cat-div"Consulte MDN yMicrosoft para obtener más información. También puede estar interesado en CSS-Selectors también.