Como selecionar elementos HTML via JavaScript DOM Para selecionar um elemento HTML e poder manipul-lo via JavaScript/DOM

voc precisa primeiro ter algo ue identi!i ue esse elemento" #m $ganc%o& 'em ingls( %oo)*" +ste ganc%o pode ser, O -D do elemento #m nome de classe #m nome de tag 'D-.( SP/0( P( /( etc* #m atri1uto ou valor de atri1uto espec2!ico Dependendo do tipo de ganc%o usado( seu tra1al%o pode ser mais simples ou mais comple3o" .amos ver caso a caso" #m elemento ou vrios elementos4 5uando $pescamos& elementos HTML via JavaScript/DOM( o ue temos como retorno pode ser um elemento espec2!ico ou um con6unto de elementos 'um /rra7 de elementos( pra ser mais espec2!ico*" 0a verdade( o ue manipulamos via JavaScript s8o re!erncias a elementos HTML" Ou se6a( uma varivel ue $aponta& para o elemento e ue( uma ve9 modi!icada( re!lete as modi!ica:;es no elemento em si" Mas n8o se preocupe com isso agora" Trate as re!erncias como elementos de !ato caso isso torne as coisas mais simples de a1strair pra voc" Selecionando elementos pelo -D / <nica !orma de selecionar um elemento espec2!ico sem nen%um es!or:o e3tra = usando o -D do elemento como ganc%o" Para isso usamos o m=todo document"get+lement>7-d'*" / sinta3e deste m=todo = simples, var elemento ? document"get+lement>7-d'@idAdoAelemento@*B +3emplo, HTML, Cspan id?@preco@DEF GHII(IIC/spanD JavaScript, var preco ? document"get+lement>7-d'JprecoJ*B Keito isso( voc pode( por e3emplo( e3i1ir um alerta com o conte<do do elemento( assim, alert'preco"innerHTML*" + = isso" Selecionar um elemento pelo -D = muito simples" Mas nem sempre temos um -D dispon2vel( por isso vamos ver como selecionar elementos usando outros tipos de ganc%os" Selecionando vrios elementos, o processo 1sico 5uando voc n8o tem um -D dispon2vel para selecionar um elemento espec2!ico( a <nica op:8o = selecionar diversos elementos e depois $pescar& a uele ou a ueles ue te interessam" >asicamente( tudo come:a com o m=todo document"get+lements>7Tag0ame'*" Como o nome 6 di9( este m=todo seleciona elementos por nomes de tags" Keito isso( 1asta iterar pelos elementos( usando loops 'em geral( !or* e( de acordo com determinadas condi:;es( separar os elementos com os uais voc precisa tra1al%ar" .amos ver os e3emplos mais comuns"

Sele:8o por nome de classe -magine ue voc uer selecionar todos os elementos ue ten%am a classe $preco&" 08o importa se o elemento = um D-.( um SP/0 ou ual uer outro( desde ue ten%a a classe $preco&( ele te interessa" Para isso voc vai precisar( antes de ual uer outra coisa( selecionar todos os elementos da pgina de uma sL ve9" -sto = muito simples( ve6a, var todosAelementos ? document"get+lements>7Tag0ame'JMJ*B 0este caso( todosAelementos = um /rra7 contendo todos os elementos da pgina" 08o vou entrar em detal%es so1re /rra7s por a ui" Se voc 6 programou( em praticamente ual uer linguagem( 6 deve con%ec-los" Caso contrrio( continue lendo ue ac%o ue vai dar pra entender mesmo assim" /gora vamos !a9er um !or para percorrer todos os elementos do nosso arra7 e selecionar apenas a ueles ue tm a classe ue nos interessa" .amos assumir( para simpli!icar os e3emplos( ue voc uer os elementos ue ten%am apenas a classe $preco&" +lementos com mais de uma classe !icam de !ora" var precos ? /rra7'*B !or 'var i?IB iCtodosAelementos"lengt%B iNN*O var el ? todosAelementosPiQB i! 'el"class0ame ?? JprecoJ*O precos"pus%'el*B R R O cLdigo acima pega todos os elementos com a classe $preco& e 6oga dentro de um outro /rra7( $precos&" /gora voc pode iterar por este /rra7 e !a9er o ue uiser com seus elementos" Sele:8o por nome de tag Para selecionar elementos pelo nome da tag( o m=todo usado = o mesmo document"get+lements>7Tag0ame'* e o processo = e3atamente igual ao descrito acima" Por e3emplo( vamos selecionar todos os D-.s da nossa pgina, var divs ? document"get+lements>7Tag0ame'JdivJ*B Simples assim" Se voc uiser selecionar diretamente( por e3emplo( o primeiro D-. da pgina( use o seguinte, var div ? document"get+lements>7Tag0ame'JdivJ*PIQB Sele:8o por um atri1uto espec2!ico / ui a coisa !unciona da mesma maneira ue a sele:8o por classe" .amos selecionar( por e3emplo( todos os lin)s 'tag /* com o atri1uto rel?&no!olloS&, var lin)s ? document"get+lements>7Tag0ame'JaJ*B !or 'var i?IB iClin)s"lengt%B iNN*O var lin) ? lin)sPiQB var rel ? lin)"get/ttri1ute'JrelJ*B i! 'rel TT rel ?? Jno!olloSJ*O lin)"class0ame ? Jno!olloSJB R R O cLdigo acima atri1ui a classe $no!olloS& a todos os lin)s com rel?@no!olloS@" Com isso

podemos( por CSS( aplicar uma cor di!erente nesses lin)s( por e3emplo" Como vocs podem ver( selecionar elementos via JavaScript/DOM n8o = nada complicado"