Como acessar elementos do programa html em javascript
Se você quer mudar o conteúdo, apresentação, ou a interação, você deve ter acesso a um elemento HTML indivíduo para fazê-lo. Por exemplo, se você quiser alterar a legenda de um botão, você deve ter acesso ao botão primeiro.
Conteúdo
Como modificar o fluxo de saída
Pense em um fluxo físico quando se considera fluxos em um sistema de computador. Em uma corrente física, átomos individuais de fluxo de água a partir de uma localização para outra ao longo de um caminho específico. Da mesma forma, em uma corrente de computador, os bits de dados individuais de fluxo de um local para outro ao longo de um caminho específico.
Modificando o fluxo de saída de meios para alterar o fluxo de dados no caminho. Você pode represar o fluxo fechando o fluxo, adicionar um novo fluxo escrevendo para ele, ou permitir que o fluxo de dados abrindo o fluxo. A lista que se segue descreve as funções associadas com o fluxo de saída:
fechar(): Fecha-se um fluxo de saída que foi aberto utilizando o aberto() método.
aberto(): Abre um novo fluxo de saída para receber conteúdo a partir de qualquer Escreva() ou writeln () função.
Escreva(): Emite o texto que você fornecer para o fluxo aberto no momento.
writeln (): Emite o texto que você fornecer para o fluxo atualmente aberto e termina a saída com um caractere de nova linha, o que torna a saída mais fácil de ver quando ver a fonte da página em um navegador.
Essas quatro funções tornam possível modificar o fluxo de saída. Aqui está um exemplo que combina modificação córrego com alguns outros conceitos.
O documento inclui um exemplo marca que define a formatação de vários elementos. Claro, seria bom saber como a página é formatada. Cada tag associada a uma página é um item na styleSheets propriedade, que você pode acessar usando um índice.
Esta página tem apenas um tag para que o código acessa-lo usando o styleSheets [0] índice. Cada estilo CSS tem uma ou mais regras definidas para isso, que você pode acessar usando o cssRules propriedade.
Neste ponto, o exemplo se baseia em um nested para loop para determinar o nome da regra e cada um dos estilos definidos dentro da regra. A propriedade de estilo consiste de um nome de estilo e um valor de estilo. Você deve usar o nome da propriedade de estilo para acessar o valor utilizando o getPropertyValue () método.
Você pode usar vários métodos e propriedades associadas ao styleSheets propriedade e seus filhos para modificar estilos, bem como lê-los.
Video: Curso HTML, CSS e javascript - Aula 1 - Introdução ao HTML
Como afeta o conteúdo HTML
A razão inteira para exibir uma página é fornecer conteúdo para o telespectador. Pode parecer como se as páginas são todos sobre a formatação, gráficos, elementos de design, e assim por diante, mas esses itens são vitrine para o conteúdo que a página oferece. O exemplo a seguir mostra algumas técnicas simples para alterar o conteúdo de uma página.
função ChangeContent () {// Modificar a
tag.document.getElementById ("Change1") = .innerHTML"Mudado!"- // Modificar a tag.document.getElementById ("btnChange") .setAttribute ("valor", "clicado") -}
Mesmo que este exemplo parece simples, ele contém tudo o necessário para alterar o conteúdo em quase todas as situações. Ao trabalhar com um elemento HTML, como o
tag, você usa o innerHTML propriedade para fazer alterações. Esta técnica funciona igualmente bem em, , e Tag.
Como mudar atributos HTML
Cada tag HTML pode incluir duas formas de informação: conteúdo que aparece entre o início eo fim da tag e atributos. O conteúdo normalmente assume a forma de texto, mas também pode incluir um objeto, tal como uma imagem, um link para um vídeo ou um som. A maioria dos atributos necessitam de informações específicas. Geralmente você pode dividir atributos nas seguintes categorias:
Conteúdo: Define as informações que aparecem na tela para o espectador.
formatação: Modifica a forma como a informação aparece na tela. Por exemplo, pode adicionar cores especiais ou alterar a aparência da fonte usada para exibir o texto.
Ao controle: Especifica o caminho em que um usuário pode interagir com o conteúdo. Por exemplo, você pode decidir que uma caixa de texto permitirá que o espectador só para ler o conteúdo, em vez de ler e escrever.
Video: javascript for beginners 23 - Adding JQuery to HTML
Identificação: Fornece uma descrição ou outro identificador para outros controles ou javascript, para que estas outras entidades possam identificar exclusivamente o controle de host.
Evento: Determina a função utilizada para manipular o evento específico, como um clique do usuário ou a mudança de conteúdo.
O exemplo a seguir mostra como modificar vários atributos de uma página.
Video: #2 HTML - Aula 24 - javascript Parte 7 - Arrays
funcionar EnableButton () {// reconfigurar btnSecond.var Botão2 = document.getElementById ("btnSecond") -Button2.removeAttribute ("Desativado") -Button2.setAttribute ("valor", "Alterar conteúdo") -} função ChangeP1 () {// Agora que o segundo botão é habilitado, use //-lo para alterar o tag style.var P1 = document.getElementById ("p1") -P1.setAttribute ("classe", "especial") -}
Este exemplo tem dois botões. No início, o primeiro botão é desativado. Para tornar o botão funcional, o usuário clica no botão primeiro, que chama EnableButton (). Para habilitar o botão, o código remove o Desativado atributo. A legenda para o segundo botão está incorreta neste momento. Ele diz que atualmente Desativado, para que o código também altera o valor atribuir a Alterar conteúdo.
Agora que o segundo botão é habilitado e tem o subtítulo direita, o usuário pode clicar nele. o
tag atualmente usa o estilo CSS padrão para essa tag. Para alterar o estilo de texto, o código adiciona um classe atributo usando setAttribute () e define o valor de especial. adicionando o classe atributo altera automaticamente a forma de texto.
