diff options
Diffstat (limited to 'files/pt-br/web/api/node/isconnected/index.html')
-rw-r--r-- | files/pt-br/web/api/node/isconnected/index.html | 118 |
1 files changed, 118 insertions, 0 deletions
diff --git a/files/pt-br/web/api/node/isconnected/index.html b/files/pt-br/web/api/node/isconnected/index.html new file mode 100644 index 0000000000..52aee94508 --- /dev/null +++ b/files/pt-br/web/api/node/isconnected/index.html @@ -0,0 +1,118 @@ +--- +title: Node.isConnected +slug: Web/API/Node/isConnected +translation_of: Web/API/Node/isConnected +--- +<div>{{APIRef("DOM")}}</div> + +<p>A propriedade somente-leitura <strong><code>isConnected</code></strong> da interface {{domxref("Node")}} retorna um boleano indicando se um nó está conectado (direta ou indiretamente) ao contexto do objeto, por exemplo o objeto {{domxref("Document")}} no caso da DOM normal, ou o {{domxref("ShadowRoot")}} no caso de uma shadow DOM.</p> + +<h2 id="Sintaxe">Sintaxe</h2> + +<pre class="syntaxbox notranslate">var <em>isItConnected</em> = <em>nodeObjectInstance</em>.isConnected</pre> + +<h3 id="Retorno">Retorno</h3> + +<p>Um {{domxref("Boolean")}} que é <code>true</code> se o nó está conectado ao contexto relevante do objeto, e <code>false</code> se não está.</p> + +<h2 id="Examples">Examples</h2> + +<h3 id="Standard_DOM">Standard DOM</h3> + +<p>Um exemplo em um DOM padrão:</p> + +<pre class="brush: js notranslate">let test = document.createElement('p'); +console.log(test.isConnected); // Returns false +document.body.appendChild(test); +console.log(test.isConnected); // Returns true +</pre> + +<h3 id="Shadow_DOM">Shadow DOM</h3> + +<p>Um exemplo em um Shadow DOM:</p> + +<pre class="brush: js notranslate">// Cria um raíz Shadow +var shadow = this.attachShadow({mode: 'open'}); + +// Cria um CSS para aplicar a Shadow DOm +var style = document.createElement('style'); +console.log(style.isConnected); // retorna false + +style.textContent = ` +.wrapper { + position: relative; +} + +.info { + font-size: 0.8rem; + width: 200px; + display: inline-block; + border: 1px solid black; + padding: 10px; + background: white; + border-radius: 10px; + opacity: 0; + transition: 0.6s all; + positions: absolute; + bottom: 20px; + left: 10px; + z-index: 3 +} +`; + +// Anexa a estilização criada a Shadow DOM. + +shadow.appendChild(style); +console.log(style.isConnected); // retorna true</pre> + +<h2 id="Polyfill">Polyfill</h2> + +<p>Node.isConnected pode ser polyfilled com o seguinte código para IE10 e EdgeHTML:</p> + +<pre class="notranslate">/* + * Node.isConnected polyfill para IE and EdgeHTML + * 2020-02-04 + * + * Por Eli Grey, https://eligrey.com + * Domínio Público. + * NENHUMA GARANTIA É EXPRESSADA OU IMPLÍCITA. USE AO SEU PRÓPRIO RISCO. + */ + +if (!('isConnected' in Node.prototype)) { + Object.defineProperty(Node.prototype, 'isConnected', { + get() { + return ( + !this.ownerDocument || + !( + this.ownerDocument.compareDocumentPosition(this) & + this.DOCUMENT_POSITION_DISCONNECTED + ) + ); + }, + }); +}</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">Comentários</th> + </tr> + <tr> + <td>{{SpecName('DOM WHATWG','#dom-node-isconnected','isConnected')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>Definição Inicial.</td> + </tr> + </tbody> +</table> + +<h2 id="Compatibilidade_de_Browser">Compatibilidade de Browser</h2> + +<div> + + +<p>{{Compat("api.Node.isConnected")}}</p> +</div> |