From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- .../pt-br/dom/referencia_do_dom/events/index.html | 82 +++++ .../dom/referencia_do_dom/examples/index.html | 376 ++++++++++++++++++++ .../how_to_create_a_dom_tree/index.html | 145 ++++++++ files/pt-br/dom/referencia_do_dom/index.html | 379 +++++++++++++++++++++ .../introdu\303\247\303\243o/index.html" | 251 ++++++++++++++ .../whitespace_in_the_dom/index.html | 227 ++++++++++++ 6 files changed, 1460 insertions(+) create mode 100644 files/pt-br/dom/referencia_do_dom/events/index.html create mode 100644 files/pt-br/dom/referencia_do_dom/examples/index.html create mode 100644 files/pt-br/dom/referencia_do_dom/how_to_create_a_dom_tree/index.html create mode 100644 files/pt-br/dom/referencia_do_dom/index.html create mode 100644 "files/pt-br/dom/referencia_do_dom/introdu\303\247\303\243o/index.html" create mode 100644 files/pt-br/dom/referencia_do_dom/whitespace_in_the_dom/index.html (limited to 'files/pt-br/dom/referencia_do_dom') 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 +--- +
{{DefaultAPISidebar("DOM")}}
+ +

Introdução

+ +

Este capítulo descreve o Modelo de Eventos do DOM. A interface de Eventos é descrita, assim como a interface para registro de eventos em nodes(ou nódulos) no DOM, e event listeners, 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 DOM Level 3 Events draft.

+ +

Existe um excelente diagrama que explica claramente as três fases do percurso de eventos no DOM em DOM Level 3 Events draft.

+ +

Registrando event listeners

+ +

Existem 3 formas de registrar uma manipulação de eventos para um elemento DOM.

+ +

{{domxref("EventTarget.addEventListener")}}

+ +
// 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')
+}
+
+ +

Este é o método que você deve usar em páginas web modernas.

+ +
+

Nota: 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.

+
+ +

Mais detalhes podem encontrada na página de referência {{domxref("EventTarget.addEventListener")}}.

+ +

atributo HTML

+ +
<button onclick="alert('Hello world!')">
+
+ +

O código JavaScript no atributo é passado para o objeto Evento através do parâmetro event . O valor return é tratado de uma maneira especial, descrita na especificação HTML.

+ +
+

Cuidado: 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.

+
+ +

DOM element properties

+ +
// Supondo que myButton seja um elemento button
+myButton.onclick = function(event){alert('Hello world')}
+
+ +

A função pode ser definida para receber um parâmetro event . O valor return é tratado de maneira especial, descrita na especificação HTML.

+ +

O problema deste método é que apenas uma manipulação pode ser definida por elemento e por evento.

+ +

Acessando interfaces doEvento

+ +

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.

+ +

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.

+ +
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
+
+ + + + 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 +--- +

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.

+ +

Exemplo 1: altura e largura

+ +

O exemplo a seguir mostra o uso das propriedades de altura e largura ao lado de imagens de dimensões variáveis:

+ +
<!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>
+
+ +

Exemplo 2: Atributos de Imagem

+ +
<!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>
+
+ +

Exemplo 3: Manipulando Estilos

+ +

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.

+ +
<!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>
+
+ +

Exemplo 4: Usando folhas de estilo

+ +

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.

+ +
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" );
+  }
+}
+ +

Para um documento com uma única folha de estilo na qual as três regras a seguir são definidas:

+ +
body { background-color: darkblue; }
+p { font-face: Arial; font-size: 10pt; margin-left: .125in; }
+#lumpy { display: none; }
+
+ +

Este script produz o seguinte:

+ +
BODY
+P
+#LUMPY
+
+ +

 

+ +

Exemplo 5: Propagação de Eventos

+ +

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.

+ +

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.

+ +
<!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>
+
+ +

Exemplo 6: getComputedStyle

+ +

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 Lista de Propriedades do DOM CSS.

+ +

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.

+ +
<!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>
+
+ +

Exemplo 7: Exibindo Propriedades de Evento do Objeto

+ +

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.

+ +

As propriedades dos objetos de evento diferem muito entre os navegadores, o WHATWG DOM Standard lista as propriedades padrão, porém muitos navegadores estenderam muito esses valores.

+ +

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.

+ +
<!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>
+
+ +

Exemplo 8: Usando a interface de tabela  do DOM

+ +

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")}}.

+ +

Para adicionar uma linha e algumas células a uma tabela existente:

+ +
<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>
+
+ +


+ Notas

+ + + + + + 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 +--- +

{{draft}}

+ +

Esta página descreve como usar DOM Core 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)

