diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:42:52 -0500 |
| commit | 074785cea106179cb3305637055ab0a009ca74f2 (patch) | |
| tree | e6ae371cccd642aa2b67f39752a2cdf1fd4eb040 /files/pt-br/dom/referencia_do_dom | |
| parent | da78a9e329e272dedb2400b79a3bdeebff387d47 (diff) | |
| download | translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.gz translated-content-074785cea106179cb3305637055ab0a009ca74f2.tar.bz2 translated-content-074785cea106179cb3305637055ab0a009ca74f2.zip | |
initial commit
Diffstat (limited to 'files/pt-br/dom/referencia_do_dom')
6 files changed, 1460 insertions, 0 deletions
diff --git a/files/pt-br/dom/referencia_do_dom/events/index.html b/files/pt-br/dom/referencia_do_dom/events/index.html new file mode 100644 index 0000000000..4d04915450 --- /dev/null +++ b/files/pt-br/dom/referencia_do_dom/events/index.html @@ -0,0 +1,82 @@ +--- +title: Events and the DOM +slug: DOM/Referencia_do_DOM/Events +translation_of: Web/API/Document_Object_Model/Events +--- +<div>{{DefaultAPISidebar("DOM")}}</div> + +<h2 id="Introduction" name="Introduction">Introdução</h2> + +<p>Este capítulo descreve o Modelo de Eventos do DOM. A interface de <a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event" rel="noopener">Eventos</a> é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/API/EventTarget/addEventListener">event listeners</a>, e vários outros exemplos que mostram como diversas interfaces de evento se relacionam uma com a outraThere is an excellent diagram that clearly explains the three phases of event flow through the DOM in the <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture">DOM Level 3 Events draft</a>.</p> + +<p>Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em <a href="http://www.w3.org/TR/DOM-Level-3-Events/#dom-event-architecture" rel="noopener">DOM Level 3 Events draft</a>.</p> + +<h2 id="DOM_event_handler_List" name="DOM_event_handler_List">Registrando event listeners</h2> + +<p>Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.</p> + +<h3 id="EventTarget.addEventListener" name="EventTarget.addEventListener">{{domxref("EventTarget.addEventListener")}}</h3> + +<pre class="brush: js notranslate">// Assuming myButton is a button element +myButton.addEventListener('click', greet, false) +function greet(event){ + // print and have a look at the event object + // always print arguments in case of overlooking any other arguments + console.log('greet:', arguments) + alert('hello world') +} +</pre> + +<p>Este é o método que você deve usar em páginas web modernas.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Internet Explorer 6–8 não suportavam este método, oferecendo uma API {{domxref("EventTarget.attachEvent")}} parecida no lugar. Para compatibilidade cross-browser, use uma das muitas bibliotecas JavaScript disponíveis.</p> +</div> + +<p>Mais detalhes podem encontrada na página de referência {{domxref("EventTarget.addEventListener")}}.</p> + +<h3 id="HTML_attribute" name="HTML_attribute"><a href="/en-US/docs/Web/Guide/HTML/Event_attributes">atributo HTML</a></h3> + +<pre class="brush: html notranslate"><button onclick="alert('Hello world!')"> +</pre> + +<p>O código JavaScript no atributo é passado para o objeto Evento através do parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de uma maneira especial, descrita na especificação HTML.</a></p> + +<div class="blockIndicator warning"> +<p><strong>Cuidado:</strong> Este método deve ser evitado! Ele suja a marcação, e a faz menos legível. Preocupações com o conteúdo/estrutura e comportamento não são bem separadas, tornando mais díficil encontrar um bug.</p> +</div> + +<h3 id="DOM_element_properties" name="DOM_element_properties">DOM element properties</h3> + +<pre class="brush: js notranslate">// Supondo que myButton seja um elemento button +myButton.onclick = function(event){alert('Hello world')} +</pre> + +<p>A função pode ser definida para receber um parâmetro <code>event</code> . <a href="http://dev.w3.org/html5/spec/webappapis.html#the-event-handler-processing-algorithm">O valor return é tratado de maneira especial, descrita na especificação HTML.</a></p> + +<p>O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.</p> + +<h2 id="Acessando_interfaces_doEvento">Acessando interfaces doEvento</h2> + +<p>Manipulações do Evento podem ser atribuídas a vários objetos (incluindo elementos DOM, documentos, o {{domxref("window")}} object, etc.). Quando um evento ocorre, o objeto do evento é criado e passado sequencialmente ao event listeners.</p> + +<p>A interface {{domxref("Event")}} é acessível de dentro da função manipuladora, atrás do objeto evento passado como primeiro argumento. O seguinte exemplo simples mostra como um objeto evento é passado á função manipuladora do evento, e pode usado de dentro de tal função.</p> + +<pre class="brush: js notranslate">function print(evt) { + // the evt parameter is automatically assigned the event object + // take care of the differences between console.log & alert + console.log('print:', evt) + alert(evt) +} +// any function should have an appropriate name, that's what called semantic +table_el.onclick = print +</pre> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> diff --git a/files/pt-br/dom/referencia_do_dom/examples/index.html b/files/pt-br/dom/referencia_do_dom/examples/index.html new file mode 100644 index 0000000000..87ec3601e2 --- /dev/null +++ b/files/pt-br/dom/referencia_do_dom/examples/index.html @@ -0,0 +1,376 @@ +--- +title: Examples of web and XML development using the DOM +slug: DOM/Referencia_do_DOM/Examples +translation_of: Web/API/Document_Object_Model/Examples +--- +<p>Este capítulo fornece exemplos mais longos de desenvolvimento de Web e XML usando o DOM. Sempre que possível, os exemplos usam APIs, truques e padrões comuns no JavaScript para manipular o objeto de documento.</p> + +<h2 id="Example_1:_height_and_width" name="Example_1:_height_and_width">Exemplo 1: altura e largura</h2> + +<p>O exemplo a seguir mostra o uso das propriedades de altura e largura ao lado de imagens de dimensões variáveis:</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>width/height example</title> +<script> +function init() { + var arrImages = new Array(3); + + arrImages[0] = document.getElementById("image1"); + arrImages[1] = document.getElementById("image2"); + arrImages[2] = document.getElementById("image3"); + + var objOutput = document.getElementById("output"); + var strHtml = "<ul>"; + + for (var i = 0; i < arrImages.length; i++) { + strHtml += "<li>image" + (i+1) + + ": height=" + arrImages[i].height + + ", width=" + arrImages[i].width + + ", style.height=" + arrImages[i].style.height + + ", style.width=" + arrImages[i].style.width + + "<\/li>"; + } + + strHtml += "<\/ul>"; + + objOutput.innerHTML = strHtml; +} +</script> +</head> +<body onload="init();"> + +<p>Image 1: no height, width, or style + <img id="image1" src="http://www.mozilla.org/images/mozilla-banner.gif"> +</p> + +<p>Image 2: height="50", width="500", but no style + <img id="image2" + src="http://www.mozilla.org/images/mozilla-banner.gif" + height="50" width="500"> +</p> + +<p>Image 3: no height, width, but style="height: 50px; width: 500px;" + <img id="image3" + src="http://www.mozilla.org/images/mozilla-banner.gif" + style="height: 50px; width: 500px;"> +</p> + +<div id="output"> </div> +</body> +</html> +</pre> + +<h2 id="Example_2:_Image_Attributes" name="Example_2:_Image_Attributes">Exemplo 2: Atributos de Imagem</h2> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Modifying an image border</title> + +<script> +function setBorderWidth(width) { + document.getElementById("img1").style.borderWidth = width + "px"; +} +</script> +</head> + +<body> +<p> + <img id="img1" + src="image1.gif" + style="border: 5px solid green;" + width="100" height="100" alt="border test"> +</p> + +<form name="FormName"> + <input type="button" value="Make border 20px-wide" onclick="setBorderWidth(20);" /> + <input type="button" value="Make border 5px-wide" onclick="setBorderWidth(5);" /> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_3:_Manipulating_Styles" name="Example_3:_Manipulating_Styles">Exemplo 3: Manipulando Estilos</h2> + +<p>Neste exemplo simples, algumas propriedades de estilo básicas de um elemento de parágrafo HTML são acessadas usando o objeto de estilo no elemento e as propriedades de estilo CSS do objeto, que podem ser recuperadas e definidas a partir do DOM. Neste caso, você está manipulando os estilos individuais diretamente. No próximo exemplo (veja Exemplo 4), você pode usar folhas de estilo e suas regras para alterar estilos para documentos inteiros.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Changing color and font-size example</title> + +<script> +function changeText() { + var p = document.getElementById("pid"); + + p.style.color = "blue" + p.style.fontSize = "18pt" +} +</script> +</head> +<body> + +<p id="pid" onclick="window.location.href = 'http://www.cnn.com/';">linker</p> + +<form> + <p><input value="rec" type="button" onclick="changeText();" /></p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_4:_Using_Stylesheets" name="Example_4:_Using_Stylesheets">Exemplo 4: Usando folhas de estilo</h2> + +<p>A propriedade styleSheets no objeto de documento retorna uma lista das folhas de estilo que foram carregadas nesse documento. Você pode acessar essas folhas de estilo e suas regras individualmente usando os objetos stylesheet, style e CSSRule, como demonstrado neste exemplo, que imprime todos os seletores de regras de estilo para o console.</p> + +<pre class="brush:js">var ss = document.styleSheets; + +for(var i = 0; i < ss.length; i++) { + for(var j = 0; j < ss[i].cssRules.length; j++) { + dump( ss[i].cssRules[j].selectorText + "\n" ); + } +}</pre> + +<p>Para um documento com uma única folha de estilo na qual as três regras a seguir são definidas:</p> + +<pre class="brush:css">body { background-color: darkblue; } +p { font-face: Arial; font-size: 10pt; margin-left: .125in; } +#lumpy { display: none; } +</pre> + +<p>Este script produz o seguinte:</p> + +<pre>BODY +P +#LUMPY +</pre> + +<h2 id="Example_5:_Event_Propagation" name="Example_5:_Event_Propagation"> </h2> + +<h2 id="Example_5:_Event_Propagation" name="Example_5:_Event_Propagation">Exemplo 5: Propagação de Eventos</h2> + +<p>Este exemplo demonstra como eventos disparar e são tratados no DOM de uma forma muito simples. Quando o corpo deste documento HTML é carregado, um ouvinte de evento é registrado com a linha superior da tabela. O ouvinte de eventos processa o evento executando a função stopEvent, que altera o valor na célula inferior da tabela.</p> + +<p>No entanto, stopEvent também chama um método de objeto de evento, {{domxref ("event.stopPropagation")}}, que mantém o evento de borbulhar mais para cima no DOM. Observe que a própria tabela possui um manipulador de eventos {{domxref ("element.onclick", "onclick")}} que deve exibir uma mensagem quando a tabela é clicada. Mas o método stopEvent interrompeu a propagação e, portanto, após a atualização dos dados na tabela, a fase de evento é efetivamente encerrada e uma caixa de alerta é exibida para confirmar isso.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<title>Event Propagation</title> + +<style> +#t-daddy { border: 1px solid red } +#c1 { background-color: pink; } +</style> + +<script> +function stopEvent(ev) { + c2 = document.getElementById("c2"); + c2.innerHTML = "hello"; + + // this ought to keep t-daddy from getting the click. + ev.stopPropagation(); + alert("event propagation halted."); +} + +function load() { + elem = document.getElementById("tbl1"); + elem.addEventListener("click", stopEvent, false); +} +</script> +</head> + +<body onload="load();"> + +<table id="t-daddy" onclick="alert('hi');"> + <tr id="tbl1"> + <td id="c1">one</td> + </tr> + <tr> + <td id="c2">two</td> + </tr> +</table> + +</body> +</html> +</pre> + +<h2 id="Example_6:_getComputedStyle" name="Example_6:_getComputedStyle">Exemplo 6: getComputedStyle</h2> + +<p>Este exemplo demonstra como o método {{domxref ("window.getComputedStyle")}} pode ser usado para obter os estilos de um elemento que não são definidos usando o atributo de estilo ou com JavaScript (por exemplo, elt.style.backgroundColor = "rgb (173, 216, 230) "). Estes últimos tipos de estilos podem ser recuperados com a propriedade {{domxref ("element.style", "elt.style")}} mais direta, cujas propriedades estão listadas na <a href="https://developer.mozilla.org/pt-BR/docs/Web/CSS/CSS_Reference">Lista de Propriedades do DOM CSS</a>.</p> + +<p>GetComputedStyle() retorna um objeto ComputedCSSStyleDeclaration, cujas propriedades de estilo individuais podem ser referenciadas com o método getPropertyValue() desse objeto, como mostra o seguinte exemplo de documento.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> + +<title>getComputedStyle example</title> + +<script> +function cStyles() { + var RefDiv = document.getElementById("d1"); + var txtHeight = document.getElementById("t1"); + var h_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("height"); + + txtHeight.value = h_style; + + var txtWidth = document.getElementById("t2"); + var w_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("width"); + + txtWidth.value = w_style; + + var txtBackgroundColor = document.getElementById("t3"); + var b_style = document.defaultView.getComputedStyle(RefDiv, null).getPropertyValue("background-color"); + + txtBackgroundColor.value = b_style; +} +</script> + +<style> +#d1 { + margin-left: 10px; + background-color: rgb(173, 216, 230); + height: 20px; + max-width: 20px; +} +</style> + +</head> + +<body> + +<div id="d1">&nbsp;</div> + +<form action=""> + <p> + <button type="button" onclick="cStyles();">getComputedStyle</button> + height<input id="t1" type="text" value="1" /> + max-width<input id="t2" type="text" value="2" /> + bg-color<input id="t3" type="text" value="3" /> + </p> +</form> + +</body> +</html> +</pre> + +<h2 id="Example_7:_Displaying_Event_Object_Properties" name="Example_7:_Displaying_Event_Object_Properties">Exemplo 7: Exibindo Propriedades de Evento do Objeto</h2> + +<p>Este exemplo usa métodos DOM para exibir todas as propriedades do objeto {{domxref ("window.onload")}} {{domxref ("evento")}} e seus valores em uma tabela. Ele também mostra uma técnica útil de usar um laço para iterar sobre as propriedades de um objeto para obter seus valores.</p> + +<p>As propriedades dos objetos de evento diferem muito entre os navegadores, o <a href="https://dom.spec.whatwg.org">WHATWG DOM Standard</a> lista as propriedades padrão, porém muitos navegadores estenderam muito esses valores.</p> + +<p>Coloque o seguinte código em um arquivo de texto em branco e carregue-o em uma variedade de navegadores, você ficará surpreso com o número diferente e nomes de propriedades. Você também pode querer adicionar alguns elementos na página e chamar essa função de manipuladores de eventos diferentes.</p> + +<pre class="brush:html"><!DOCTYPE html> +<html lang="en"> +<head> +<meta charset="utf-8"/> +<title>Show Event properties</title> + +<style> +table { border-collapse: collapse; } +thead { font-weight: bold; } +td { padding: 2px 10px 2px 10px; } + +.odd { background-color: #efdfef; } +.even { background-color: #ffffff; } +</style> + +<script> + +function showEventProperties(e) { + function addCell(row, text) { + var cell = row.insertCell(-1); + cell.appendChild(document.createTextNode(text)); + } + + var e = e || window.event; + document.getElementById('eventType').innerHTML = e.type; + + var table = document.createElement('table'); + var thead = table.createTHead(); + var row = thead.insertRow(-1); + var lableList = ['#', 'Property', 'Value']; + var len = lableList.length; + + for (var i=0; i<len; i++) { + addCell(row, lableList[i]); + } + + var tbody = document.createElement('tbody'); + table.appendChild(tbody); + + for (var p in e) { + row = tbody.insertRow(-1); + row.className = (row.rowIndex % 2)? 'odd':'even'; + addCell(row, row.rowIndex); + addCell(row, p); + addCell(row, e[p]); + } + + document.body.appendChild(table); +} + +window.onload = function(event){ + showEventProperties(event); +} +</script> +</head> + +<body> +<h1>Properties of the DOM <span id="eventType"></span> Event Object</h1> +</body> + +</html> +</pre> + +<h2 id="Example_8:_Using_the_DOM_Table_Interface" name="Example_8:_Using_the_DOM_Table_Interface">Exemplo 8: Usando a interface de tabela do DOM</h2> + +<p>A interface DOM HTMLTableElement fornece alguns métodos de conveniência para criar e manipular tabelas. Dois métodos usados com freqüência são {{domxref ("HTMLTableElement.insertRow")}} e {{domxref ("tableRow.insertCell")}}.</p> + +<p>Para adicionar uma linha e algumas células a uma tabela existente:</p> + +<pre class="brush:html"><table id="table0"> + <tr> + <td>Row 0 Cell 0</td> + <td>Row 0 Cell 1</td> + </tr> +</table> + +<script> +var table = document.getElementById('table0'); +var row = table.insertRow(-1); +var cell, + text; + +for (var i = 0; i < 2; i++) { + cell = row.insertCell(-1); + text = 'Row ' + row.rowIndex + ' Cell ' + i; + cell.appendChild(document.createTextNode(text)); +} +</script> +</pre> + +<h3 id="Notes" name="Notes"><br> + Notas</h3> + +<ul> + <li>A propriedade {{domxref ("element.innerHTML", "innerHTML")}} de uma tabela nunca deve ser usada para modificar uma tabela, embora você possa usá-la para escrever uma tabela inteira ou o conteúdo de uma célula.</li> + <li>Se os métodos DOM Core {{domxref ("document.createElement")}} e {{domxref ("Node.appendChild")}} são usados para criar linhas e células, o IE requer que eles sejam anexados a um elemento tbody, enquanto outros Os navegadores permitirão acrescentar a um elemento da tabela (as linhas serão adicionadas ao último elemento tbody).</li> + <li>Há uma série de outros métodos convenientes pertencentes à<a href="/en-US/docs/"> tabela de interface</a> que podem ser usados para criar e modificar tabelas.</li> +</ul> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> diff --git a/files/pt-br/dom/referencia_do_dom/how_to_create_a_dom_tree/index.html b/files/pt-br/dom/referencia_do_dom/how_to_create_a_dom_tree/index.html new file mode 100644 index 0000000000..e6dd923fb5 --- /dev/null +++ b/files/pt-br/dom/referencia_do_dom/how_to_create_a_dom_tree/index.html @@ -0,0 +1,145 @@ +--- +title: How to create a DOM tree +slug: DOM/Referencia_do_DOM/How_to_create_a_DOM_tree +translation_of: Web/API/Document_object_model/How_to_create_a_DOM_tree +--- +<p>{{draft}}</p> + +<p>Esta página descreve como usar <a class="external" href="http://www.w3.org/TR/DOM-Level-3-Core/core.html">DOM Core</a> API DOM em JavaScript para criar e modificar objetos do DOM. Aplica-se a todas as aplicações baseadas em Gecko (como o Firefox), tanto em código privilegiado (extensões) como em código não privilegiado (páginas web)</p> + +<h3 id="Dynamically_creating_a_DOM_tree" name="Dynamically_creating_a_DOM_tree">Criando uma árvore DOM dinamicamente</h3> + +<p>Considere o seguinte documento XML:</p> + +<pre class="brush: xml"><?xml version="1.0"?> +<people> + <person first-name="eric" middle-initial="H" last-name="jung"> + <address street="321 south st" city="denver" state="co" country="usa"/> + <address street="123 main st" city="arlington" state="ma" country="usa"/> + </person> + + <person first-name="jed" last-name="brown"> + <address street="321 north st" city="atlanta" state="ga" country="usa"/> + <address street="123 west st" city="seattle" state="wa" country="usa"/> + <address street="321 south avenue" city="denver" state="co" country="usa"/> + </person> +</people> +</pre> + +<p>A W3C DOM API, suportada pelo Mozilla, pode ser usada para criar uma representação na memória deste documento, da seguinte forma:</p> + +<pre class="brush: js">var doc = document.implementation.createDocument("", "", null); +var peopleElem = doc.createElement("people"); + +var personElem1 = doc.createElement("person"); +personElem1.setAttribute("first-name", "eric"); +personElem1.setAttribute("middle-initial", "h"); +personElem1.setAttribute("last-name", "jung"); + +var addressElem1 = doc.createElement("address"); +addressElem1.setAttribute("street", "321 south st"); +addressElem1.setAttribute("city", "denver"); +addressElem1.setAttribute("state", "co"); +addressElem1.setAttribute("country", "usa"); +personElem1.appendChild(addressElem1); + +var addressElem2 = doc.createElement("address"); +addressElem2.setAttribute("street", "123 main st"); +addressElem2.setAttribute("city", "arlington"); +addressElem2.setAttribute("state", "ma"); +addressElem2.setAttribute("country", "usa"); +personElem1.appendChild(addressElem2); + +var personElem2 = doc.createElement("person"); +personElem2.setAttribute("first-name", "jed"); +personElem2.setAttribute("last-name", "brown"); + +var addressElem3 = doc.createElement("address"); +addressElem3.setAttribute("street", "321 north st"); +addressElem3.setAttribute("city", "atlanta"); +addressElem3.setAttribute("state", "ga"); +addressElem3.setAttribute("country", "usa"); +personElem2.appendChild(addressElem3); + +var addressElem4 = doc.createElement("address"); +addressElem4.setAttribute("street", "123 west st"); +addressElem4.setAttribute("city", "seattle"); +addressElem4.setAttribute("state", "wa"); +addressElem4.setAttribute("country", "usa"); +personElem2.appendChild(addressElem4); + +var addressElem5 = doc.createElement("address"); +addressElem5.setAttribute("street", "321 south avenue"); +addressElem5.setAttribute("city", "denver"); +addressElem5.setAttribute("state", "co"); +addressElem5.setAttribute("country", "usa"); +personElem2.appendChild(addressElem5); + +peopleElem.appendChild(personElem1); +peopleElem.appendChild(personElem2); +doc.appendChild(peopleElem); +</pre> + +<p>Veja também o capítulo <a href="/en/XUL_Tutorial/Document_Object_Model" title="en/XUL_Tutorial/Document_Object_Model">DOM chapter of the XUL Tutorial</a>.</p> + +<p>Você pode automatizar a criação de uma árvore DOM usando um <a href="/en/JXON#JXON_reverse_algorithms">algoritmo reverso JXON</a> em associação com a seguinte representação JSON:</p> + +<pre class="brush: js">{ + "people": { + "person": [{ + "address": [{ + "@street": "321 south st", + "@city": "denver", + "@state": "co", + "@country": "usa" + }, { + "@street": "123 main st", + "@city": "arlington", + "@state": "ma", + "@country": "usa" + }], + "@first-name": "eric", + "@middle-initial": "H", + "@last-name": "jung" + }, { + "address": [{ + "@street": "321 north st", + "@city": "atlanta", + "@state": "ga", + "@country": "usa" + }, { + "@street": "123 west st", + "@city": "seattle", + "@state": "wa", + "@country": "usa" + }, { + "@street": "321 south avenue", + "@city": "denver", + "@state": "co", + "@country": "usa" + }], + "@first-name": "jed", + "@last-name": "brown" + }] + } +} +</pre> + +<h3 id="So_what.3F" name="So_what.3F">E daí?</h3> + +<p>As árvores DOM podem ser consultadas <a href="/en/Using_XPath">usando expressões XPath</a>, convertidas em strings ou gravadas em arquivos locais ou remotos usando <a href="/en/Parsing_and_serializing_XML">XMLSerializer</a> (sem ter que primeiro converter para uma string), <a href="/en/DOM/XMLHttpRequest">POSTed para um servidor web</a> (via XMLHttpRequest), transformado usando <a href="/en/XSLT" title="en/XSLT">XSLT</a>, <a href="/en/XLink" title="en/XLink">XLink</a>, convertido para um objeto JavaScript através de um <a href="/en/JXON">algoritmo JXON</a>, etc.</p> + +<p>Você pode usar árvores DOM para modelar dados que não são adequados para RDF (ou talvez você simplesmente não goste de RDF). Outra aplicação é que, uma vez que XUL é XML, a UI de sua aplicação pode ser manipulada, baixada, carregada, salva, carregada, convertida ou transformada de forma bastante fácil.</p> + +<h2 id="Veja_também">Veja também</h2> + +<ul> + <li><a class="internal" href="/en/XML" title="en/XML">XML</a></li> + <li><a class="internal" href="/en/JXON" title="en/JXON">JXON</a></li> + <li><a class="internal" href="/en/XPath" title="en/XPath">XPath</a></li> + <li><a class="internal" href="/en/E4X" title="en/E4X">E4X (ECMAScript for XML)</a></li> + <li><a class="internal" href="/en/Parsing_and_serializing_XML" title="en/Parsing_and_serializing_XML">Parsing and serializing XML</a></li> + <li><a class="internal" href="/en/DOM/XMLHttpRequest" title="en/XMLHttpRequest">XMLHttpRequest</a></li> +</ul> + +<p>{{ languages( { "fr": "fr/Comment_cr\u00e9er_un_arbre_DOM", "ja": "ja/How_to_create_a_DOM_tree", "zh-cn": "zh-cn/How_to_create_a_DOM_tree" } ) }}</p> diff --git a/files/pt-br/dom/referencia_do_dom/index.html b/files/pt-br/dom/referencia_do_dom/index.html new file mode 100644 index 0000000000..b0ae4420a6 --- /dev/null +++ b/files/pt-br/dom/referencia_do_dom/index.html @@ -0,0 +1,379 @@ +--- +title: Modelo de Objeto de Documento (DOM) +slug: DOM/Referencia_do_DOM +translation_of: Web/API/Document_Object_Model +--- +<p>{{DefaultAPISidebar("DOM")}}</p> + +<p>O <strong>Modelo de Objeto de Documento (<em>DOM</em>)</strong> é uma interface de programação para documentos HTML, XML e SVG . Ele fornece uma representação estruturada do documento como uma árvore. O DOM define métodos que permitem acesso à árvore, para que eles possam alterar a estrutura, estilo e conteúdo do documento. O DOM fornece uma representação do documento como um grupo estruturado de nós e objetos, possuindo várias propriedades e métodos. Os nós também podem ter manipuladores de eventos que lhe são inerentes, e uma vez que um evento é acionado, os manipuladores de eventos são executados. Essencialmente, ele conecta páginas web a scripts ou linguagens de programação.</p> + +<p>Embora o DOM seja frequentemente acessado usando JavaScript, não é uma parte da linguagem JavaScript. Ele também pode ser acessado por outras linguagens.</p> + +<p>Uma <a href="/en-US/docs/DOM/DOM_Reference/Introduction">introdução</a> ao DOM está disponível.</p> + +<h2 id="DOM_interfaces">DOM interfaces</h2> + +<div class="index"> +<ul> + <li>{{domxref("Attr")}}</li> + <li>{{domxref("CharacterData")}}</li> + <li>{{domxref("ChildNode")}} {{experimental_inline}}</li> + <li>{{domxref("Comment")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("Document")}}</li> + <li>{{domxref("DocumentFragment")}}</li> + <li>{{domxref("DocumentType")}}</li> + <li>{{domxref("DOMError")}}</li> + <li>{{domxref("DOMException")}}</li> + <li>{{domxref("DOMImplementation")}}</li> + <li>{{domxref("DOMString")}}</li> + <li>{{domxref("DOMTimeStamp")}}</li> + <li>{{domxref("DOMSettableTokenList")}}</li> + <li>{{domxref("DOMStringList")}}</li> + <li>{{domxref("DOMTokenList")}}</li> + <li>{{domxref("Element")}}</li> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget")}}</li> + <li>{{domxref("HTMLCollection")}}</li> + <li>{{domxref("MutationObserver")}}</li> + <li>{{domxref("MutationRecord")}}</li> + <li>{{domxref("Node")}}</li> + <li>{{domxref("NodeFilter")}}</li> + <li>{{domxref("NodeIterator")}}</li> + <li>{{domxref("NodeList")}}</li> + <li>{{domxref("ParentNode")}} {{experimental_inline}}</li> + <li>{{domxref("ProcessingInstruction")}}</li> + <li>{{domxref("Range")}}</li> + <li>{{domxref("Text")}}</li> + <li>{{domxref("TreeWalker")}}</li> + <li>{{domxref("URL")}}</li> + <li>{{domxref("Window")}}</li> + <li>{{domxref("Worker")}}</li> + <li>{{domxref("XMLDocument")}} {{experimental_inline}}</li> +</ul> +</div> + +<h2 id="Interfaces_DOM_obsoletas">Interfaces DOM obsoletas</h2> + +<p>O Modelo de Objeto de Documento foi altamente simplificado. Para conseguir isso, as seguintes interfaces presentes na especificação DOM nível 3 ou especificação anterior foi removida. Ainda não está muito claro se alguns podem ser reintroduzidos ou não, mas por enquanto eles têm que ser considerados obsoletos e devem ser evitados:</p> + +<div class="index"> +<ul> + <li>{{domxref("CDATASection")}}</li> + <li>{{domxref("DOMConfiguration")}}</li> + <li>{{domxref("DOMErrorHandler")}}</li> + <li>{{domxref("DOMImplementationList")}}</li> + <li>{{domxref("DOMImplementationRegistry")}}</li> + <li>{{domxref("DOMImplementationSource")}}</li> + <li>{{domxref("DOMLocator")}}</li> + <li>{{domxref("DOMObject")}}</li> + <li>{{domxref("DOMUserData")}}</li> + <li>{{domxref("Entity")}}</li> + <li>{{domxref("EntityReference")}}</li> + <li>{{domxref("NamedNodeMap")}}</li> + <li>{{domxref("NameList")}}</li> + <li>{{domxref("Notation")}}</li> + <li>{{domxref("TypeInfo")}}</li> + <li>{{domxref("UserDataHandler")}}</li> + <li></li> +</ul> +</div> + +<h2 id="Interfaces_HTML">Interfaces HTML</h2> + +<p>Um documento contendo HTML é descrito usando o {{domxref("HTMLDocument")}} interface. Nota-se que a especificação HTML também se extende a {{domxref("Document")}} interface.</p> + +<p>Um objeto <code>HTMLDocument</code> também da acesso á vários recursos de navegadores como a aba ou janela, em que uma página é desenhada usando {{domxref("Window")}} interface, o {{domxref("window.style", "Style")}} associado a ele (normalmente CSS), a história do navegador relativa ao contexto, {{domxref("window.history", "History")}}. Eventualmente, {{domxref("Selection")}} é feito no documento.</p> + +<h3 id="HTML_elemento_interfaces">HTML elemento interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLAnchorElement")}}</li> + <li>{{domxref("HTMLAppletElement")}}</li> + <li>{{domxref("HTMLAreaElement")}}</li> + <li>{{domxref("HTMLAudioElement")}}</li> + <li>{{domxref("HTMLBaseElement")}}</li> + <li>{{domxref("HTMLBodyElement")}}</li> + <li>{{domxref("HTMLBRElement")}}</li> + <li>{{domxref("HTMLButtonElement")}}</li> + <li>{{domxref("HTMLCanvasElement")}}</li> + <li>{{domxref("HTMLDataElement")}}</li> + <li>{{domxref("HTMLDataListElement")}}</li> + <li>{{domxref("HTMLDialogElement")}}</li> + <li>{{domxref("HTMLDirectoryElement")}}</li> + <li>{{domxref("HTMLDivElement")}}</li> + <li>{{domxref("HTMLDListElement")}}</li> + <li>{{domxref("HTMLElement")}}</li> + <li>{{domxref("HTMLEmbedElement")}}</li> + <li>{{domxref("HTMLFieldSetElement")}}</li> + <li>{{domxref("HTMLFontElement")}}</li> + <li>{{domxref("HTMLFormElement")}}</li> + <li>{{domxref("HTMLFrameElement")}}</li> + <li>{{domxref("HTMLFrameSetElement")}}</li> + <li>{{domxref("HTMLHeadElement")}}</li> + <li>{{domxref("HTMLHeadingElement")}}</li> + <li>{{domxref("HTMLHtmlElement")}}</li> + <li>{{domxref("HTMLHRElement")}}</li> + <li>{{domxref("HTMLIFrameElement")}}</li> + <li>{{domxref("HTMLImageElement")}}</li> + <li>{{domxref("HTMLInputElement")}}</li> + <li>{{domxref("HTMLKeygenElement")}}</li> + <li>{{domxref("HTMLLabelElement")}}</li> + <li>{{domxref("HTMLLegendElement")}}</li> + <li>{{domxref("HTMLLIElement")}}</li> + <li>{{domxref("HTMLLinkElement")}}</li> + <li>{{domxref("HTMLMapElement")}}</li> + <li>{{domxref("HTMLMediaElement")}}</li> + <li>{{domxref("HTMLMenuElement")}}</li> + <li>{{domxref("HTMLMetaElement")}}</li> + <li>{{domxref("HTMLMeterElement")}}</li> + <li>{{domxref("HTMLModElement")}}</li> + <li>{{domxref("HTMLObjectElement")}}</li> + <li>{{domxref("HTMLOListElement")}}</li> + <li>{{domxref("HTMLOptGroupElement")}}</li> + <li>{{domxref("HTMLOptionElement")}}</li> + <li>{{domxref("HTMLOutputElement")}}</li> + <li>{{domxref("HTMLParagraphElement")}}</li> + <li>{{domxref("HTMLParamElement")}}</li> + <li>{{domxref("HTMLPreElement")}}</li> + <li>{{domxref("HTMLProgressElement")}}</li> + <li>{{domxref("HTMLQuoteElement")}}</li> + <li>{{domxref("HTMLScriptElement")}}</li> + <li>{{domxref("HTMLSelectElement")}}</li> + <li>{{domxref("HTMLSourceElement")}}</li> + <li>{{domxref("HTMLSpanElement")}}</li> + <li>{{domxref("HTMLStyleElement")}}</li> + <li>{{domxref("HTMLTableElement")}}</li> + <li>{{domxref("HTMLTableCaptionElement")}}</li> + <li>{{domxref("HTMLTableCellElement")}}</li> + <li>{{domxref("HTMLTableDataCellElement")}}</li> + <li>{{domxref("HTMLTableHeaderCellElement")}}</li> + <li>{{domxref("HTMLTableColElement")}}</li> + <li>{{domxref("HTMLTableRowElement")}}</li> + <li>{{domxref("HTMLTableSectionElement")}}</li> + <li>{{domxref("HTMLTextAreaElement")}}</li> + <li>{{domxref("HTMLTimeElement")}}</li> + <li>{{domxref("HTMLTitleElement")}}</li> + <li>{{domxref("HTMLTrackElement")}}</li> + <li>{{domxref("HTMLUListElement")}}</li> + <li>{{domxref("HTMLUnknownElement")}}</li> + <li>{{domxref("HTMLVideoElement")}}</li> +</ul> +</div> + +<h3 id="Outras_interfaces">Outras interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("CanvasRenderingContext2D")}}</li> + <li>{{domxref("CanvasGradient")}}</li> + <li>{{domxref("CanvasPattern")}}</li> + <li>{{domxref("TextMetrics")}}</li> + <li>{{domxref("ImageData")}}</li> + <li>{{domxref("CanvasPixelArray")}}</li> + <li>{{domxref("NotifyAudioAvailableEvent")}}</li> + <li>{{domxref("HTMLAllCollection")}}</li> + <li>{{domxref("HTMLFormControlsCollection")}}</li> + <li>{{domxref("HTMLOptionsCollection")}}</li> + <li>{{domxref("HTMLPropertiesCollection")}}</li> + <li>{{domxref("DOMStringMap")}}</li> + <li>{{domxref("RadioNodeList")}}</li> + <li>{{domxref("MediaError")}}</li> +</ul> +</div> + +<h3 id="Obsoleto_HTML_interfaces">Obsoleto HTML interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("HTMLBaseFontElement")}}</li> + <li>{{domxref("HTMLIsIndexElement")}}</li> +</ul> +</div> + +<h2 id="SVG_interfaces">SVG interfaces</h2> + +<h3 id="SVG_elemento_interfaces">SVG elemento interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAElement")}}</li> + <li>{{domxref("SVGAltGlyphElement")}}</li> + <li>{{domxref("SVGAltGlyphDefElement")}}</li> + <li>{{domxref("SVGAltGlyphItemElement")}}</li> + <li>{{domxref("SVGAnimationElement")}}</li> + <li>{{domxref("SVGAnimateElement")}}</li> + <li>{{domxref("SVGAnimateColorElement")}}</li> + <li>{{domxref("SVGAnimateMotionElement")}}</li> + <li>{{domxref("SVGAnimateTransformElement")}}</li> + <li>{{domxref("SVGCircleElement")}}</li> + <li>{{domxref("SVGClipPathElement")}}</li> + <li>{{domxref("SVGColorProfileElement")}}</li> + <li>{{domxref("SVGComponentTransferFunctionElement")}}</li> + <li>{{domxref("SVGCursorElement")}}</li> + <li>{{domxref("SVGDefsElement")}}</li> + <li>{{domxref("SVGDescElement")}}</li> + <li>{{domxref("SVGElement")}}</li> + <li>{{domxref("SVGEllipseElement")}}</li> + <li>{{domxref("SVGFEBlendElement")}}</li> + <li>{{domxref("SVGFEColorMatrixElement")}}</li> + <li>{{domxref("SVGFEComponentTransferElement")}}</li> + <li>{{domxref("SVGFECompositeElement")}}</li> + <li>{{domxref("SVGFEConvolveMatrixElement")}}</li> + <li>{{domxref("SVGFEDiffuseLightingElement")}}</li> + <li>{{domxref("SVGFEDisplacementMapElement")}}</li> + <li>{{domxref("SVGFEDistantLightElement")}}</li> + <li>{{domxref("SVGFEFloodElement")}}</li> + <li>{{domxref("SVGFEGaussianBlurElement")}}</li> + <li>{{domxref("SVGFEImageElement")}}</li> + <li>{{domxref("SVGFEMergeElement")}}</li> + <li>{{domxref("SVGFEMergeNodeElement")}}</li> + <li>{{domxref("SVGFEMorphologyElement")}}</li> + <li>{{domxref("SVGFEOffsetElement")}}</li> + <li>{{domxref("SVGFEPointLightElement")}}</li> + <li>{{domxref("SVGFESpecularLightingElement")}}</li> + <li>{{domxref("SVGFESpotLightElement")}}</li> + <li>{{domxref("SVGFETileElement")}}</li> + <li>{{domxref("SVGFETurbulenceElement")}}</li> + <li>{{domxref("SVGFEFuncRElement")}}</li> + <li>{{domxref("SVGFEFuncGElement")}}</li> + <li>{{domxref("SVGFEFuncBElement")}}</li> + <li>{{domxref("SVGFEFuncAElement")}}</li> + <li>{{domxref("SVGFilterElement")}}</li> + <li>{{domxref("SVGFilterPrimitiveStandardAttributes")}}</li> + <li>{{domxref("SVGFontElement")}}</li> + <li>{{domxref("SVGFontFaceElement")}}</li> + <li>{{domxref("SVGFontFaceFormatElement")}}</li> + <li>{{domxref("SVGFontFaceNameElement")}}</li> + <li>{{domxref("SVGFontFaceSrcElement")}}</li> + <li>{{domxref("SVGFontFaceUriElement")}}</li> + <li>{{domxref("SVGForeignObjectElement")}}</li> + <li>{{domxref("SVGGElement")}}</li> + <li>{{domxref("SVGGlyphElement")}}</li> + <li>{{domxref("SVGGlyphRefElement")}}</li> + <li>{{domxref("SVGGradientElement")}}</li> + <li>{{domxref("SVGHKernElement")}}</li> + <li>{{domxref("SVGImageElement")}}</li> + <li>{{domxref("SVGLinearGradientElement")}}</li> + <li>{{domxref("SVGLineElement")}}</li> + <li>{{domxref("SVGMarkerElement")}}</li> + <li>{{domxref("SVGMaskElement")}}</li> + <li>{{domxref("SVGMetadataElement")}}</li> + <li>{{domxref("SVGMissingGlyphElement")}}</li> + <li>{{domxref("SVGMPathElement")}}</li> + <li>{{domxref("SVGPathElement")}}</li> + <li>{{domxref("SVGPatternElement")}}</li> + <li>{{domxref("SVGPolylineElement")}}</li> + <li>{{domxref("SVGPolygonElement")}}</li> + <li>{{domxref("SVGRadialGradientElement")}}</li> + <li>{{domxref("SVGRectElement")}}</li> + <li>{{domxref("SVGScriptElement")}}</li> + <li>{{domxref("SVGSetElement")}}</li> + <li>{{domxref("SVGStopElement")}}</li> + <li>{{domxref("SVGStyleElement")}}</li> + <li>{{domxref("SVGSVGElement")}}</li> + <li>{{domxref("SVGSwitchElement")}}</li> + <li>{{domxref("SVGSymbolElement")}}</li> + <li>{{domxref("SVGTextElement")}}</li> + <li>{{domxref("SVGTextPathElement")}}</li> + <li>{{domxref("SVGTitleElement")}}</li> + <li>{{domxref("SVGTRefElement")}}</li> + <li>{{domxref("SVGTSpanElement")}}</li> + <li>{{domxref("SVGUseElement")}}</li> + <li>{{domxref("SVGViewElement")}}</li> + <li>{{domxref("SVGVKernElement")}}</li> +</ul> +</div> + +<h3 id="SVG_data_type_interfaces">SVG data type interfaces</h3> + +<p>Aqui estão a DOM API para tipos de dados utilizados nas definições de propriedades SVG e atributos.</p> + +<div class="note"> +<p><strong>Nota:</strong> Starting in {{Gecko("5.0")}}, the following SVG-related DOM interfaces representing lists of objects are now indexable and can be accessed ; in addition, they have a length property indicating the number of items in the lists: {{domxref("SVGLengthList")}}, {{domxref("SVGNumberList")}}, {{domxref("SVGPathSegList")}}, and {{domxref("SVGPointList")}}.</p> +</div> + +<h4 id="Static_type">Static type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAngle")}}</li> + <li>{{domxref("SVGColor")}}</li> + <li>{{domxref("SVGICCColor")}}</li> + <li>{{domxref("SVGElementInstance")}}</li> + <li>{{domxref("SVGElementInstanceList")}}</li> + <li>{{domxref("SVGLength")}}</li> + <li>{{domxref("SVGLengthList")}}</li> + <li>{{domxref("SVGMatrix")}}</li> + <li>{{domxref("SVGNumber")}}</li> + <li>{{domxref("SVGNumberList")}}</li> + <li>{{domxref("SVGPaint")}}</li> + <li>{{domxref("SVGPoint")}}</li> + <li>{{domxref("SVGPointList")}}</li> + <li>{{domxref("SVGPreserveAspectRatio")}}</li> + <li>{{domxref("SVGRect")}}</li> + <li>{{domxref("SVGStringList")}}</li> + <li>{{domxref("SVGTransform")}}</li> + <li>{{domxref("SVGTransformList")}}</li> +</ul> +</div> + +<h4 id="Animated_type">Animated type</h4> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedAngle")}}</li> + <li>{{domxref("SVGAnimatedBoolean")}}</li> + <li>{{domxref("SVGAnimatedEnumeration")}}</li> + <li>{{domxref("SVGAnimatedInteger")}}</li> + <li>{{domxref("SVGAnimatedLength")}}</li> + <li>{{domxref("SVGAnimatedLengthList")}}</li> + <li>{{domxref("SVGAnimatedNumber")}}</li> + <li>{{domxref("SVGAnimatedNumberList")}}</li> + <li>{{domxref("SVGAnimatedPreserveAspectRatio")}}</li> + <li>{{domxref("SVGAnimatedRect")}}</li> + <li>{{domxref("SVGAnimatedString")}}</li> + <li>{{domxref("SVGAnimatedTransformList")}}</li> +</ul> +</div> + +<h3 id="SMIL_related_interfaces">SMIL related interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("ElementTimeControl")}}</li> + <li>{{domxref("TimeEvent")}}</li> +</ul> +</div> + +<h3 id="Other_SVG_interfaces">Other SVG interfaces</h3> + +<div class="index"> +<ul> + <li>{{domxref("SVGAnimatedPathData")}}</li> + <li>{{domxref("SVGAnimatedPoints")}}</li> + <li>{{domxref("SVGColorProfileRule")}}</li> + <li>{{domxref("SVGCSSRule")}}</li> + <li>{{domxref("SVGExternalResourcesRequired")}}</li> + <li>{{domxref("SVGFitToViewBox")}}</li> + <li>{{domxref("SVGLangSpace")}}</li> + <li>{{domxref("SVGLocatable")}}</li> + <li>{{domxref("SVGRenderingIntent")}}</li> + <li>{{domxref("SVGStylable")}}</li> + <li>{{domxref("SVGTests")}}</li> + <li>{{domxref("SVGTextContentElement")}}</li> + <li>{{domxref("SVGTextPositioningElement")}}</li> + <li>{{domxref("SVGTransformable")}}</li> + <li>{{domxref("SVGUnitTypes")}}</li> + <li>{{domxref("SVGURIReference")}}</li> + <li>{{domxref("SVGViewSpec")}}</li> + <li>{{domxref("SVGZoomAndPan")}}</li> +</ul> +</div> + +<h2 id="See_also" name="See_also">Veja também</h2> + +<ul> + <li><a href="/en-US/docs/DOM/DOM_Reference/Examples">DOM Exemplos</a></li> +</ul> diff --git a/files/pt-br/dom/referencia_do_dom/introdução/index.html b/files/pt-br/dom/referencia_do_dom/introdução/index.html new file mode 100644 index 0000000000..010a5ecd54 --- /dev/null +++ b/files/pt-br/dom/referencia_do_dom/introdução/index.html @@ -0,0 +1,251 @@ +--- +title: Introdução ao DOM +slug: DOM/Referencia_do_DOM/Introdução +translation_of: Web/API/Document_Object_Model/Introduction +--- +<p><span class="seoSummary">O DOM (Document Object Model) é a representação de dados dos objetos que compõem a estrutura e o conteúdo de um documento na Web. Neste guia, apresentaremos brevemente o DOM. Veremos como o DOM representa um documento {{Glossary ("HTML")}} ou {{Glossary ("XML")}} na memória e como você usa APIs para criar aplicativos e conteúdo da Web.</span></p> + +<h2 id="What_is_the_DOM" name="What_is_the_DOM">O que é o DOM?</h2> + +<p>O Document Object Model (<strong>DOM</strong>) é uma interface de programação para os documentos HTML e XML. Representa a página de forma que os programas possam alterar a estrutura do documento, alterar o estilo e conteúdo. O DOM representa o documento com nós e objetos, dessa forma, as linguagens de programação podem se conectar à página.</p> + +<p>Uma página da Web é um documento. Este documento pode ser exibido na janela do navegador ou como a fonte HTML. Mas é o mesmo documento nos dois casos. O DOM (Document Object Model) representa o mesmo documento para que possa ser manipulado. O DOM é uma representação orientada a objetos da página da web, que pode ser modificada com uma linguagem de script como JavaScript.</p> + +<p>Os padrões <a class="external" href="http://www.w3.org/DOM/">W3C DOM</a> e <a class="external" href="https://dom.spec.whatwg.org">WHATWG DOM</a> são implementados na maioria dos navegadores modernos. Muitos navegadores estendem o padrão; portanto, é necessário ter cuidado ao usá-los na Web, onde os documentos podem ser acessados por vários navegadores com diferentes DOMs.</p> + +<p>Por exemplo, o DOM padrão especifica que o método <code>getElementsByTagName</code> no código abaixo deve retornar uma lista de todos os elementos <code><p></code> no documento:</p> + +<pre class="brush: js notranslate">var paragraphs = document.getElementsByTagName("p"); +// paragraphs[0] is the first <p> element +// paragraphs[1] is the second <p> element, etc. +alert(paragraphs[0].nodeName); +</pre> + +<p>Todas as propriedades, métodos e eventos disponíveis para manipular e criar páginas da Web são organizados em objetos (por exemplo, o objeto de <code>document</code> que representa o próprio documento, o objeto de <code>table</code> que implementa a Interface especial DOM {{domxref ("HTMLTableElement")}}}} para acessar tabelas HTML e assim por diante). Esta documentação fornece uma referência objeto a objeto ao DOM.</p> + +<p>O DOM moderno é construído usando várias APIs que trabalham juntas. O <a href="/en-US/docs/Web/API/Document_Object_Model">DOM</a> principal define os objetos que descrevem fundamentalmente um documento e os objetos dentro dele. Isso é expandido conforme necessário por outras APIs que adicionam novos recursos e capacidades ao DOM. Por exemplo, a <a href="/en-US/docs/Web/API/HTML_DOM">HTML DOM API</a> adiciona suporte para representar documentos HTML no DOM principal.</p> + +<h2 id="DOM_and_JavaScript" name="DOM_and_JavaScript">DOM e JavaScript</h2> + +<p>O pequeno exemplo acima, como quase todos os exemplos nesta referência, é {{glossary ("JavaScript")}}. Ou seja, está escrito em JavaScript, mas usa o DOM para acessar o documento e seus elementos. O DOM não é uma linguagem de programação, mas sem ela, a linguagem JavaScript não teria nenhum modelo ou noção de páginas da web, documentos HTML, documentos XML e suas partes componentes (por exemplo, elementos). Cada elemento de um documento - o documento como um todo, o cabeçalho, as tabelas do documento, os cabeçalhos da tabela, o texto nas células da tabela - faz parte do modelo de objeto do documento desse documento, para que todos possam ser acessados e manipulados usando o método DOM e uma linguagem de script como JavaScript.</p> + +<p>No início, o JavaScript e o DOM estavam fortemente interligados, mas, eventualmente, evoluíram para entidades separadas. O conteúdo da página é armazenado no DOM e pode ser acessado e manipulado via JavaScript, para que possamos escrever esta equação aproximada:</p> + +<p>API (página HTML ou XML) = DOM + JS (linguagem de script)</p> + +<p>O DOM foi projetado para ser independente de qualquer linguagem de programação específica, disponibilizando a representação estrutural do documento a partir de uma única API consistente. Embora nos concentremos exclusivamente no JavaScript nesta documentação de referência, as implementações do DOM podem ser construídas para qualquer idioma, como este exemplo em Python demonstra:</p> + +<pre class="brush: python notranslate"># exemplo de DOM com Python +import xml.dom.minidom as m +doc = m.parse(r"C:\Projects\Py\chap1.xml") +doc.nodeName # propriedade do objeto de documento DOM +p_list = doc.getElementsByTagName("para") +</pre> + +<p>Para obter mais informações sobre quais tecnologias estão envolvidas na criação de JavaScript na Web, consulte <a href="/en-US/docs/Web/JavaScript/JavaScript_technologies_overview">JavaScript technologies overview</a>.</p> + +<h2 id="How_Do_I_Access_the_DOM.3F" name="How_Do_I_Access_the_DOM.3F">Acessando o DOM</h2> + +<p>Você não precisa fazer nada de especial para começar a usar o DOM. Navegadores diferentes têm implementações diferentes do DOM, e essas implementações exibem graus variados de conformidade com o padrão DOM real (um assunto que tentamos evitar nesta documentação), mas todo navegador usa um modelo de objeto de documento para tornar as páginas da web acessíveis via JavaScript.</p> + +<p>Quando você cria um script - seja embutido em um elemento(tag) <code><script></code> ou incluído na página da web por meio de uma instrução de carregamento de script - você pode começar imediatamente a usar a API para o {{domxref ("document")}} ou { {domxref ("Window", "window")}} elementos para manipular o próprio documento ou obter os filhos desse documento, que são os vários elementos na página da web. Sua programação DOM pode ser algo tão simples quanto o exemplo seguinte, que exibe uma mensagem de alerta usando a função {{domxref ("window.alert", "alert()")}} da função {{domxref ("Window", " window ")}} ou pode usar métodos DOM mais sofisticados para criar realmente novo conteúdo, como no extenso exemplo abaixo.</p> + +<p>O JavaScript a seguir exibirá um alerta quando o documento for carregado (e quando todo o DOM estiver disponível para uso):</p> + +<pre class="brush: html notranslate"><body onload="window.alert('Welcome to my home page!');"> +</pre> + +<p>Outro exemplo. Esta função cria um novo elemento H1, adiciona texto a esse elemento e, em seguida, adiciona o <code>H1</code> à árvore deste documento:</p> + +<pre class="brush: html notranslate"><html> + <head> + <script> + // run this function when the document is loaded + window.onload = function() { + + // create a couple of elements in an otherwise empty HTML page + var heading = document.createElement("h1"); + var heading_text = document.createTextNode("Big Head!"); + heading.appendChild(heading_text); + document.body.appendChild(heading); + } + </script> + </head> + <body> + </body> +</html> +</pre> + +<h2 id="Important_Data_Types" name="Important_Data_Types">Tipos de dados fundamentais</h2> + +<p>Esta referência tenta descrever os vários objetos e tipos em termos simples. Mas há vários tipos de dados diferentes sendo transmitidos pela API que você deve conhecer.</p> + +<div class="blockIndicator note"> +<p><strong>Nota:</strong> Como a grande maioria do código que usa o DOM gira em torno da manipulação de documentos HTML, é comum sempre se referir aos nós no DOM como <strong>elementos</strong>, pois em um documento HTML, cada nó é um elemento. Apesar de não ser estritamente precisa, a documentação que você encontrará no MDN frequentemente fará a mesma coisa, por causa de quão comum é essa suposição.</p> +</div> + +<p>A tabela a seguir descreve brevemente esses tipos de dados.</p> + +<table class="standard-table"> + <thead> + <tr> + <th>Tipos de dados (Interface)</th> + <th>Descrição</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{domxref("Document")}}</td> + <td>Quando um membro retorna um objeto do tipo <code>document</code> (por exemplo, a propriedade <strong><code>ownerDocument </code></strong>de um elemento retorna o <code>document</code> ao qual ele pertence),esse objeto é o próprio objeto de <code>document</code> raiz. O capítulo <a href="/en-US/docs/Web/API/Document">DOM <code>document</code> Reference</a> descreve o objeto do <code>document</code> .</td> + </tr> + <tr> + <td>{{domxref("Node")}}</td> + <td>Todo objeto localizado em um documento é um nó de algum tipo. Em um documento HTML, um objeto pode ser um nó de elemento, mas também um nó de texto ou atributo.</td> + </tr> + <tr> + <td>{{domxref("Element")}}</td> + <td> + <p>O tipo do <code>element</code> é baseado em <code>node</code>. Isso se refere a um elemento ou um nó do tipo <code>element</code> retornado por um membro do DOM API. Ao invés de dizer, por exemplo, que o método {{domxref("document.createElement()")}} retorna um objeto de referência para um nó, nós apenas dizemos que esse método retorna o <code>element</code> que acabou de ser criado no DOM. Os objetos do <code>element</code> implementam a interface DOM <code>Element</code> e também a mais básica interface <code>Node</code>, sendo ambas incluídas juntas nessa referência. Em um documento HTML, elementos são ainda mais aprimorados pelas APIs HTML DOM. A interface {{domxref("HTMLElement")}} bem como outras interfaces descrevem capacidades de tipos especifícos de elementos (por exemlo, {{domxref("HTMLTableElement")}} para elementos {{HTMLElement("table")}}).</p> + </td> + </tr> + <tr> + <td>{{domxref("NodeList")}}</td> + <td>Uma <code>nodeList</code> é um array de elementos comos os que são retornados pelo método {{domxref("document.getElementsByTagName()")}}. Itens numa <code>nodeList</code> são acessados por índices em uma das duas formas: + <ul> + <li>list.item(1)</li> + <li>list[1]</li> + </ul> + Esses dois são equivalentes. No primeiro, <strong><code>item()</code></strong> é o método único no objeto da <code>nodeList</code>. O último usa uma sintaxe típica de array para buscar o segundo item na lista.</td> + </tr> + <tr> + <td>{{domxref("Attribute")}}</td> + <td>Quando um <code>attribute</code> é retornado por um membro (por exemplo, pelo método <strong><code>createAttribute()</code></strong>), é um objeto de referência que expõe uma interface especial (embora pequena) para atributos. Atributos são nós no DOM bem como elementos, mesmo que raramente você possa usá-los como tal.</td> + </tr> + <tr> + <td>{{domxref("NamedNodeMap")}}</td> + <td> + <p> é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. Um namedNodeMap possui um método item () para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.</p> + + <p>Um <code>namedNodeMap</code> é como um array, mas os itens são acessados por nome ou índice, embora este último caso seja meramente uma conveniência para enumeração, já que eles não estão em uma ordem específica na lista. O <code>namedNodeMap</code> possui um método <code>item()</code> para esse propósito, e você também pode adicionar e remover itens de um <code>namedNodeMap</code>.</p> + </td> + </tr> + </tbody> +</table> + +<p>Tenha em mente algumas considerações de terminologia comuns que existem. É comum referir-se a qualquer nó {{domxref("Attribute")}} simplesmente como um <code><strong>attribute</strong></code>, por exemplo, e referir-se a um array de nós DOM como um <code><strong>nodeList</strong></code>. Você encontrará esses termos e outros a serem introduzidos e usados em toda a documentação.</p> + +<h2 id="DOM_interfaces" name="DOM_interfaces">DOM interfaces</h2> + +<p>Esse guia é sobre os objetos e o que você pode usar ao manipular a hierarquia do DOM. Há muitos aspectos que tornam entender como eles funcionam confuso. Por exemplo, o objeto representando o elemento HTML <code>form</code> pega a propriedade <strong><code>name</code></strong> da interface do <code>HTMLFormElement</code> mas a sua propriedade <strong><code>className</code></strong> vem da interface <code>HTMLElement</code>. Em ambos os casos, a propriedade que você quer está naquele objeto do formulário.</p> + +<p>Mas o relacionamento entre objetos e interfaces que são implementadas no DOM pode ser confuso, então essa seção busca mostrar um pouco sobre as interfaces na especificação do DOM e como elas são disponibilizadas.</p> + +<h3 id="Interfaces_and_Objects" name="Interfaces_and_Objects">Interfaces e Objetos</h3> + +<p>Muitos objetos pegam emprestados de várias interfaces diferentes. O objeto table por exemplo implementa uma interface especializada {{domxref("HTMLTableElement")}}, que inclui métodos como <code>createCaption</code> e <code>insertRow</code>. Mas como é também um elemento HTML, <code>table </code>implementa a interface <code>Element </code>descrita no capítulo DOM {{domxref("Element")}} Reference. E finalmente, já que um elemento HTML é também, no que diz respeito ao DOM, um nó na árvore de nós que fazem o modelo de objeto para uma página HTML ou XML, o objeto table também implementa a interface <code>Node</code> mais básica, de onde deriva <code>Element</code>.</p> + +<p>Quando você pegar a referência para um objeto <code>table</code>, como no exemplo a seguir, você rotineiramente usa todas as três interfaces de forma intercambiável no objeto, talvez sem saber.</p> + +<pre class="brush: js notranslate">var tabela = document.getElementById("table"); +var atributosTabela = tabela.attributes; // interface Node/Element +for (var i = 0; i < atributosTabela.length; i++) { + // interface HTMLTableElement: atributo border + if (atributosTabela[i].nodeName.toLowerCase() == "border") + tabela.border = "1"; +} +// interface HTMLTableElement: atributo summary +table.summary = "nota: aumento de borda"; +</pre> + +<h3 id="Core_Interfaces_in_the_DOM" name="Core_Interfaces_in_the_DOM">Interfaces Core no DOM</h3> + +<p>Essa seção lista algumas das interfaces mais utilizadas no DOM. A ideia não é descrever o que essas APIs fazem aqui mas para te dar uma ideia de que tipos de métodos e propriedades você verá bastante conforme for usando o DOM. Essas APIs são usadas nos exemplos mais extensos no capítulo de <a href="/en-US/docs/Web/API/Document_Object_Model/Examples">DOM Examples </a>ao fim desse livro.</p> + +<p>Objetos <code>Document</code> e <code>window</code> são os objetos cujas interfaces você geralmente utiliza mais frequentemente em programação DOM. De forma simples, o objeto <code>window</code> representa algo como o browser, e o objeto <code>document</code> é a raiz de todo o documento em si. <code>Element</code> herda dessa interface <code>Node</code> genérica, e juntamente com essas duas interfaces fornecem muitos dos métodos e propriedades que você utiliza em elementos individuais. Esses elementos podem também ter interfaces específicas para lidar com o tipo de dado que esses elementos contêm, como no exemplo do objeto <code>table</code> na seção anterior.</p> + +<p>A seguir uma lista breve de APIs comuns em scripting de páginas web e XML usando o DOM.</p> + +<ul> + <li><code>{{domxref("document.getElementById", "", "", "1")}}(id)</code></li> + <li><code>document.{{domxref("Element.getElementsByTagName", "getElementsByTagName", "", "1")}}(name)</code></li> + <li><code>{{domxref("document.createElement", "", "", "1")}}(name)</code></li> + <li><code>parentNode.{{domxref("Node.appendChild", "appendChild", "", "1")}}(node)</code></li> + <li><code>element.{{domxref("element.innerHTML", "innerHTML", "", "1")}}</code></li> + <li><code>element.{{domxref("HTMLElement.style", "style", "", "1")}}.left</code></li> + <li><code>element.{{domxref("element.setAttribute", "setAttribute", "", "1")}}()</code></li> + <li><code>element.{{domxref("element.getAttribute", "getAttribute", "", "1")}}()</code></li> + <li><code>element.{{domxref("EventTarget.addEventListener", "addEventListener", "", "1")}}()</code></li> + <li><code>{{domxref("window.content", "", "", "1")}}</code></li> + <li><code>{{domxref("window.onload", "", "", "1")}}</code></li> + <li><code>{{domxref("console.log", "", "", "1")}}()</code></li> + <li><code>{{domxref("window.scrollTo", "", "", "1")}}()</code></li> +</ul> + +<h2 id="Testing_the_DOM_API" name="Testing_the_DOM_API">Testando a DOM API</h2> + +<p>Esse documento fornece amostras para cada interface que você pode usar ao desenvolver. Em alguns casos, as amostras são páginas completas em HTML, com o acesso ao DOM em um elemento <code><script></code>, a interface (ex. botões) necessária para ativar o script num formulário, e os elementos HTML pelo qual o DOM opera listados também. Quando esse é o caso, você pode copiar e colar o exemplo em um novo documento HTML, salvar e rodar o exemplo pelo browser.</p> + +<p>Há alguns casos, porém, que os exemplos são mais concisos. Para rodar exemplos que apenas demonstram o relacionamento básico da interface para os elementos HTML, você pode criar uma página teste em que as interfaces podem ser fácilmente acessadas por scripts. A simples página web a seguir fornece um elemento <code><script></code> no header em que você pode colocar funções para testar a interface, alguns elementos HTML com atributos que você consegue buscar, definir ou manipular, e a interface web do usuário necessária para chamar essas funções pelo broswer.</p> + +<p>Você pode usar essa página teste ou criar uma similar para testar as interfaces DOM que quiser e ver como elas funcionam numa plataforma broswer. Você pode alterar os conteúdos da função <code>test()</code> como achar necessário, criar mais botões ou adicionar elementos se necessário.</p> + +<pre class="brush: html notranslate"><html> + <head> + <title>Testes DOM</title> + <script type="application/javascript"> + function setBodyAttr(attr, value){ + if (document.body) eval('document.body.'+attr+'="'+value+'"'); + else notSupported(); + } + </script> + </head> + <body> + <div style="margin: .5in; height: 400;"> + <p><b><tt>text</tt></b></p> + <form> + <select onChange="setBodyAttr('text', + this.options[this.selectedIndex].value);"> + <option value="black">preto + <option value="darkblue">azul escuro + </select> + <p><b><tt>bgColor</tt></b></p> + <select onChange="setBodyAttr('bgColor', + this.options[this.selectedIndex].value);"> + <option value="white">branco + <option value="lightgrey">cinza + </select> + <p><b><tt>link</tt></b></p> + <select onChange="setBodyAttr('link', + this.options[this.selectedIndex].value);"> + <option value="blue">azul + <option value="green">verde + </select> <small> + <a href="http://algum.website.tld/pagina.html" id="amostra"> + (link)</a></small><br> + </form> + <form> + <input type="button" value="version" onclick="ver()" /> + </form> + </div> + </body> +</html> +</pre> + +<p>Para testar várias interfaces numa única página - por exemplo, um conjunto de propriedades que afete as cores de uma página web - você pode criar uma página de teste similar com um console inteiro de botões, textfields e outros elementos HTML. A screenshot a seguir te dá uma ideia de como interfaces podem ser agrupadas para testes.</p> + +<figure> +<figcaption>Figura 0.1 Página de Teste DOM</figcaption> +<img alt="Image:DOM_Ref_Introduction_to_the_DOM.gif" class="internal" src="/@api/deki/files/173/=DOM_Ref_Introduction_to_the_DOM.gif"></figure> + +<p>Nesse exemplo, os menus drop-down atualizam dinamicamente os aspectos acessáveis pelo DOM na página web como o fundo (<code>bgColor</code>), a cor dos hiperlinks (<code>aLink</code>), e a cor do texto (<code>text</code>). Porém, ao desenhar suas páginas de teste, testar as interfaces conforme for lendo sobre elas é uma parte importante para aprender a usar o DOM de forma efetiva.</p> + +<h2 id="Subnav">Subnav</h2> + +<ul> + <li><a href="/en-US/docs/Web/API/Document_Object_Model">DOM Reference</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Introduction">Introduction to the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Events">Events and the DOM</a></li> + <li><a href="/en-US/docs/Web/API/Document_Object_Model/Examples">Examples</a></li> +</ul> + +<div>{{DefaultAPISidebar("DOM")}}</div> diff --git a/files/pt-br/dom/referencia_do_dom/whitespace_in_the_dom/index.html b/files/pt-br/dom/referencia_do_dom/whitespace_in_the_dom/index.html new file mode 100644 index 0000000000..f4bebc3678 --- /dev/null +++ b/files/pt-br/dom/referencia_do_dom/whitespace_in_the_dom/index.html @@ -0,0 +1,227 @@ +--- +title: Whitespace no DOM +slug: DOM/Referencia_do_DOM/Whitespace_in_the_DOM +tags: + - DOM + - Intermediário +translation_of: Web/API/Document_Object_Model/Whitespace +--- +<h2 id="The_issue" name="The_issue">O problema</h2> + +<p>A presença de espaço branco no <a href="/pt-BR/docs/DOM">DOM</a> pode dificultar a manipulação da árvore de conteúdo de formas imprevisíveis. No Mozilla, todo o espaço branco no conteúdo de texto do documento original é representado no DOM (isso não inclui <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a> entre tags). (Isso é necessário internamente para que o editor possa preservar a formatação de documentos e também que <code>white-space: pre</code> irá funcionar em <a href="/pt-BR/docs/CSS">CSS</a>). Isso significa que:</p> + +<ul> + <li>haverão alguns nós de texto que contêm somente <a href="/pt-BR/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a>, e</li> + <li>alguns nós de texto terão <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a> no início ou no final.</li> +</ul> + +<p>Em outras palavras, a árvore do DOM para o documento seguinte irá parecer como a imagem abaixo (usando "\n" para representar novas linhas):</p> + +<pre class="brush: html"><!-- Meu documento --> +<html> +<head> + <title>Meu documento</title> +</head> +<body> + <h1>Cabeçalho</h1> + <p> + Parágrafo + </p> +</body> +</html> +</pre> + +<p><img src="https://mdn.mozillademos.org/files/854/whitespace_tree.png" style="height: 306px; width: 618px;"></p> + +<p>Isto pode fazer as coisas um pouco difíceis para qualquer usuário do DOM que quer iterar através do conteúdo, excluindo o <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace</a>.</p> + +<h2 id="Facilitando_as_coisas">Facilitando as coisas</h2> + +<p>É possível formatar o código como mostrado abaixo para contornar o problema:</p> + +<pre class="brush: html"><!-- Impressão bonita convencional + com espaços brancos (whitespaces) entre as tags: + --> +<div> + <ul> + <li>Posição 1</li> + <li>Posição 2</li> + <li>Posição 3</li> + </ul> +</div> + +<!-- Impressão bonita ajustada ao problema: + --> +<div + ><ul + ><li>Posição 1</li + ><li>Posição 2</li + ><li>Posição 3</li + ></ul +></div> +</pre> + +<p><br> + O código Javascript abaixo define funções diversas que fazem a manipulação de <a href="/en-US/docs/Web/API/Document_Object_Model/Whitespace_in_the_DOM">whitespace </a>no DOM mais fácil.</p> + +<pre class="brush: js">/** + * Em todo, o whitespace é definido como um dos caracteres + * "\t" TAB \u0009 + * "\n" LF \u000A + * "\r" CR \u000D + * " " SPC \u0020 + * + * Isto não usa o "\s" do Javascript porque inclui espaços + * que não quebram (e alguns outros caracteres). + */ + + +/** + * Determina se um conteúdo de texto do nó é inteiramente whitespace. + * + * @param nod Um nó implementando a interface |CharacterData| (por exemplo: + * |Text|, |Comment|, ou nó |CDATASection| + * @return Verdadeiro se todo conteúdo de texto de |nod| é whitespace, + * de outra forma é falso. + */ +function is_all_ws( nod ) +{ + // Usa as características do ECMA-262 Edition 3 String e RegExp + return !(/[^\t\n\r ]/.test(nod.textContent)); +} + + +/** + * Determina se um nó deve ser ignorado pela função de iterador. + * + * @param nod Um objeto implementando a interface DOM1 |Node|. + * @return verdadeiro se o nó é: + * 1) Um nó |Text| que é todo whitespace + * 2) Um nó |Comment| + * do contrário é falso. + */ + +function is_ignorable( nod ) +{ + return ( nod.nodeType == 8) || // Um nó de comentário + ( (nod.nodeType == 3) && is_all_ws(nod) ); // um nó de texto, todo whitespace +} + +/** + * Versão de |previousSibling| que pula nós que são inteiramente + * whitespace ou comentários. (Normalmente |previousSibling| é uma propriedade + * de todos os nós do DOM que dá o nó irmão, o nó que é + * um filho do mesmo parente, que ocorre imediatamente antes do + * nó de referência.) + * + * @param sib O nó de referência. + * @return Ou: + * 1) O irmão mais próximo do |sib| que não é + * ignorável de acordo com |is_ignorable|, ou + * 2) nulo se tal nó não existe. + */ +function node_before( sib ) +{ + while ((sib = sib.previousSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** + * Versão de |nextSibling| que pula nós que são inteiramente + * whitespace ou comentários. + * + * @param sib O nó de referência. + * @return Ou: + * 1) O irmão mais próximo do |sib| que não é + * ignorável de acordo com |is_ignorable|, ou + * 2) nulo se tal nó não existe. + */ +function node_after( sib ) +{ + while ((sib = sib.nextSibling)) { + if (!is_ignorable(sib)) return sib; + } + return null; +} + +/** + * Versão de |lastChild| que pula nós que são inteiramente + * whitespace ou comentários. (Normalmente |lastChild| é uma propriedade + * de todos os nós do DOM que dá o último dos nós contidos + * diretamente no nó de referência.) + * + * @param sib O nó de referência. + * @return Ou: + * 1) O último filho do |sib| que não é + * ignorável de acordo com |is_ignorable|, ou + * 2) nulo se tal nó não existe. + */ +function last_child( par ) +{ + var res=par.lastChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.previousSibling; + } + return null; +} + +/** + * Versão de |firstChild| que pula nós que são inteiramente + * whitespace ou comentários. + * + * @param sib O nó de referência. + * @return Ou: + * 1) O primeiro nó do |sib| que não é + * ignorável de acordo com |is_ignorable|, ou + * 2) nulo se tal nó não existe. + */ +function first_child( par ) +{ + var res=par.firstChild; + while (res) { + if (!is_ignorable(res)) return res; + res = res.nextSibling; + } + return null; +} + +/** + * Versão de |data| que não inclui whitespace no início + * e final e normaliza todos whitespaces para um espaço individual. (Normalmente + * |data| é uma propriedade de nós de texto que dá o texto do nó.) + * + * @param txt O nó de texto do qual data deve ser retornado + * @return Uma string dando os conteúdos de um nó de texto com + * whitespace colapsado. + */ +function data_of( txt ) +{ + var data = txt.textContent; + // Usa características do ECMA-262 Edition 3 String e RegExp + data = data.replace(/[\t\n\r ]+/g, " "); + if (data.charAt(0) == " ") + data = data.substring(1, data.length); + if (data.charAt(data.length - 1) == " ") + data = data.substring(0, data.length - 1); + return data; +} +</pre> + +<h2 id="Example" name="Example">Exemplo</h2> + +<p>O código seguinte demonstra o uso das funções acima. Ele itera através dos filhos de um elemento (dos quais filhos são todos os elementos) para encontrar aquele cujo o texto seja <code>"Este é o terceiro parágrafo"</code>, e então muda o atributo da classe e os conteúdos daquele parágrafo.</p> + +<pre class="brush: js">var cur = first_child(document.getElementById("teste")); +while (cur) +{ + if (data_of(cur.firstChild) == "Este é o terceiro parágrafo.") + { + cur.className = "mágica"; + cur.firstChild.textContent = "Este é o parágrafo mágico"; + } + cur = node_after(cur); +} +</pre> |