Saiba como usar o painel DOM para editar a estrutura HTML mapeando elementos na Visualização dinâmica ou seletores aplicados no CSS Designer com a marcação HTML.

O painel DOM renderiza uma árvore de HTML interativa do conteúdo estático e dinâmico. Essa exibição ajuda você a mapear visualmente elementos na Visualização dinâmica com sua marcação HTML e os seletores aplicados no CSS Designer. Você também pode fazer edições na estrutura HTML no painel DOM e ver as alterações acontecendo imediatamente na Visualização dinâmica.

Para abrir o painel DOM, selecione Janela > DOM. Você também pode usar as teclas Ctrl + / (Win) ou Cmd + / (Mac) para abrir o painel DOM.

Quando você arrasta os elementos para inseri-los diretamente na Visualização dinâmica, o ícone </> aparece antes de você soltar o elemento. Você pode clicar nesse ícone para abrir o painel DOM e inserir o elemento na posição apropriada na estrutura do documento. Para obter mais informações, consulte Inserir elementos diretamente na Visualização dinâmica.

O painel DOM exibe somente elementos estáticos na Visualização de design ou código e elementos estáticos e dinâmicos na Visualização dinâmica.

Nos documentos de grade fluida, o painel DOM permite somente visualizar a estrutura HTML DOM, não permite editar a estrutura HTML.

Observação:

você pode editar apenas o conteúdo estático no painel DOM. Elementos somente leitura ou dinâmicos são mostrados em um tom mais escuro de cinza.

Painel DOM
Painel DOM

Você pode mover o painel DOM e colocá-lo em qualquer local conveniente na interface de usuário. Também é possível encaixar o painel junto com outros painéis.

Como usar o painel DOM

  1. Abra o documento necessário e abra o painel DOM selecionando Janela > DOM.

  2. Alterne para Visualização dinâmica e clique no elemento que deseja inspecionar ou editar.

    • A marcação HTML do elemento selecionado é destacada no painel DOM. 
    • O seletor aplicado é destacado no CSS Designer.
    • O código relevante é destacado na Visualização de código.
    • A tag relevante é destacada (em azul) no Seletor de tags.

    Como alternativa, é possível selecionar um elemento HTML no painel DOM. Ao clicar em qualquer elemento no painel DOM:

    • A Visualização dinâmica rola até o elemento correspondente.
    • Se a Visualização de código estiver aberta, ela rola até o código correspondente ao elemento.
    • O CSS Designer (painel Seletores) rola até o seletor correspondente mais próximo (semelhante a você clicar no elemento na Visualização dinâmica).
    • A tag é destacada no Seletor de tags.

    Essa sincronização entre exibições diferentes e o CSS Designer permite visualizar a marcação e o estilo HTML associados ao elemento selecionado em um relance. 

  3. Continue a editar os elementos conforme necessário (edição de HTML ou CSS). Para obter informações sobre como usar o painel DOM para editar a marcação HTML, consulte Editar a estrutura HTML usando o painel DOM. Para obter informações sobre o CSS Designer, consulte Aplicar layout às páginas usando o CSS Designer.

Editar a estrutura HTML usando o painel DOM

O elemento atualmente selecionado na página é destacado no painel DOM. É possível navegar até qualquer nó ou elemento usando as teclas de seta.

  • Para selecionar um elemento ou um nó, clique no elemento ou no nó. Para expandir ou contrair um elemento ou um nó, clique na tag HTML ou clique duas vezes no seletor adjacente à tag.
  • Para duplicar um elemento ou um nó, clique com o botão direito do mouse no elemento ou no nó e em Duplicar. Quando você duplica um elemento com uma ID associada a ele, a ID é incrementada para o novo elemento (duplicata).
  • Para copiar um elemento ou um nó, clique duas vezes no elemento ou no nó e em Copiar. Se você copiou elementos-filho, eles também serão copiados.
  • Para colar um elemento ou um nó, clique no elemento ou no nó sob o qual você deseja aninhar os elementos copiados. Em seguida, clique com o botão direito do mouse no elemento ou no nó e em Colar. 
  • Para colar o elemento copiado como filho de um elemento ou nó específico, clique com o botão direito do mouse no elemento ou nó (pai) e clique em Colar como filho.
  • Para mover ou organizar elementos, arraste o elemento para o local desejado no painel DOM.

Uma linha verde será exibida para indicar onde o elemento arrastado será posicionado. Se você soltar o elemento sobre o elemento realçado em cinza (elemento de referência), o elemento que foi solto ficará posicionado como o primeiro filho do elemento de referência.

  • Para excluir um elemento ou um nó, clique com o botão direito do mouse no elemento ou no nó e em Excluir.

