Html dom
Este artigo discutirá HTML DOM, seu significado e sua estrutura. Também falaremos sobre as propriedades e métodos do modelo de objeto de documentos e níveis de DOM.
Html dom
O modelo de objeto de documentos HTML ou HTML DOM é uma interface de programação XML e HTML. O modelo de objeto de documento cria uma estrutura de documentos lógicos e define o método para acessar e modificar. Como o HTML DOM não identifica nenhum relacionamento de objeto, ele é denominado como estrutura lógica.
HTML DOM também é conhecido por representar páginas da web de maneira hierárquica e organizada, para que os usuários e programadores de JavaScript possam navegar facilmente pelo documento. O HTML DOM permite que você acesse e manipule elementos HTML, classes, tags, atributos e IDs, utilizando os métodos e comandos oferecidos.
Por que você precisa de html dom
JavaScript é utilizado para adicionar funcionalidade relacionada se você estiver usando HTML para estruturar suas páginas da web. Quando um documento HTML é carregado no navegador, o JavaScript não pode entender diretamente. Portanto, um modelo de objeto de documento correspondente é criado. O DOM gerado representa o mesmo documento HTML de maneira diferente com a ajuda dos objetos. Depois disso, o JavaScript pode interpretar prontamente o HTML DOM.
Por exemplo, em um documento HTML, o JavaScript não consegue entender diretamente as tags (
parágrafo
); No entanto, pode entender o objeto “p”No modelo de objeto de documento. Com esse recurso, o JavaScript pode usar vários métodos para acessar os objetos adicionados dos documentos HTML.
Estrutura de html dom
O modelo de objeto HTML DOM ou Document tem uma estrutura semelhante a uma árvore, onde a árvore define o modelo de estrutura do documento. No modelo de estrutura HTML DOM, “isomorfismo estrutural”É uma propriedade essencial que afirma que, se você usou duas implementações de DOM para construir uma representação ou modelo do mesmo documento HTML, eles produzirão os mesmos modelos estruturais baseados nos mesmos objetos e em seus relacionamentos.
Por que chamamos HTML DOM de modelo de documento
Objetos HTML são usados para modelar documentos. Este modelo compreende a estrutura do documento, objetos e seu comportamento, como os elementos de tag html que têm seus atributos.
Propriedades HTML DOM
Agora, vamos verificar as propriedades do objeto do documento que podem recuperar e alterar o objeto do documento:
- Objeto de janela: Você sempre verá o "objeto de janela" no topo da hierarquia dom.
- Objeto de documento: Quando você carrega um documento HTML em um navegador, ele é convertido em um objeto de documento.
- Objeto âncora: As tags href são utilizadas para representar os objetos âncora.
- Objeto de forma: As tags de formulário são utilizadas para representar os objetos do formulário.
- Objeto de link: As tags de link são utilizadas para representar os objetos do link.
- Elementos de controle de formulário: Os formulários também podem ter outros elementos de controle, como botões, redefinir, botões de rádio, textarea, caixas de seleção.
Métodos de objeto de documentos HTML
Aqui estão alguns métodos úteis de objeto de documentos HTML que você pode usar de acordo com seus requisitos:
- getElementbyclassName (): O método getElementByClassName () é utilizado para recuperar elementos com o nome da classe especificado.
- getElementByTagName (): O método getElementByTagName () é utilizado para recuperar elementos com o nome de tag adicionado.
- getElementByName (): O método getElementByName () é utilizado para recuperar elementos com o valor do nome especificado.
- getElementById (): O método getElementById () é utilizado para recuperar elementos com o valor de ID especificado.
- escrever(): O método write () é utilizado para escrever a string especificada no documento.
Exemplo 1: Encontre e obtenha o elemento html por id em javascript
No exemplo abaixo, usamos o método getElementById () para encontrar o html dom tendo o id “P1”:
Isso é Linuxhint.com
Encontre e obtenha elementos html dom by id
Este é um programa JavaScript que utiliza o método "getElementsbyid"
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:
A execução do programa JavaScript acima mencionado mostrará a seguinte saída:
Exemplo 2: representação de elementos html dom
O exemplo a seguir ilustra a representação dos elementos HTML no DOM (Modelo de Objeto do Documento):
| Bicicleta | Avião |
| Caminhão | Ônibus |
Aqui está a representação dos elementos acima de uma estrutura semelhante a uma árvore:
HTML DOM Nível
HTML DOM consiste em quatro níveis: Nível 0, Nível 1, Nível 2 e Nível 3.
DOM Nível 0
Este nível oferece um conjunto de interface de baixo nível.
DOM Nível 1
DOM Nível 1 compreende Html e ESSENCIAL peças. HTML fornece interfaces de alto nível que podem ser utilizadas para representar documentos HTML e a parte principal é usada para representar o documento estruturado.
DOM Nível 2
DOM Nível 2 é baseado em seis especificações: alcance, travessal, estilo, eventos e core2.
- FAIXA: Ele permite programas HTML para alocar dinamicamente um intervalo de conteúdo no documento.
- TRAVESSIA: Permite que os programas HTML atravessem o documento dinamicamente.
- ESTILO: Ele permite que os programas recuperem e defina o conteúdo das folhas de estilo.
- Eventos: Quando um usuário interage com uma página da web, os eventos são os scripts executados como resultado dela.
- VISUALIZAÇÕES: Ele permite que os programas HTML recuperem e defina o conteúdo do documento.
DOM Nível 3
DOM O nível 3 é baseado em cinco especificações: XPath, eventos, validação, salvar, carga e core3.
- Xpath: É uma linguagem de caminho utilizada para acessar a estrutura da árvore de DOM.
- Eventos: Aumenta a funcionalidade dos eventos de nível 2 do DOM.
- VALIDAÇÃO: Ele permite que o programa HTML modifique a estrutura e o conteúdo do documento, garantindo que o documento fornecido seja válido.
- SALVAR e CARREGAR: O programa HTML permite carregar e salvar dinamicamente o conteúdo do documento XML em um documento DOM.
- Core3: Aumenta a funcionalidade do núcleo de nível 2 do DOM.
Conclusão
Html dom ou o modelo de objeto de documento é crucial para o desenvolvimento de sites interativos. É uma interface do usuário que permite que uma linguagem de programação altere o estilo, estrutura e conteúdo do site. HTML DOM também atua como uma interface entre HTML e JavaScript. Este artigo discutiu html dom, seu significado e sua estrutura. Também falamos sobre as propriedades e métodos de modelo de objeto de documentos e níveis de DOM.