Um objeto Document representa o documento que é exibido nessa janela. O objeto Document possui várias propriedades que se referem a outros objetos que permitem o acesso e a modificação do conteúdo do documento. Neste artigo, entenderemos o HTML DOM.
- Conceito HTML DOM
- O que é HTML DOM
- O que o HTML DOM NÃO é
- De onde veio o DOM
- Propriedades de HTML DOM
- Encontrando Elementos HTML
Conceito HTML DOM
A forma como um conteúdo documentado é acessado e modificado é chamada de Modelo de Objeto de Documento ou DOM. Os objetos são organizados em uma hierarquia. Essa estrutura hierárquica se aplica à organização de objetos em um documento da web.
- Objeto de janela e menos Topo da hierarquia. É o elemento máximo da hierarquia de objetos.
- Objeto de documento e menos Cada documento HTML que é carregado em uma janela se torna um objeto de documento. O documento contém o conteúdo da página.
- Objeto de formulário e menos Tudo dentro das tags… define o objeto de formulário.
- Elementos e menos de controle de formulário O objeto de formulário contém todos os elementos definidos para esse objeto, como campos de texto, botões, botões de opção e caixas de seleção.
O que é HTML DOM
O Document Object Model é uma API de programação para documentos. O próprio modelo de objeto se parece muito com a estrutura dos documentos que modela. Por exemplo, considere esta tabela, tirada de um documento HTML:
| Bosque sombrio | Eólico |
| Over the River, Charlie | Dorian |
O que o HTML DOM NÃO é
Esta seção foi projetada para fornecer uma compreensão mais precisa do Document Object Model, distinguindo-o de outros sistemas que possam parecer semelhantes.
Embora o Document Object Model tenha sido fortemente influenciado pelo HTML dinâmico, no Nível 1 ele não implementa todo o HTML dinâmico. Em particular, os eventos ainda não foram definidos. O Nível 1 foi projetado para estabelecer uma base sólida para esse tipo de funcionalidade, fornecendo um modelo robusto e flexível do próprio documento.
O Document Object Model não é uma especificação binária. Os programas Document Object Model escritos na mesma linguagem serão compatíveis com o código-fonte nas plataformas, mas o Document Object Model não define nenhuma forma de interoperabilidade binária.
O Document Object Model não é uma forma de objetos persistentes em XML ou HTML. Em vez de especificar como os objetos podem ser representados em XML, o Document Object Model especifica como os documentos XML e HTML são representados como objetos, para que possam ser usados em programas orientados a objetos.
vantagens da sobrecarga de método em java
O Document Object Model não é um conjunto de estruturas de dados, é um modelo de objeto que especifica interfaces. Embora este documento contenha diagramas que mostram relacionamentos pai / filho, esses são relacionamentos lógicos definidos pelas interfaces de programação, não representações de qualquer estrutura de dados interna específica.
O Document Object Model não define “a verdadeira semântica interna” de XML ou HTML. A semântica dessas línguas é definida pelas próprias línguas.
O Document Object Model é um modelo de programação projetado para respeitar essa semântica. O Document Object Model não tem nenhuma ramificação para a maneira como você escreve documentos XML e HTML. Qualquer documento que possa ser escrito nessas linguagens pode ser representado no Document Object Model.
O Document Object Model, apesar do nome, não é um concorrente do Component Object Model (COM). COM, como CORBA, é uma forma independente de linguagem para especificar interfaces e objetos. O Document Object Model é um conjunto de interfaces e objetos projetados para gerenciar documentos HTML e XML. O DOM pode serimplementado usando sistemas independentes de linguagem, como COM ou CORBA, também pode ser implementado usando ligações específicas de linguagem, como as ligações Java ou ECMAScript especificadas neste documento.
De onde veio o modelo de objeto de documento
O Document Object Model se originou como uma especificação para permitir que scripts JavaScript e programas Java sejam portáveis entre navegadores da web. O HTML dinâmico foi o ancestral imediato do Document Object Model e foi originalmente pensado principalmente em termos de navegadores.
diferença entre hashmap e hashtable em java
No entanto, quando o Grupo de Trabalho de Modelo de Objeto de Documento foi formado, ele também foi integrado por fornecedores em outros domínios, incluindo editores de HTML ou XML e repositórios de documentos. Como resultado, vários desses fornecedores trabalharam com SGML antes do XML ser desenvolvido, o Document Object Model foi influenciado por SGML Groves e o padrão HyTime. Alguns desses fornecedores também desenvolveram seus próprios modelos de objetos para documentos, a fim de fornecerAPIs de programação para editores SGML / XML ou repositórios de documentos, e esses modelos de objeto também influenciaram o Document Object Model.
Propriedades de HTML DOM
Vamos ver as propriedades dos objetos de documento que podem ser acessados e modificados pelo objeto de documento.
- Objeto de janela: O objeto da janela está sempre no topo da hierarquia.
- Objeto do documento: Quando um documento HTML é carregado em uma janela, ele se torna um objeto de documento.
- Objeto de formulário: É representado por Formato Tag.
- Objetos de link: É representado por ligação Tag.
- Objetos âncora: É representado por um href Tag.
- Elementos de controle do formulário: O formulário pode ter muitos elementos de controle, como campos de texto, botões, botões de opção e caixas de seleção, etc.
Métodos do objeto do documento :
- escrever (“string”): escreve a string fornecida no documento.
- getElementById (): retorna o elemento com o valor de id fornecido.
- getElementsByName (): retorna todos os elementos com o valor de nome fornecido.
- getElementsByTagName (): retorna todos os elementos com o nome de tag fornecido.
- getElementsByClassName (): retorna todos os elementos com o nome de classe fornecido.
Encontrando Elementos HTML
Quando você deseja acessar elementos HTML com JavaScript, você deve encontrar os elementos primeiro.
Há algumas maneiras de fazer isso:
- Encontrar elementos HTML por id
- Encontrar elementos HTML por nome de tag
- Encontrar elementos HTML por nome de classe
Encontrando Elemento HTML por Id
sort array c ++
A maneira mais fácil de encontrar um elemento HTML no DOM é usando o id do elemento.
Exemplo
Encontrar elementos HTML por nome de tag
Este exemplo encontra o elemento com id = ”main” e, em seguida, encontra todos
elementos dentro de “principal”:
Com isso, chegamos ao fim deste artigo HTML DOM. Espero que você tenha entendido os vários aspectos do HTML DOM, o Document Object Model.
Confira nosso que vem com treinamento ao vivo conduzido por instrutor e experiência em projetos da vida real. Este treinamento torna você proficiente em habilidades para trabalhar com tecnologias da web de back-end e front-end. Inclui treinamento em Desenvolvimento Web, jQuery, Angular, NodeJS, ExpressJS e MongoDB.
Tem alguma questão para nós? Mencione isso na seção de comentários do blog “Imagens HTML” e entraremos em contato com você.