¿Cómo hacer que el nombre de un elemento comodín coincida con “querySelector()” o “querySelectorAll()” en JavaScript?

¿Hay alguna manera de hacer una coincidencia de nombre de elemento comodín usando querySelector o querySelectorAll?

El documento XML que estoy tratando de analizar es básicamente una lista plana de propiedades

• Necesito encontrar elementos que tengan ciertas cadenas en sus nombres.
• Veo soporte para comodines en consultas de atributos, pero no para los elementos en sí.

Cualquier solución, excepto volver a usar el XPath aparentemente obsoleto (IE9 lo eliminó), es aceptable.

[id^='someId'] coincidirá con todos los identificadores que empiecen por someId.

[id$='someId'] coincidirá con todos los ID que terminan en someId.

[id*='someId'] coincidirá con todos los ID que contengan someId.

Si estás buscando el name atributo simplemente sustituir id con name.

Si está hablando del nombre de la etiqueta del elemento, no creo que haya una manera de usar querySelector

Estaba jugando/reflexionando sobre frases ingeniosas que involucraban a querySelector() y terminé aquí, y tengo una posible respuesta a la pregunta OP usando nombres de etiquetas y querySelector(), con créditos para @JaredMcAteer por responder MI pregunta, también conocido como RegEx. coincide con querySelector () en Javascript vainilla

Con la esperanza de que lo siguiente sea útil y se ajuste a las necesidades del OP o de todos los demás:

// basically, of before:
var youtubeDiv = document.querySelector('iframe[src="http://www.youtube.com/embed/Jk5lTqQzoKA"]')

// after     
var youtubeDiv = document.querySelector('iframe[src^="http://www.youtube.com"]');
// or even, for my needs
var youtubeDiv = document.querySelector('iframe[src*="youtube"]');

Luego, podemos, por ejemplo, obtener las cosas de src, etc.

console.log(youtubeDiv.src);
//> "http://www.youtube.com/embed/Jk5lTqQzoKA"
console.debug(youtubeDiv);
//> (...)

Establezca tagName como un atributo explícito:

for(var i=0,els=document.querySelectorAll('*'); i<els.length;
          els[i].setAttribute('tagName',els[i++].tagName) );

Lo necesitaba yo mismo, para un documento XML, con etiquetas anidadas que terminan en _Sequence. Ver JaredMcAteer respuesta para más detalles.

document.querySelectorAll('[tagName$="_Sequence"]')

No dije que sería bonito 🙂 PD: recomendaría usar tag_name sobre tagName, por lo que no se encuentra con interferencias al leer atributos DOM implícitos ‘generados por computadora’.

Acabo de escribir este breve guión; parece funcionar.

/**
 * Find all the elements with a tagName that matches.
 * @param {RegExp} regEx  regular expression to match against tagName
 * @returns {Array}       elements in the DOM that match
 */
function getAllTagMatches(regEx) {
  return Array.prototype.slice.call(document.querySelectorAll('*')).filter(function (el) { 
    return el.tagName.match(regEx);
  });
}
getAllTagMatches(/^di/i); // Returns an array of all elements that begin with "di", eg "div"

Me gustaron muchas de las respuestas anteriores, pero prefiero que mis consultas se ejecuten solo en clases/ID para que no tengan que iterar sobre cada elemento. Esta es una combinación de código de @bigiCrab y @JaredMcAteer

// class exactly matches abc
const exactAbc = document.querySelectorAll("[class="abc"]")

// class begins with abc
const startsAbc = document.querySelectorAll("[class^='abc']")

// class contains abc
const containsAbc = document.querySelectorAll("[class*='abc']")

// class contains white-space separated word exactly matching abc
const wordAbc = document.querySelectorAll("[class~='abc']")

// class ends with abc
const endsAbc = document.querySelectorAll("[class$='abc']")

Sustituya “clase” por “id” o “href” para obtener otras coincidencias. Lea el artículo vinculado a continuación para obtener más ejemplos.

Referencia:

1. Selectores de atributos CSS en MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

Estoy buscando expresión regular + no + multiclase selector, y esto es lo que obtuve.

¡Espero que esto ayude a alguien que busca lo mismo!

// contain abc class
"div[class*='abc']" 

// contain exact abc class
"div[class~='abc']" 

// contain exact abc & def(case-insensitively)
"div[class~='abc'][class*='DeF'i]" 

// contain exact abc but not def(case-insensitively)
"div[class~='abc']:not([class*='DeF'i])" 

documento del selector css: https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors

prueba sencilla: https://codepen.io/BIgiCrab/pen/BadjbZe

Por ejemplo, hay un formulario como el que se muestra a continuación:

<form id="my-form" method="post">
  <input type="text" name="my-first-name" value="John">
  <input type="text" name="my last name" value="Smith">
</form>

Luego, puede usar estos selectores a continuación de acuerdo con 6.1. Presencia de atributo y selectores de valor y 6.2. Selectores de atributo de coincidencia de subcadena.

input[name] selecciona todo <input>s que tienen name atributo:

document.querySelectorAll('input[name]');
// "my-first-name" and "my last name"

input[name="my last name"] selecciona todo <input>s cuyo name el atributo es exactamente my last name:

document.querySelectorAll('input[name="my last name"]');
// "my last name"

input[name~="name"] selecciona todo <input>s cuyo name Las palabras separadas por espacios en blanco del atributo contienen my last name:

document.querySelectorAll('input[name~="name"]');
// "my last name"

input[name|="my"] selecciona todo <input>s cuyo name atributo comienza desde my con - entonces my-:

document.querySelectorAll('input[name|="my"]');
// "my-first-name"

input[name|="my last name"] selecciona todo <input>s cuyo name el atributo es exactamente my last name:

document.querySelectorAll('input[name|="my last name"]');
// "my last name"

input[name^="my "] selecciona todo <input>s cuyo name atributo comienza desde my :

document.querySelectorAll('input[name^="my "]');
// "my last name"

input[name$="ame"] selecciona todo <input>s cuyo name atributo termina con ame:

document.querySelectorAll('input[name$="ame"]');
// "my-first-name" and "my last name"

input[name*="st-"] selecciona todo <input>s cuyo name el atributo contiene st-:

document.querySelectorAll('input[name*="st-"]');
// "my-first-name"

Además, input:not([name="my last name"]) selecciona todo <input>s cuyo name atributo no contiene my last name de acuerdo a 4.3. La pseudoclase de negación (coincidencias-ninguna): ‘:not()’:

document.querySelectorAll('input:not([name="my last name"])');
// "my-first-name"

Y puedes poner form#my-form delante de input[name^="my"] para seleccionar <input>es más específicamente como AND lógico (&&) Como se muestra abajo:

document.querySelectorAll('form#my-form input[name^="my"]');
// "my-first-name" and "my last name"

Y, también puedes hacer input:not([name^="last"]):not([name*="st"][value="Smith"]) para seleccionar <input>es más específicamente como AND lógico (&&) Como se muestra abajo:

document.querySelectorAll('input:not([name^="my-"]):not([name*="st"][value="John"])');
// "my last name"

Y, también puedes hacer input[name*="first"], input[name="my last name"] para seleccionar <input>es más específicamente como O lógico (||) Como se muestra abajo:

document.querySelectorAll('input[name*="first"], input[name="my last name"]')
// "my-first-name" and "my last name"