Os métodos de QuerySelector e QuerySelectorall são definidos na especificação da API W3C Selectors. Sua função é localizar convenientemente elementos especificados no documento de acordo com a especificação seletor de CSS.
Atualmente, eles são apoiados por navegadores quase mainstream. Incluindo o IE8 (inclusive) e as versões acima, Firefox, Chrome, Safari, Opera.
QuerySelector e QuerySelectorAll definem as seguintes interfaces na especificação:
Módulo DOM {[Suplementar, NoInterfaceObject] NodEseSelector {Element QuerySelector (nos seletores de Domstring); NodeList QuerySelectorAll (nos seletores de Domstring); }; Documento implementa o NodeSelector; DocumentFragment implementa o NodeSelector; Elemento implementa o NodeseLector; };A partir da definição da interface, você pode ver que o documento, o documento e o elemento implementam a interface Nodeselector. Ou seja, todos esses três tipos de elementos têm dois métodos. Os parâmetros do QuerySelector e QuerySelectorAll devem ser strings que estão em conformidade com o seletor de CSS. A diferença é que o QuerySelector devolve um objeto e o QuerySelectorall retorna uma coleção (Nodelist).
Obtenha o elemento cuja página eu atribui d é teste:
1 document.getElementById ("test"); 2 document.QuerySelector ("#teste"); 3 document.QuerySelectorAll ("#teste") [0];Obtenha o elemento com o atributo da classe da página "RED":
document.getElementsByClassName ('Red') Document.QuerySelector ('. Red') Document.QuerySelectorAll ('. Red') Document.QuerySelectorAll ('. Red')PS:
Mas deve-se notar que os elementos da coleção NodeList devolvidos não são de vida. Se você deseja distinguir entre o que é um resultado de retorno em tempo real que não é real, consulte o exemplo a seguir:
<div id = "contêiner"> <div> </div> <div> </div> </div>
// Primeiro selecione o elemento com contêiner de ID na página com contêiner = document.getElementById ('#contêiner'); console.log (container.childnodes.length) // O resultado é 2 //, então adicione um elemento filho aqui, não é adicionado apenas para o contêiner. console.log (container.childnodes.length) // O resultado é 3Através do exemplo acima, podemos entender quais elementos serão atualizados em tempo real. Document.getElementById Retorna o resultado em tempo real. Depois de adicionar um elemento filho, o número de todos os elementos infantis é obtido novamente e os 2 originais foram atualizados para 3 (não considerando que alguns navegadores como o Chrome também analisarão o espaço em branco em um nó filho).
A diferença entre elemento.QuerySelector e Element.QuerySelectorAll e JQuery (elemento) .Find (Seletor) Seletores:
<SPAN style="FONT-SIZE: 15px"><divid="test1"><ahref="//www.VeVB.COM/">Wulin.com</a></div> <pid="bar">111</p> <script> var d1 = document.getElementById('test1'), obj1 = d1.querySelector('div a'), obj2 = d1.QuerySelectorAll ('div a'); obj3 = $ (d1) .find ('div a'); console.log (obj1) // <a href = "// www.vevb.com/">wulin.comQuerySelectorall encontra todos os nós que atendem à descrição do seletor no documento, incluindo o próprio elemento
jQuery (elemento) .Find (seletor) Encontre todos os nós que atendem à descrição da seleção no documento e não incluem o próprio elemento
A análise abrangente acima do seletor avançado de JavaScript acima e QuerySelector e QuerySelectorAll é todo o conteúdo que compartilho com você. Espero que você possa lhe dar uma referência e espero que você possa apoiar mais o wulin.com.