Você pode desfazer (Ctrl/Cmd + Z) ou refazer (Ctrl/Cmd + Y) as operações realizadas no painel DOM.

Atalhos do teclado:

  • Duplicar - Ctrl + D (Win)/ Cmd + D (Mac)
  • Excluir - Del ou Backspace
  • Copiar - Ctrl + C (Win)/Cmd + C (Mac)
  • Colar - Ctrl + V (Win)/Cmd + V (Mac)
  • Desfazer - Ctrl + Z (Win)/Cmd + Z (Mac)
  • Refazer - Ctrl + Y (Win)/Cmd + Y (Mac)

Para executar as operações de edição acima mencionadas em vários elementos, selecione vários elementos no painel DOM:

  • Clique com a tecla Shift pressionada sobre os elementos necessários para realizar uma seleção adjacente
  • Clique com a tecla Ctrl pressionada sobre os elementos necessários para realizar uma seleção não adjacente

Observação:

em geral, quando uma página é editada, o botão Atualizar na barra de ferramentas Documento se transforma no botão Parar, indicando que a página está sendo recarregada. Depois que a página é recarregada, o botão Atualizar é exibido novamente para indicar que a página está totalmente carregada.

Opções de edição no painel DOM
Opções de edição no painel DOM

Importante: se a página contiver JavaScript, o menu do botão direito do mouse no painel DOM será exibido por alguns instantes e depois se tornará indisponível. Para usar o menu do botão direito do mouse, oculte as exibições da Visualização dinâmica (Opções de visualização dinâmica > Ocultar telas Visualização dinâmica) e desative o JavaScript (Opções de visualização dinâmica > Desativar JavaScript).

Editar tags, classes e IDs no painel DOM

Você pode editar tags, classes e IDs clicando nelas duas vezes no painel DOM. Você também pode adicionar classes ou IDs adicionais separando-as com um espaço. Para tags que não estão associadas a uma classe ou ID, você pode digitar o nome da classe ou da ID após clicar duas vezes na tag.

As dicas de código aparecem quando você começa a digitar um nome de tag, classe ou ID. Para limitar as dicas às classes, comece a digitar com um ponto. Para exibir apenas as IDs nas dicas, comece a digitar com uma cerquilha (#).

Editar classes
Editar classes

Inserir elementos no painel DOM

Agora você pode inserir novos elementos na sua página da Web usando o painel DOM de uma das seguintes maneiras:

  • Pressione a barra de espaço ou clique no ícone de inserção adjacente ao elemento necessário no painel DOM. Na janela pop-up exibida, clique em uma das opções. Para delimitar vários elementos com uma tag, selecione os elementos necessários e escolha Colocar tag ao redor nas opções de inserção.
Uma tag div do alocador de espaço é inserida e exibida no modo de edição. Você pode digitar o nome da tag requerido no lugar da tag div.
Opções de inserção no painel DOM
Opções de inserção no painel DOM

  • No painel Inserir, clique no elemento necessário e arraste-o para o painel DOM. Os guias dinâmicos aparecem para indicar onde o elemento será inserido. Solte o elemento no local requerido.

Quando você insere tags usando o painel DOM, o texto padrão (alocador de espaço) e os atributos obrigatórios das tags também são inseridos:

  • Quando você insere qualquer uma das tags abaixo e confirma as alterações, o texto padrão é inserido nas Visualizações dinâmica, de código e de design:
    div, header, nav, aside, article, section, footer, h1-h6 e hgroup
  • Quando você insere uma tag table e confirma as alterações, uma tabela 3x3 é inserida.
  • Quando você insere uma tag embed ou img e confirma as alterações, a caixa de diálogo Selecionar arquivo é exibida e solicita que você selecione um arquivo apropriado.
  • Quando você insere uma meta tag e confirma as alterações, o seguinte código é adicionado à Visualização de código: <meta name="" content="">
  • Quando você insere uma tag figure e confirma as alterações, uma tag figure com figcaption aninhado é inserida.
  • Quando você insere uma tag ul ou uma tag ol e confirma as alterações, uma tag ol/ul com uma tag li aninhada é inserida.

Esta obra está licenciada sob uma licença não adaptada da Creative Commons Attribution-Noncommercial-Share Alike 3.0  As publicações do Twitter™ e do Facebook não são cobertas pelos termos do Creative Commons.

Avisos legais   |   Política de privacidade online