+ +

Criando uma árvore DOM dinamicamente

+ +

Considere o seguinte documento 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>
+
+ +

A W3C DOM API, suportada pelo Mozilla, pode ser usada para criar uma representação na memória deste documento, da seguinte forma:

+ +
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);
+
+ +

Veja também o capítulo DOM chapter of the XUL Tutorial.

+ +

Você pode automatizar a criação de uma árvore DOM usando um algoritmo reverso JXON em associação com a seguinte representação JSON:

+ +
{
+  "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"
+    }]
+  }
+}
+
+ +

E daí?

+ +

As árvores DOM podem ser consultadas usando expressões XPath, convertidas em strings ou gravadas em arquivos locais ou remotos usando XMLSerializer (sem ter que primeiro converter para uma string), POSTed para um servidor web (via XMLHttpRequest), transformado usando XSLT, XLink, convertido para um objeto JavaScript através de um algoritmo JXON, etc.

+ +

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.

+ +

Veja também

+ + + +

{{ 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" } ) }}

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 +--- +

{{DefaultAPISidebar("DOM")}}

+ +

O Modelo de Objeto de Documento  (DOM) é 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.

+ +

Embora o DOM seja frequentemente acessado usando JavaScript, não é uma parte da linguagem JavaScript. Ele também pode ser acessado por outras linguagens.

+ +

Uma introdução ao DOM está disponível.

+ +

DOM interfaces

+ +
+ +
+ +

Interfaces DOM obsoletas

+ +

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:

+ +
+ +
+ +

Interfaces HTML

+ +

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.

+ +

Um objeto HTMLDocument 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.

+ +

HTML elemento interfaces

+ +
+ +
+ +

Outras interfaces

+ +
+ +
+ +

Obsoleto HTML interfaces

+ +
+ +
+ +

SVG interfaces

+ +

SVG elemento  interfaces

+ +
+ +
+ +

SVG data type interfaces

+ +

Aqui estão a DOM API para tipos de dados utilizados nas definições de propriedades SVG e atributos.

+ +
+

Nota: 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")}}.

+
+ +

Static type

+ +
+ +
+ +

Animated type

+ +
+ +
+ + + +
+ +
+ +

Other SVG interfaces

+ +
+ +
+ +

Veja também

+ + diff --git "a/files/pt-br/dom/referencia_do_dom/introdu\303\247\303\243o/index.html" "b/files/pt-br/dom/referencia_do_dom/introdu\303\247\303\243o/index.html" new file mode 100644 index 0000000000..010a5ecd54 --- /dev/null +++ "b/files/pt-br/dom/referencia_do_dom/introdu\303\247\303\243o/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 +--- +

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.

+ +

O que é o DOM?

+ +

O Document Object Model (DOM) é 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.

+ +

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.

+ +

Os padrões W3C DOM e WHATWG DOM 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.

+ +

Por exemplo, o DOM padrão especifica que o método getElementsByTagName no código abaixo deve retornar uma lista de todos os elementos <p> no documento:

+ +
var paragraphs = document.getElementsByTagName("p");
+// paragraphs[0] is the first <p> element
+// paragraphs[1] is the second <p> element, etc.
+alert(paragraphs[0].nodeName);
+
+ +

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 document que representa o próprio documento, o objeto de table 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.

+ +

O DOM moderno é construído usando várias APIs que trabalham juntas. O DOM 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 HTML DOM API adiciona suporte para representar documentos HTML no DOM principal.

+ +

DOM e JavaScript

+ +

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.

+ +

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:

+ +

API (página HTML ou XML) = DOM + JS (linguagem de script)

+ +

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:

+ +
# 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")
+
+ +

Para obter mais informações sobre quais tecnologias estão envolvidas na criação de JavaScript na Web, consulte JavaScript technologies overview.

+ +

Acessando o DOM

+ +

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.

+ +

Quando você cria um script - seja embutido em um elemento(tag) <script> 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.

+ +

O JavaScript a seguir exibirá um alerta quando o documento for carregado (e quando todo o DOM estiver disponível para uso):

+ +
<body onload="window.alert('Welcome to my home page!');">
+
+ +

Outro exemplo. Esta função cria um novo elemento H1, adiciona texto a esse elemento e, em seguida, adiciona o H1 à árvore deste documento:

+ +
<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>
+
+ +

Tipos de dados fundamentais

+ +

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.

+ +
+

Nota: 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 elementos, 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.

+
+ +

A tabela a seguir descreve brevemente esses tipos de dados.

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Tipos de dados (Interface)Descrição
{{domxref("Document")}}Quando um membro retorna um objeto do tipo document (por exemplo, a propriedade ownerDocument de um elemento retorna o document ao qual ele pertence),esse objeto é o próprio objeto de  document raiz. O capítulo DOM document Reference descreve o objeto do document .
{{domxref("Node")}}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.
{{domxref("Element")}} +

O tipo do element é baseado em node. Isso se refere a um elemento ou um nó do tipo element 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 element que acabou de ser criado no DOM. Os objetos do element  implementam a interface DOM Element e também a mais básica interface Node, 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")}}).

+
{{domxref("NodeList")}}Uma nodeList é um array de elementos comos os que são retornados pelo método {{domxref("document.getElementsByTagName()")}}. Itens numa nodeList são acessados por índices em uma das duas formas: +
    +
  • list.item(1)
    • +
  • list[1]
    • +
+ Esses dois são equivalentes. No primeiro, item() é o método único no objeto da nodeList. O último  usa uma sintaxe típica de array para buscar o segundo item na lista.
{{domxref("Attribute")}}Quando um attribute é retornado por um membro (por exemplo, pelo método createAttribute()), é 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.
{{domxref("NamedNodeMap")}} +

 é 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.

+ +

Um namedNodeMap é 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 namedNodeMap possui um método item() para esse propósito, e você também pode adicionar e remover itens de um namedNodeMap.

+
+ +

Tenha em mente algumas considerações de terminologia comuns que existem. É comum referir-se a qualquer nó {{domxref("Attribute")}} simplesmente como um attribute, por exemplo, e referir-se a um array de nós DOM como um nodeList. Você encontrará esses termos e outros a serem introduzidos e usados em toda a documentação.

+ +

DOM interfaces

+ +

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 form pega a propriedade name da interface do HTMLFormElement mas a sua propriedade className vem da interface HTMLElement. Em ambos os casos, a propriedade que você quer está naquele objeto do formulário.

+ +

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.

+ +

Interfaces e Objetos

+ +

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 createCaption e insertRow. Mas como é também um elemento HTML, table implementa a interface Element 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 Node mais básica, de onde deriva Element.

+ +

Quando você pegar a referência para um objeto table, como no exemplo a seguir, você rotineiramente usa todas as três interfaces de forma intercambiável no objeto, talvez sem saber.

+ +
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";
+
+ +

Interfaces Core no DOM

+ +

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 DOM Examples ao fim desse livro.

+ +

Objetos Document e window são os objetos cujas interfaces você geralmente utiliza mais frequentemente em programação DOM. De forma simples, o objeto window representa algo como o browser, e o objeto document é a raiz de todo o documento em si. Element herda dessa interface Node 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 table na seção anterior.

+ +

A seguir uma lista breve de APIs comuns em scripting de páginas web e XML usando o DOM.

+ + + +

Testando a DOM API

+ +

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 <script>, 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.

+ +

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 <script> 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.

+ +

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 test() como achar necessário, criar mais botões ou adicionar elementos se necessário.

+ +
<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>
+
+ +

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.

+ +
+
Figura 0.1 Página de Teste DOM
+Image:DOM_Ref_Introduction_to_the_DOM.gif
+ +

Nesse exemplo, os menus drop-down atualizam dinamicamente os aspectos acessáveis pelo DOM na página web como o fundo (bgColor), a cor dos hiperlinks (aLink), e a cor do texto (text). 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.

+ + + + + +
{{DefaultAPISidebar("DOM")}}
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 +--- +

O problema

+ +

A presença de espaço branco no DOM 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 whitespace entre tags). (Isso é necessário internamente para que o editor possa preservar a formatação de documentos e também que white-space: pre irá funcionar em CSS). Isso significa que:

+ + + +

Em outras palavras, a árvore do DOM para o documento seguinte irá parecer como a imagem abaixo (usando "\n" para representar novas linhas):

+ +
<!-- Meu documento -->
+<html>
+<head>
+  <title>Meu documento</title>
+</head>
+<body>
+  <h1>Cabeçalho</h1>
+  <p>
+    Parágrafo
+  </p>
+</body>
+</html>
+
+ +

+ +

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 whitespace.

+ +

Facilitando as coisas

+ +

É possível formatar o código como mostrado abaixo para contornar o problema:

+ +
<!-- 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>
+
+ +


+ O código Javascript abaixo define funções diversas que fazem a manipulação de whitespace no DOM mais fácil.

+ +
/**
+ * 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;
+}
+
+ +

Exemplo

+ +

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 "Este é o terceiro parágrafo", e então muda o atributo da classe e os conteúdos daquele parágrafo.

+ +
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);
+}
+
-- cgit v1.2.3-54-g00ecf