Pular para o conteúdo

DOM (Document Object Model)

Definição

OBS: esta página aborda DOM como é usado no Selenium WebDriver.

O DOM é uma interface que permite o acesso aos elementos HTML de uma página Web. Explicando melhor: o DOM é uma representação orientada a objetos em formato de árvore, onde cada nó é um elemento HTML.

Exemplo

Considere o seguinte código HTML:

<!DOCTYPE html>
<html>
<head>
<title>Cecilia Meireles</title>
<meta charset="UTF-8">
</head>
<body>
<h1 style="color:red">A Poetisa Cecilia Meireles</h1>
<h2>Motivos</h2>
<p>Eu canto porque o instante existe<br>
e a <span style="color:orange; font-weight: bold;">minha vida</span> está completa.<br>
Não sou alegre nem sou triste:<br>
sou <b>poeta</b>.</p>
<h2>Livros</h2>
<ul>
<li>Romanceiro da Inconfidência</li>
<li>Ou Isto ou  <span style="color:blue; font-weight: bold;">Aquilo</span></li>
<li>Antologia <b>Poética</b></li>
</ul>
</body>
</html>

A página mostrada pelo navegador pode ser vista abaixo.

A página possui 13 diferentes tipos de nós: 1 nó <html>, 1 nó <head>, 1 nó <title>, 1 nó <meta>, 1 nó <body>, 1 nó <h1>, 2 nós <h2>, 1 nó <p>, 3 nós <br>, 2 nós <span>, 2 nós <b>, 1 nó <ul> e 3 nós <li>. A estrutura com os nós da página HTML é apresentada abaixo. Note que o nó <body> é filho do nó <html>, é pai de 5 nós (1 nó <h1>, 2 nós <h2>, 1 nó <p> e 1 nó <ul>), tem 1 nó ascendente (<html>), 15 nós descendentes.e 1 nó irmão (<head>).

É importante fazer algumas observações:

  • O texto de um nó corresponde ao texto que o próprio nó possui mais os textos dos seus descendentes. Assim, o conteúdo de texto do nó <ul> corresponde ao texto dos três nós <li> e o conteúdo de texto do <body> corresponde ao conteúdo de toda a página;
  • Alguns nós, como <br>, não armazenam texto;
  • O Selenium WebDriver possui o método “tag_name” que informa o tipo do elemento HTML (ex: <p>, <span>, etc) e o método “text” que informa o texto do elemento HTML