--- title: Document.elementFromPoint() slug: Web/API/Document/elementFromPoint tags: - API - CSSOM View - Method - NeedsMarkupWork - NeedsMobileBrowserCompatibility - Reference translation_of: Web/API/DocumentOrShadowRoot/elementFromPoint translation_of_original: Web/API/Document/elementFromPoint original_slug: Web/API/DocumentOrShadowRoot/elementFromPoint --- <div>{{APIRef("DOM")}}</div> <p>O método <code><strong>elementFromPoint()</strong></code> da interface {{domxref("Document")}} retorna o elemento de maior nível nas coordenadas especificadas.</p> <p>Se o elemento no ponto especificado pertencer à outro documento (por exemplo, um subdocumento em um iframe), será retornado o pai do subdocumento (o próprio iframe). Se o elemento em determinado ponto for anônimo ou for um conteudo gerado por XBL, como por exemplo barras de scroll de caixas de texto, então será retornado o primeiro elemento pai, não-anônimo (por exemplo, a própria caixa de texto).</p> <p>Se o ponto especificado estiver fora dos limites visíveis do documento ou tiver uma coordenada negativa, o resultado é <code>null</code>.</p> <p>Se você precisa encontrar uma posição específica dentro do elemento, use {{domxref("Document.caretPositionFromPoint()")}}.</p> <p>{{Note("Chamados por documentos XUL devem esperar até o evento <code>onload</code> ser acionado antes de chamar este método.")}}</p> <h2 id="Syntax" name="Syntax">Sintaxe</h2> <pre class="syntaxbox">var element = document.elementFromPoint(x, y);</pre> <h3 id="Parâmetros">Parâmetros</h3> <dl> <dt>x</dt> <dd>Uma posição horizontal dentro do viewport atual.</dd> <dt>y</dt> <dd>Uma position vertical dentro do viewport atual.</dd> </dl> <h3 id="Valor_retornado">Valor retornado</h3> <p>O objeto de nível mais alto {{domxref("Element")}} dentro das coordenadas declaradas.</p> <h2 id="Example" name="Example">Exemplo</h2> <pre class="brush:html"><!DOCTYPE html> <html lang="en"> <head> <title>exemplo de elementFromPoint</title> <script> function changeColor(newColor) { elem = document.elementFromPoint(2, 2); elem.style.color = newColor; } </script> </head> <body> <p id="para1">Algum texto aqui</p> <button onclick="changeColor('blue');">azul</button> <button onclick="changeColor('red');">vermelho</button> </body> </html> </pre> <h2 id="Especificações">Especificações</h2> <table class="standard-table"> <tbody> <tr> <th scope="col">Especificação</th> <th scope="col">Status</th> <th scope="col">Comment</th> </tr> <tr> <td>{{SpecName('CSSOM View', '#dom-document-elementfrompoint', 'elementFromPoint')}}</td> <td>{{Spec2('CSSOM View')}}</td> <td>Definição Inicial.</td> </tr> </tbody> </table> <h2 id="Browser_compatibility">Compatibilidade com navegadores</h2> <p>{{CompatibilityTable}}</p> <div id="compat-desktop"> <table class="compat-table"> <tbody> <tr> <th>Funcionalidade</th> <th>Chrome</th> <th>Firefox (Gecko)</th> <th>Internet Explorer</th> <th>Opera</th> <th>Safari</th> </tr> <tr> <td>Basic support</td> <td> {{CompatChrome(4.0)}}</td> <td>3</td> <td>5.5</td> <td>10.50</td> <td>{{CompatVersionUnknown}}</td> </tr> </tbody> </table> </div> <div id="compat-mobile"> <table class="compat-table"> <tbody> <tr> <th>Funcionalidade</th> <th>Android</th> <th>Chrome para Android</th> <th>Firefox Mobile (Gecko)</th> <th>IE Mobile</th> <th>Opera Mobile</th> <th>Safari Mobile</th> </tr> <tr> <td>Basic support</td> <td>{{CompatUnknown}}</td> <td>{{CompatVersionUnknown}}</td> <td>{{CompatUnknown}}</td> <td>{{CompatUnknown}}</td> <td>{{CompatUnknown}}</td> <td>{{CompatUnknown}}</td> </tr> </tbody> </table> </div>