Latest web development tutorials

modificação HTML DOM

Modificar HTML = elementos de mudança, atributos, estilos e eventos.


elementos Editar HTML

Modificar HTML DOM significa muitos aspectos diferentes:

  • Alterar o conteúdo HTML
  • Alterar os estilos de CSS
  • Alterar os atributos HTML
  • Criar um novo elemento HTML
  • Remover os elementos HTML existentes
  • Evento Change (manipulador)

Nas seções seguintes, vamos estudar em profundidade o HTML DOM para modificar o método convencional.


Criar conteúdo HTML

A maneira mais fácil para alterar o conteúdo do elemento é usar a propriedade innerHTML.

O exemplo a seguir altera o conteúdo de um elemento HTML <p>:

Exemplos

<html>
<body>

<p id="p1">Hello World!</p>

<script>
document.getElementById("p1").innerHTML="New text!";
</script>

</body>
</html>

tente »

lâmpada Vamos explicar-lhe os detalhes do exemplo nas secções seguintes.


Alterar os estilos de HTML

Através do DOM HTML, você pode acessar os elementos HTML de estilo de objeto.

O exemplo a seguir para mudar um estilo de parágrafo HTML:

Exemplos

<html>

<body>

<p id="p2">Hello world!</p>

<script>
document.getElementById("p2").style.color="blue";
</script>

</body>
</html>


tente »


Criar um novo elemento HTML

Para adicionar um novo elemento ao DOM HTML, você deve primeiro criar o elemento (um nó de elemento) e, em seguida, anexá-lo aos elementos existentes.

Exemplos

<div id="d1">
<p id="p1">This is a paragraph.</p>
<p id="p2">This is another paragraph.</p>
</div>

<script>
var para=document.createElement("p");
var node=document.createTextNode("This is new.");
para.appendChild(node);

var element=document.getElementById("d1");
element.appendChild(para);
</script>

tente »