Diferença Entre .Innertext E .Innerhtml: A

DOM (Document Object Model) é uma interface padronizada que representa um documento HTML em forma de árvore hierárquica, permitindo acessar e interagir dinamicamente com elementos do documento usando JavaScript. Isso dá ao JS poder para alterar, excluir e adicionar elementos, atributos, estilos e eventos HTML/CSS.

Enviado por

Amanda Lazaro Zuanazzi

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

0% acharam este documento útil (0 voto)

35 visualizações2 páginas

Diferença Entre .Innertext E .Innerhtml: A

Enviado por

Amanda Lazaro Zuanazzi

Direitos autorais

Levamos muito a sério os direitos de conteúdo. Se você suspeita que este conteúdo é seu, reivindique-o aqui.

Formatos disponíveis

Baixe no formato DOCX, PDF, TXT ou leia on-line no Scribd

Você está na página 1/ 2

NOVIDADES: O que é DOM?

DOM (Document Object Model), Modelo de Objeto para

Documento, é uma *INTERFACE padronizada utilizada para REPRESENTAR um
DOCUMENTO HTML. Este modelo utiliza uma linguagem neutra que, por meio de uma
árvore hierárquica de diretórios, permite você ACESSAR e INTERAGIR com QUALQUER
ELEMENTO de seu DOCUMENTO de maneira DINÂMICA com o uso do JavaScript. Desta
forma, o JS tem o poder de: alterar, excluir e adicionar: elementos HTML, atributos HTML,
eventos HTML, estilos CSS. *Interface, do latim INTER(entre) + FACIES(faces), significa:
ligação física ou lógica entre 2 sistemas ou partes que não poderiam ser conectados
diretamente. Ou seja, o DOM é o INTERMEDIADOR da COMUNICAÇÃO da linguagem
JavaScript com as tecnologias HTML5 e CSS3. Ilustração de uma árvore DOM: window / | \
location document history | html / \ head body / | / | | \ meta title h1 p p div | strong Parent
(pai) - é quem está ACIMA na árvore HIERARQUICA. Child (filho) - é quem está ABAIXO na
árvore HIERARQUICA. É como se fosse uma árvore genealógica. Exemplos: HEAD e BODY
são FILHOS de HTML; HTML é PAI de HEAD e BODY; HTML é FILHO de DOCUMENT. É
importante ressaltar que: um DOCUMENTO HTML e sua REPRESENTAÇÃO DOM são a
MESMA COISA. A única diferença é que estes estão REPRESENTADOS de FORMAS
DIFERENTES. Ex: ("uma garrafa") e ("a bottle") são a MESMA COISA, só que representadas
em línguas diferentes. É a mesma ideia. Caso você altere o DOCUMENTO HTML você
também alterará o seu DOM e vice-versa. ____________________________ Como
ACESSAR/SELECIONAR ELEMENTOS através do DOM: Lista de 5 MÉTODOS de acesso: by
Tag - getElementsByTagName("") by ID - getElementByID("") by Name -
getElementsByName("") by Class - getElementsByClassName("") by Selector -
querySelector (""); querySelectorAll (""); O método getElementsByTagName() SELECIONA
ELEMENTOS via TAG. O método getElementById() SELECIONA UM ELEMENTO via ID. O
método getElementsByName() SELECIONA ELEMENTOS via NOME. O método
getElementsByClassName("") SELECIONA ELEMENTOS via CLASSE. O método
querySelector() SELECIONA UM ELEMENTO via SELETOR CSS. O método queySelectorAll()
SELECIONA ELEMENTOS via SELETOR CSS. *Atente-se que alguns dos seletores estão no
SINGULAR e outros no PLURAL (Element e Element*S*) Caso utilize um seletor que está no
PLURAL, para ESPECIFICAR qual TAG, NAME ou CLASS você deseja ACESSAR, você têm
que usar, após os parênteses (), os colchetes [] e, dentro destes, você indicará qual a
POSIÇÃO do elemento que você deseja ACESSAR. Ex da aula:
document.getElementsByTagName('p')[1]; Neste exemplo selecionou-se, dentro dos
parênteses, todas as tags <p>. E, dentro dos colchetes, selecionou-se a tag <p> que se
encontra na 1° POSIÇÃO, ou seja, a 2° tag <p>. *Lembrando que a contagem começa em 0.
Portanto: a posição 0 é a 1° tag <p> a posição 1 é a 2° tag <p> a posição 2 é a 3° tag <p> ...
____________________________ Diferença entre .innerText e .innerHTML : A
propriedade .innerText serve para DEFINIR ou RETORNAR o CONTEÚDO de TEXTO de um
ELEMENTO. A propriedade .innerHTML serve para DEFINIR ou RETORNAR o CONTEÚDO
HTML (texto+formatação) de um ELEMENTO. ILUSTRAÇÃO (crie um outro documento,
monte a estrutura básica HTML5 (!+enter) e insira este código dentro do body): <body>
<h1>Diferença entre innerText e InnerHTML:</h1> <p class="teste_1"></p> <p
id="teste_2"></p> <script> var variavel_1 = document.querySelector('.teste_1')
variavel_1.innerText = "Teste do <strong>innerText</strong>" var variavel_2 =
document.querySelector('#teste_2') variavel_2.innerHTML = "Teste do
<strong>innerHTML</strong>" </script> </body> ____________________________ ALGUMAS
DEFINIÇÕES: *Um OBJETO no JS é um CONTAINER de PROPRIEDADES e MÉTODOS. *Uma
FUNÇÃO no JS é um subprograma que pode receber PARÂMETROS e RETORNAR um
resultado. São AÇÕES executadas assim que são CHAMADAS ou em decorrência de algum
EVENTO. É um bloco de códigos projetado para executar uma tarefa ou calcular um valor.
*Um MÉTODO é uma FUNÇÃO que é ARMAZENADA como PROPRIEDADE de um OBJETO.
Ou seja, MÉTODOS são AÇÕES que podem ser EXECUTADAS em OBJETOS. *Um EVENTO
no JS é uma CONDIÇÃO que, quando verdadeira, fará a CHAMADA de uma FUNÇÃO. *O
Seletor de Classe é representado por: . *O Seletor de ID é representado por: #

Diferença Entre .Innertext E .Innerhtml: A

Enviado por

Diferença Entre .Innertext E .Innerhtml: A

Enviado por

NOVIDADES: O que é DOM?

DOM (Document Object Model), Modelo de Objeto para

Você também pode gostar