Como obter um elemento DOM de um seletor JQuery


179

Estou tendo dificuldades para descobrir o DOMElement de um seletor de jquery. Código de amostra:

<input type="checkbox" id="bob" />
  var checkbox = $("#bob").click(function() { //some code  } )

e em outro pedaço de código, estou tentando determinar o valor marcado da caixa de seleção.

  if ( checkbox.eq(0).SomeMethodToGetARealDomElement().checked )
    //do something.

E por favor, eu não quero fazer:

  if ( checkbox.eq(0).is(":checked"))
    //do something

Isso me impressiona na caixa de seleção, mas outras vezes eu precisava do verdadeiro DOMElement.


4
Um caso em que isso pode ser necessário: no Knockout.js, a função applyBindingsespera um nó DOM, não um seletor de jQuery. Esta pergunta (e suas respostas) são exatamente o que é necessário.
Muhammad Alkarouri

Respostas:


264

Você pode acessar o elemento DOM bruto com:

$("table").get(0);

ou mais simplesmente:

$("table")[0];

Na verdade, não há muito o que você precisa disso (na minha experiência). Veja o exemplo da sua caixa de seleção:

$(":checkbox").click(function() {
  if ($(this).is(":checked")) {
    // do stuff
  }
});

é mais "jquery'ish" e (imho) mais conciso. E se você quisesse numerá-los?

$(":checkbox").each(function(i, elem) {
  $(elem).data("index", i);
});
$(":checkbox").click(function() {
  if ($(this).is(":checked") && $(this).data("index") == 0) {
    // do stuff
  }
});

Alguns desses recursos também ajudam a mascarar as diferenças nos navegadores. Alguns atributos podem ser diferentes. O exemplo clássico é de chamadas AJAX. Para fazer isso corretamente, o Javascript bruto possui cerca de 7 casos de fallback para XmlHttpRequest.


1
Obrigado, mas o método get ainda retorna um elemento jquery, não o elemento dom. Caso contrário, a chamada de propriedade .checked teria funcionado.
BillRob

Tente $('a').get(0).nodeType==1no Firebug nesta página, ele avalia como verdadeiro ou falha?
meder omuraliev

@ BillRob se get () não estiver retornando o elemento DOM, algo está errado. Veja os documentos aqui: docs.jquery.com/Core/get#index
Sixten Otto

$('<input type=checkbox>').appendTo('body').get(0).checked
meder omuraliev

5
Qual é o sentido de usar o jQuery se você usar explicitamente as propriedades do DOM? Não deveria ser melhor ter um código consistente à prova de erros contra possíveis TypeErrors? Alguns anos atrás, eu costumava ser um elitista ECMAScripter e evitava estruturas, mas quanto mais aprendia sobre inconsistências, acabava confiando mais. Os mecanismos do navegador estão ficando cada vez mais rápidos, a menos que a velocidade seja perceptível, você realmente não deve se preocupar com isso. O objetivo de usar uma estrutura é ter um código consistente e viável, resolvendo muitos problemas, sem fazer as coisas o mais rápido possível.
meder omuraliev

7

Edit: parece que eu estava errado em supor que você não poderia obter o elemento. Como outras pessoas postaram aqui, você pode obtê-lo com:

$('#element').get(0);

Eu verifiquei que isso realmente retorna o elemento DOM correspondente.


2
Repetindo a mim mesmo, mas novamente ... não em todos os navegadores. Falha no IE7 e versões anteriores.
Slavo 9/02/10

6

Eu precisava pegar o elemento como uma string.

jQuery("#bob").get(0).outerHTML;

O que lhe dará algo como:

<input type="text" id="bob" value="hello world" />

... como uma string em vez de um elemento DOM.


1

Se você precisar interagir diretamente com o elemento DOM, por que não usar apenas document.getElementByIduma vez, se estiver tentando interagir com um elemento específico, provavelmente conhecerá o ID, pois pressupõe que o nome da classe esteja em apenas um elemento ou em alguma outra opção tende a seja arriscado.

Porém, costumo concordar com os outros que, na maioria dos casos, você deve aprender a fazer o que precisa usando o que o jQuery oferece, pois é muito flexível.

ATUALIZAÇÃO: Com base em um comentário: Aqui está uma postagem com uma boa explicação: http://www.mail-archive.com/jquery-en@googlegroups.com/msg04461.html

$(this).attr("checked") ? $(this).val() : 0

Isso retornará o valor se estiver marcado ou 0 se não estiver.

$(this).val() está apenas chegando ao dom e obtendo o atributo "valor" do elemento, independentemente de ter sido verificado ou não.


2
Eu poderia usar document.getElementById ou o método MS ajax $ get. Desde que a Microsoft endossou o jquery, estou tentando quebrar minha dependência do javascript do ms ajax e aprender o jquery. Parece totalmente contra-intuitivo que o jquery altere o comportamento do método checkbox .val (). Como qualquer outra chamada .val (), retorna os campos de postagem do formulário. O jQuery tem sido muito bom de se trabalhar, por isso foi confuso alterar o método val () e esperava encontrar uma solução rápida.
BillRob


2
É estranho, James, que o método val () seja realmente .attr ("value"). Eu me pergunto por que eles têm dois métodos diferentes para isso. Para mim .val () é o valor do campo de postagem do formulário.
BillRob

2
@ BillRob - o jQuery está apenas simplificando e padronizando como obter o valor, em vez de você precisar ir para o elemento real e fazer você mesmo.
James Black

Às vezes, você precisa de um seletor complexo com IDs e um cenário pai-filho e pode obtê-lo através do jQuery com uma linha de código, mas levaria um dia para usar document.getElementById. Concordo que misturar bibliotecas é uma péssima idéia, mas às vezes acontece e a tarefa de obter um elemento DOM de um objeto jquery é muito difícil, especialmente com o .get (0) sem compatibilidade com o navegador.
Slavo 9/02/10
Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.