javascript - ejemplos - queryselector value
querySelector busca hijos inmediatos (10)
Tengo alguna función de jquery:
function(elem) {
return $(''> someselector'', elem);
};
La pregunta es ¿cómo puedo hacer lo mismo con querySelector() ?
El problema es que > selector en querySelector() requiere que el padre se especifique explícitamente. ¿Hay algún trabajo alrededor?
Completa: alcance polyfill
Como ha mentioned selectores API 2 usan :scope pseudo-selector de :scope .
Para hacer que esto funcione en todos los navegadores (que admiten querySelector ) aquí está el polyfill
(function(doc, proto) {
try { // check if browser supports :scope natively
doc.querySelector('':scope body'');
} catch (err) { // polyfill native methods if it doesn''t
[''querySelector'', ''querySelectorAll''].forEach(function(method) {
var nativ = proto[method];
proto[method] = function(selectors) {
if (/(^|,)/s*:scope/.test(selectors)) { // only if selectors contains :scope
var id = this.id; // remember current element id
this.id = ''ID_'' + Date.now(); // assign new unique id
selectors = selectors.replace(/((^|,)/s*):scope/g, ''$1#'' + this.id); // replace :scope with #ID
var result = doc[method](selectors);
this.id = id; // restore previous id
return result;
} else {
return nativ.call(this, selectors); // use native code for other selectors
}
}
});
}
})(window.document, Element.prototype);
Uso
node.querySelector('':scope > someselector'');
node.querySelectorAll('':scope > someselector'');
Por razones históricas, mi solución anterior.
Basado en todas las respuestas
// Caution! Prototype extending
Node.prototype.find = function(selector) {
if (/(^/s*|,/s*)>/.test(selector)) {
if (!this.id) {
this.id = ''ID_'' + new Date().getTime();
var removeId = true;
}
selector = selector.replace(/(^/s*|,/s*)>/g, ''$1#'' + this.id + '' >'');
var result = document.querySelectorAll(selector);
if (removeId) {
this.id = null;
}
return result;
} else {
return this.querySelectorAll(selector);
}
};
Uso
elem.find(''> a'');
El siguiente es un método genérico simplificado para ejecutar cualquier consulta del selector de CSS solo sobre elementos "foo[bar], baz.boo" directos. También tiene en cuenta las consultas combinadas, como "foo[bar], baz.boo" :
var count = 0;
function queryChildren(element, selector) {
var id = element.id,
guid = element.id = id || ''query_children_'' + count++,
attr = ''#'' + guid + '' > '',
selector = attr + (selector + '''').replace('','', '','' + attr, ''g'');
var result = element.parentNode.querySelectorAll(selector);
if (!id) element.removeAttribute(''id'');
return result;
}
*** Example Use ***
queryChildren(someElement, ''.foo, .bar[xyz="123"]'');
Eso funcionó para mí:
Node.prototype.search = function(selector)
{
if (selector.indexOf(''@this'') != -1)
{
if (!this.id)
this.id = "ID" + new Date().getTime();
while (selector.indexOf(''@this'') != -1)
selector = selector.replace(''@this'', ''#'' + this.id);
return document.querySelectorAll(selector);
} else
return this.querySelectorAll(selector);
};
Tendrá que pasar @this keywork antes del> cuando desee buscar hijos inmediatos.
Hay una query-relative , que es un reemplazo bastante útil para el selector de consultas . Rellena los selectores secundarios ''> *'' y :scope (inc. IE8), así como normaliza :root selector de :root . También proporciona algunos pseudos relativos especiales como :closest ,: :parent :prev :next , just in case.
Si bien no es una respuesta completa, debes vigilar la API v.2 del Selector de W3C, que ya está disponible en Google Chrome y Safari 7.x (tanto para equipos de escritorio como para dispositivos móviles), pero en la medida en que lo he probado, todavía no existe. en Firefox y en IE.
function(elem) {
return elem.querySelectorAll('':scope > someselector'');
};
Si conoce el nombre de etiqueta del elemento que está buscando, puede usarlo en el selector para lograr lo que desea.
Por ejemplo, si tiene un <select> que tiene <option> s y <optgroups> , y solo quiere los <option> s que son sus hijos inmediatos, no los que están dentro de <optgoups> :
<select>
<option>iPhone</option>
<optgroup>
<option>Nokia</option>
<option>Blackberry</option>
</optgroup>
</select>
Por lo tanto, al tener una referencia al elemento seleccionado, puede, sorprendentemente, obtener sus hijos inmediatos de esta manera:
selectElement.querySelectorAll(''select > option'')
Parece funcionar en Chrome, Safari y Firefox, pero no probó en IEs. = /
Si deseas encontrar hijos directos (y no, por ejemplo, > div > span ), puedes probar Element.matches() :
const elems = Array.from(elem.children).filter(e => e.matches(''.my-class''))
Usted no puede No hay ningún selector que simule tu punto de partida.
La forma en que jQuery lo hace (más debido a una forma en que qsa comporta que no es de su agrado), es que verifican si elem tiene una ID, y si no, agregan una ID temporalmente, luego crean una cadena de selección completa .
Básicamente harías:
var sel = ''> someselector'';
var hadId = true;
if( !elem.id ) {
hadID = false;
elem.id = ''some_unique_value'';
}
sel = ''#'' + elem.id + sel;
var result = document.querySelectorAll( sel );
if( !hadId ) {
elem.id = '''';
}
Esto ciertamente no es el código jQuery, pero por lo que recuerdo, es básicamente lo que hacen. No solo en esta situación, sino en cualquier situación en la que esté ejecutando un selector desde el contexto de un elemento anidado.
compruebe si el elemento tiene id o agregue id aleatorio y haga una búsqueda basada en él
function(elem) {
if(!elem.id)
elem.id = Math.random().toString(36).substr(2, 10);
return elem.querySelectorAll(elem.id + '' > someselector'');
};
hará lo mismo que
$("> someselector",$(elem))
RECLAMACIÓN
Personalmente tomaría la respuesta de patrick dw, y +1 su respuesta, mi respuesta es buscar una solución alternativa. No creo que merezca un voto negativo.
Aquí está mi intento:
function q(elem){
var nodes = elem.querySelectorAll(''someSeletor'');
console.log(nodes);
for(var i = 0; i < nodes.length; i++){
if(nodes[i].parentNode === elem) return nodes[i];
}
}