Manipulação de elementos HTML através de JavaScript
Este artigo vai discutir manipulando elementos HTML através JavaScript. Também explicaremos o procedimento para adicionar elementos HTML, anexar elementos HTML, alterar o conteúdo dos elementos HTML, encontrar e obter elementos HTML e remover elementos HTML e seus nós filhos. Além disso, os exemplos relacionados a AppendChild (), InsertBefore (), INNERHTML Propriedade, GetElementById (), GetElementByClassName (), QuerySelectorAll (), Remover () e RemoveChild () serão fornecidos. Então vamos começar!
Como adicionar elementos HTML através do JavaScript usando o método AppendChild ()
O método JavaScript AppendChild () é utilizado para adicionar um elemento HTML como filho do nó pai especificado. Este método é usado para mover elementos HTML.
Sintaxe do método AppendChild ()
parentnode.ApndendChild (ChildNode);Aqui o parentnode é o elemento html que queremos declarar como pai, enquanto o ChildNode é o elemento HTML recém -criado adicionado ao nó pai.
Exemplo: como adicionar elementos HTML através do JavaScript usando o método AppendChild ()
Neste exemplo, mostraremos como usar o “ApndendChild ()”Método para adicionar os elementos HTML através do JavaScript. Primeiro de tudo, adicionaremos um título e um parágrafo usando o
e
Elementos HTML:
Isso é Linuxhint.com
Adicionando elementos HTML através de JavaScript.
Este é o parágrafo principal.
Este é o segundo parágrafo.
Na próxima etapa, criaremos um novo
elemento "parágrafo”Ao utilizar o“createElement ()”Método do objeto de documento:
Execute o programa acima do seu editor de código favorito ou qualquer caixa de areia de codificação on-line; No entanto, utilizaremos o JSBIN para esse fim:
Como você pode ver na saída abaixo, um novo elemento HTML é adicionado com o conteúdo do texto “Este é um novo nó”:
Como anexar elementos HTML através do JavaScript usando o método insertBefore ()
Se você deseja anexar um elemento HTML como um nó infantil antes do nó especificado, você pode invocar o “insertBefore ()”Método JavaScript.
Sintaxe do método InsertMethod ()
parentnode.inserir antes (newNode, existingNode);Aqui o "NEWNODE”É o recém -criado elemento HTML que você deseja adicionar,“ExistingNode”É o elemento antes que você insira seu elemento html e o“parentnode”É o elemento HTML que você especificou como o nó pai.
Exemplo: como anexar elementos HTML através do JavaScript usando o método insertBefore ()
No exemplo anterior, utilizamos o método AppendChild () para adicionar o novo elemento HTML como o último filho do pai HTML. No entanto, você também pode usar o JavaScript “insertBefore ()”Método para adicionar um elemento HTML antes do elemento especificado. O exemplo abaixo do rumo lhe ensinará o uso de “insertBefore ()”Método.
Em primeiro lugar, adicionaremos um título e alguns parágrafos da seguinte forma:
Isso é Linuxhint.com
Adicionando elementos HTML através de JavaScript.
Este é o parágrafo principal.
Este é o segundo parágrafo.
Em seguida, criaremos um novo elemento “parágrafo”Elemento HTML e, em seguida, defina um nó de texto infantil para ele:
A execução do programa acima dado adicionará o “parágrafo”HTML antes de“P1”:
Como alterar o conteúdo dos elementos HTML através do JavaScript usando a propriedade InnerHTML
O HTML DOM permite que você altere o conteúdo HTML, utilizando o “Innerhtml" propriedade. O "Innerhtml”É normalmente usado em páginas da web para gerar conteúdo dinâmico de HTML, como formulários de comentários, formulários de registro e links.
Sintaxe da propriedade innerhtml JavaScript
elemento.INNERHTML = ValorAqui, "elemento”É o elemento HTML que você selecionou para alterar seu conteúdo e“valor”É o conteúdo que definiremos.
Exemplo 1: Alteração do conteúdo dos elementos HTML através do JavaScript
Este exemplo mostrará como usar o “Innerhtml”Propriedade JavaScript para modificar o conteúdo de um elemento HTML. Em primeiro lugar, adicionaremos um elemento de cabeçalho com o
tag de título e um parágrafo com o
Tag html:
Altere os elementos HTML usando JavaScript
Uma sequência de teste
Agora, queremos mudar o conteúdo do “”Elemento tendo o id“P1”. Para fazer isso, utilizaremos o “documento.getElementById () ”Método para obter o elemento especificado. Depois disso, definiremos o conteúdo do nosso
elemento para “Isso é Linuxhint.com”:
Mudamos o conteúdo do parágrafo acima
Confira a saída abaixo, que obtivemos ao executar o programa acima:
Como encontrar e obter elementos html por id através do JavaScript
A maioria dos desenvolvedores de JavaScript utilizou o getElementById () Método para encontrar e obter elementos HTML com IDs exclusivos. Se você passou um ID que não pertence a nenhum elemento HTML, o método getElementById () exibirá o valor nulo.
Sintaxe do método getElementById ()
documento.getElementById (ElementId)Aqui o "ElementId”Representa o ID exclusivo do elemento HTML que você deseja encontrar e obter em seu código JavaScript.
Exemplo: encontre e obtenha elementos html por id através do JavaScript
No exemplo a seguir, adicionaremos elementos html como um título com o
tag e três elementos de parágrafo com o
marcação. Observe que também adicionamos “ids”Com os elementos do parágrafo:
Isso é Linuxhint.com
Encontre e obtenha elementos html por id em javascript
Este é um programa JavaScript que utiliza o método "getElementsbyid"
Na próxima etapa, encontraremos e faremos com que o elemento tenha o ID “P1”Usando o“documento.getElementById ()”Método. Após o ding, mudaremos o conteúdo do elemento HTML recuperado:
Como encontrar e obter elementos HTML por ClassName através do JavaScript
O "getElementsbyclassName ()”O método é usado para encontrar e obter elementos HTML com a mesma classe. Quando você tenta obter um elemento HTML utilizando o nome da classe, o intérprete JavaScript retornará todos os objetos pertencentes à mesma classe. Depois disso, você pode executar operações específicas nesses elementos HTML.
Sintaxe do método getElementsByClassName ()
documento.getElementsbyclassName (ClassName)Aqui o "nome da classe”Representa o nome da classe dos elementos HTML que você deve encontrar e entrar em seu programa.
Exemplo: Encontre e obtenha elementos HTML por ClassName através do JavaScript
No exemplo seguinte, adicionamos um título e alguns elementos de parágrafo com o nome da classe “C1”:
Isso é Linuxhint.com
Encontre e obtenha elementos html por nome de classe em javascript
texto em primeiro paragrapa
texto em segundo parágrafo
Em seguida, procuraremos os elementos HTML que "têm“C1”Como classe deles, usando o método getElementsbyclassName () e armazenará as coleções dos objetos em“a”:
Aqui está a saída que obtivemos ao executar o programa JavaScript acima:
Como encontrar e obter elementos HTML pelo seletor CSS através do JavaScript
Em html, o QuerySelectorAll () O método retorna um objeto nodelista estático que compreende uma coleção de elementos filhos de um elemento combinado com os seletores CSS especificados. Os números de índice são usados para encontrar e obter os nós, começando em 0.
Sintaxe do método querySelectorall ()
elemento.QuerySelectorAll (seletores)O método querySelectorAll () leva “Seletores“Como um argumento; Uma string dom compreende um ou mais seletores CSS válidos.
Exemplo: Encontre e obtenha elementos HTML pelo seletor de CSS através do JavaScript
No programa JavaScript abaixo, usamos o método QuerySelectorAll () para encontrar e obter os elementos HTML do parágrafo tendo “C1”Como nome de classe:
Isso é Linuxhint.com
Encontre e obtenha elementos html por nome de classe em javascript
texto em primeiro paragrapa
texto em segundo parágrafo
Confira a saída do método JavaScript querySelectorall ():
A execução do programa JavaScript acima mencionado mostrará a seguinte saída:
Como remover elementos HTML através do JavaScript usando o método Remover ()
O javascript “remover()”O método é usado para excluir o elemento HTML especificado do Modelo de Objeto do Documento (DOM).
Sintaxe do método Remover ()
nó.remover()Aqui, "nó”Representa o elemento HTML que você deseja excluir através do JavaScript.
Exemplo: Remova os elementos HTML através do JavaScript usando o método Remone ()
No ritmo abaixo, adicionamos um elemento html de título, um parágrafo
e um elemento que compreende dois parágrafos e como nós filhos:
Isso é Linuxhint.com
Adicionando elementos HTML através de JavaScript.
Este é o parágrafo principal.
Este é o segundo parágrafo.
Em seguida, adicionaremos um botão e anexaremos um “ONCLICKManipulador de eventos. De acordo com o código a seguir, quando clicaremos no “Remova o elemento”Botão, ele invocará o“MyFunction ()”Método:
No "MyFunction ()”Método, primeiro, utilizamos o“documento.getElementById”Para encontrar o elemento que queremos excluir especificando seu“eu ia”, Então invocaremos o“remover()”Método:
A saída abaixo do rumo significa que “P1”O HTML é excluído do nosso programa JavaScript com a ajuda do“remover()”Função:
Como remover elementos infantis HTML através do JavaScript usando o método removeChild ()
Em JavaScript, o “removechild ()”É utilizado para excluir um nó HTML infantil específico de um elemento HTML.
Sintaxe do Método RemoveChild ()
parentnode.Removchild (ChildNode)Aqui, o internode é o elemento html que especificamos como um “pai”Node e ChildNode é o elemento HTML que queremos remover do elemento pai.
Remova os elementos infantis HTML através do JavaScript usando o Método RemoveChild ()
Neste exemplo, tentaremos remover o elemento filho do nosso elemento HTML definido:
Isso é Linuxhint.com
Adicionando elementos HTML através de JavaScript.
Este é o parágrafo principal.
Este é o segundo parágrafo.
Para excluir um elemento filho, antes de tudo, você precisa criar um “pai”Elemento HTML e especifique o elemento HTML atuando como pai em seu código JavaScript. No nosso caso, adicionamos “Div1”:
Como você pode ver, o elemento filho do elemento HTML é excluído com sucesso:
Conclusão
O Modelo de Objeto do Documento (DOM) em JavaScript é uma interface de desenvolvedor que permite que você manipule o design, a estrutura e o conteúdo dos elementos HTML do seu site. Este artigo discutiu os elementos HTML de manipulação através do JavaScript. Também explicamos o procedimento para adicionar elementos HTML, anexar elementos HTML, alterar o conteúdo dos elementos HTML, encontrar e obter elementos HTML e remover elementos HTML e seus nós filhos. Além disso, os exemplos relacionados a AppendChild (), InsertBefore (), INNERHTML Propriedade, GetElementById (), GetElementsByClassName (), querySelectorAll (), Remover () e RemoveChild () também são fornecidos.