5

Gostaria de saber como acessar um elemento dentro de outro elemento através do id usando JavaScript puro.

Atualmente uso getElementsByTagName('a') mas como no meu projeto vou ter vários elementos do mesmo tipo, não vai ser usual.

Também conheço o getElementsByClassName('huebr') mas o mesmo não é suportado no IE9.

Ambiente para testes: http://jsfiddle.net/douglas1551/mgy6z0uo/

2 Respostas 2

5

Seletores a la jQuery:

Estão disponíveis no document e em todos os elementos; funcionam de maneira similar ao jQuery, e são bem suportados pelos browsers mais modernos. No IE, pelo que consta, estão disponíveis a partir da versão 8. A string de parâmetro deve conter um ou mais seletores CSS separados por vírgula, apesar de que em minhas experiências seletores mais complexos (com pseudo-seletores) falharam.

// captura apenas a PRIMEIRA tag <a> da página:
var a = document.querySelector("a"); // retorna apenas o elemento encontrado (ou null)

// captura, dentro de 'a', TODOS (All) os elementos com classe "classeA" ou "classeB":
var b = a.querySelectorAll(".classeA, .classeB"); // retorna um array de filhos

Array de elementos filhos

Estão disponíveis em todos os elementos que contenham filhos; contém todos os elementos filhos (que não sejam nós puro-texto).

var c = b.children[0]; // exemplo de uso

Array de nós (texto/elemento) filhos

Estão disponíveis em todos os elementos, e contém todos os elementos filhos (textuais ou não).

var d = c.childNodes[1]; // exemplo de uso
1
  • Muito obrigado, vai ser extremamente util o querySelector citado. Valew! Commented 26/08/2014 às 18:37
4

Vamos supor um elemento que você recuperou com Javascript puro, chamado foo. Você pode obter foo pelos métodos que já conhece. Por exemplo:

// experimento no fonte desta página!
var foo = document.getElementsByClassName("post-text")[0];

Você pode usar as propriedades children ou childNodes. A quantidade de elementos filhos vai estar em childElementcount. Você pode usar essas propriedades da seguinte forma:

var numberOfKids = foo.childElementCount;

Lembre-se de que o retorno de métodos certos métodos como getElementsByClassName pode ser um array. Nesse caso cada elemento do array vai ter as propriedades que mencionei.

1
  • 1
    Obrigado pela resposta Renan, mas o IE9 não oferece suporte ao getElementsByClassName no meu caso realmente vou utilizar o getElementsByTagName('a')[0] tenho acesso simples aos elementos. Valew Commented 26/08/2014 às 18:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .