Método getAttribute ()
Até agora, introduzimos duas maneiras de recuperar nós de elementos específicos: um é usar o método getElementById (), e o outro é usar o método getElementsByTagName (). Depois de encontrar esse elemento, podemos usar o método getAttribute () para consultar os valores de seus vários atributos.
O método getAttribute () é uma função. Ele tem apenas um parâmetro - o nome do atributo que você está planejando consultar:
Object.getAttribute (atributo)
No entanto, o método getAttribute () não pode ser chamado através do objeto de documentos, que é diferente de outros métodos que introduzimos antes. Só podemos chamá -lo através de um objeto de nó de elemento.
Por exemplo, você pode combiná -lo com o método getElementsByTagName () para consultar o atributo de título de cada elemento <P> como mostrado abaixo:
var text = document.getElementsByTagName ("p") para (var i = 0; i <text.length; i ++) {alert (text [i] .getAttribute ("title"));}Se você inserir o código acima no final do documento de amostra da "Lista de compras" fornecido anteriormente e recarregue a página em um navegador da Web, uma caixa de diálogo Alter com a mensagem de texto "Um lembrete suave" aparecerá na tela.
Existe apenas um elemento <P> com atributo de título no documento da lista de compras. Se o documento tiver um ou mais elementos <p> sem atributo de título, a chamada getAttribute correspondente ("title") retornará NULL. Null é um valor nulo na linguagem JavaScript, e seu significado é "a coisa que você disse que não existe". Se você deseja verificar isso pessoalmente, insira o seguinte texto no parágrafo de texto existente no documento da lista de compras:
<p> Isso é apenas teste </p>
Em seguida, recarregue a página. Desta vez, você verá duas caixas de diálogo Alter, e a segunda caixa de diálogo ficará em branco ou exibirá apenas a palavra "NULL" - a situação específica depende de como o navegador da Web exibirá o valor nulo.
Podemos modificar nosso script para que ele seja exibido apenas uma mensagem quando a propriedade do título existir. Adicionaremos uma instrução IF para verificar se o valor de retorno do método getAttribute () é nulo. Aproveitando essa oportunidade, também adicionamos várias variáveis para melhorar a legibilidade do script:
var ts = document.getElementsByTagName ("li"); para (var i = 0; i <ts.length; i ++) {text = ts [i] .getAttribute ("title"); if (text! = null) {alert (text)}}}}Agora, se você recarregar esta página, verá apenas uma caixa de diálogo Alter mostrando a mensagem "A Gentil Lembrete", como mostrado abaixo.
Podemos até reduzir esse código para um mais curto. Ao verificar se um determinado dado é um valor nulo, estamos realmente verificando se existe. Esse tipo de verificação pode ser simplificado para usar diretamente os dados verificados como uma condição para IF. Se (algo) é completamente equivalente a if (algo! = nulo), mas o primeiro é obviamente mais conciso. Neste momento, se algo existir, a condição da instrução IF será verdadeira; Se algo não existir, a condição da instrução IF será falsa.
Para este exemplo, desde que substituímos se (title_text! = Null) por if (title_text), podemos obter um código mais conciso. Além disso, para aumentar ainda mais a legibilidade do código, também podemos aproveitar a oportunidade para escrever declarações de alter e se as declarações na mesma linha, que podem torná -las mais próximas das frases em inglês em nossas vidas diárias:
var ts = document.getElementsByTagName ("li"); para (var i = 0; i <ts.length; i ++) {text = ts [i] .getAttribute ("title"); if (text) alert (text)}3.4.2 Método setAttribute ()
Todos os métodos que apresentamos antes só podem ser usados para recuperar informações. O método setAttribute () tem uma diferença essencial a partir deles: nos permite fazer modificações no valor do nó do atributo.
Semelhante ao método getAttribute (), o método setAttribute () também é uma função que só pode ser chamada através do objeto do nó do elemento, mas o método setAttribute () exige que passemos dois parâmetros a ele:
obect.setAttribute (atributo, valor)
No exemplo a seguir, a primeira declaração recuperará o elemento cujo valor de atributo de identificação é a compra e a segunda declaração definirá o valor do atributo de título desse elemento para uma lista de mercadorias:
var shopping = document.getElementById ("compras") shopping.setattribute ("title", "uma lista de mercadorias")Podemos usar o método getAttribute () para provar que o valor do atributo de título desse elemento realmente mudou:
var shopping = document.getElementById ("compras"); alert (shopping.getAttribute ("title")); shopping.setAttribute ("title", "uma lista de mercadorias"); alert (shopping.getAttribute ("title"));As instruções acima exibirão duas diálogas de alerta na tela: a primeira caixa de diálogo Alter aparece antes que o método setAttribute () seja chamado, ele ficará em branco ou a palavra "nulo" é exibida; O segundo aparece depois que o valor do atributo de título for definido, ele exibirá a mensagem "A Lista de mercadorias".
No exemplo acima, definimos o atributo de título de um nó existente, mas esse atributo não existia em primeiro lugar. Isso significa que a chamada setAttribute () que emitimos na verdade conclui duas operações: primeiro crie esse atributo e depois defina seu valor. Se usarmos o método setAttribute () em um atributo existente do nó do elemento, o valor atual desse atributo será substituído.
No documento de amostra da "Lista de compras", o elemento <p> já possui um atributo de título, e o valor desse atributo é um lembrete suave. Podemos usar o método setAttribute () para alterar seu valor atual:
<script type = "text/javascript"> var ts = document.getElementsByTagName ("li"); para (var i = 0; i <ts.Length; i ++) {var) text = ts [i] .getAttribute ("title"); alert (title "); alert (title] .getAttribute (" title ")) if (text) {ts [i] .setAtAttribute (" title "," vou ter sucesso! ")O código acima recuperará todos os elementos <p> que já possuem atributos de título do documento e depois modificará todos os seus valores de atributo de título para o texto de novo título. Especificamente para o documento "Lista de compras", o valor da propriedade que um lembrete suave será substituído.
Aqui está um detalhe muito digno de nota: as modificações no documento através do método setAttribute () farão com que o documento exiba efeitos e/ou comportamentos na janela do navegador para mudar de acordo, mas quando veremos o código -fonte do documento através da opção de fonte do navegador. Esse fenômeno de "inconsistente por dentro e fora" vem do modo de funcionamento do DOM: primeiro carregue o conteúdo estático do documento e depois os atualize dinamicamente. A atualização dinâmica não afeta o conteúdo estático do documento. Esse é exatamente o poder e a tentação do DOM: o conteúdo de página refrescante não exige que os usuários finais executem operações de atualização de página em seus navegadores.