Como acessar HTML elementos do programa 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.
Como para 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 fluir a partir 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 a corrente, adicionar um novo fluxo por escrito a ele, ou permitir que o fluxo de dados abrindo o fluxo. A lista a seguir descreve as funções associadas ao fluxo de saída:
fechar(): Fecha um fluxo de saída que foi aberta usando 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 do fluxo com alguns outros conceitos.
O documento exemplo inclui uma etiqueta 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 uma 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 baseia-se numa aninhada para loop para determinar o nome da regra e cada um dos estilos definidos dentro da regra. A propriedade de estilo consiste em um nome de estilo e um valor de estilo. Você deve usar o nome da propriedade de estilo para acessar o valor usando 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.
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 o tag.document.getElementById ( "Change1") innerHTML = "Mudou!" -. // Modificar o tag.document.getElementById ( "btnChange") setAttribute ( "value", "Clicked") -.}
Mesmo que este exemplo parece simples, ele contém tudo o necessário para alterar o conteúdo em quase todas as situações. Quando se trabalha com um elemento HTML, tal como o
tag, você usa o innerHTML propriedade para fazer alterações. Esta técnica funciona igualmente bem em, e tags.
Como alterar atributos HTML
Cada tag HTML pode incluir duas formas de informação: o conteúdo que aparece entre o início eo fim da tag e atributos. O conteúdo normalmente toma a forma de texto, mas também pode incluir um objecto, tal como uma imagem, um link para um vídeo, ou um som. A maioria dos atributos requerem informações específicas. Geralmente você pode dividir atributos nas seguintes categorias:
Conteúdo: Define as informações que aparecem na tela para o telespectador.
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 a maneira pela qual um utilizador 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.
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.
funcionar EnableButton () {// Reconfigurar btnSecond.var Button2 = document.getElementById("btnSecond")-Button2.removeAttribute("disabled")-Button2.setAttribute("value", "Alterar Conteúdo") -} function ChangeP1 () {// Agora que o segundo botão está habilitado, use //-lo para alterar o tag style.var P1 = document.getElementById ( "P1") - P1.setAttribute ( "class", "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 ativar 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, de modo 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
marca atualmente usa o estilo CSS padrão para essa marca. Para alterar o estilo do 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.
