tmn - Introdução ao DOM

Introdução ao DOM
SAPO
http://www.sapo.pt/
tmn
http://developers.tmn.pt/

Cláudio Gamboa
19 de Maio 2010
<gamboa@co.sapo.pt>

gamboa@co.sapo.pt

DOM

Document Object Model

” JavaScript is a fine city, but the DOM is a
ghetto if you don't wanna lose your rims,
better get in and out as fast as possible. ”

2

gamboa@co.sapo.pt

DOM
É uma API para documentos HTML e XML.
Ele dá-nos a representação estrutural de um documento,
dando-nos a possibilidade de alterar o conteúdo e a
representação visual.
Basicamente, é o que faz a conexão entre as páginas e os
scripts.
Todas as propriedades, métodos e eventos estão disponíveis
para os web developers e para fazer a sua manipulação é
disponibilizado por objectos.
A manipulação do DOM é feita, na maioria dos casos, por
JavaScript.

3

gamboa@co.sapo.pt

DOM

Navegar no DOM

5

gamboa@co.sapo.pt

DOM


document.getElementById('id');
[object HTML_Node_Element]


document.getElementsByName('name');
[object HTMLCollection]


elm.getElementsByTagName('nodeName');

6

gamboa@co.sapo.pt

DOM
...
<div id="div_id">
<span id=”span_id”>some text</span>
</div>
...


document.getElementById('div_id');
[object HTMLDivElement]


document.getElementById('span_id');
[object HTMLSpanElement]

7

gamboa@co.sapo.pt

DOM
...
<input type=”radio” name=”r_name” value=”1” /> 1
...


document.getElementsByName('r_name');
[
[object HTMLInputElement],
[object HTMLInputElement],
[object HTMLInputElement]
]

8

gamboa@co.sapo.pt

DOM
...
<h1>head</h1>
<div>div 1</div>
<div>div 2</div>
<div id=”div_elm”>
<p>div 3</p>
<div>div 4</div>
</div>
...


document.body.getElementsByTagName('div');
[
[object HTMLDivElement], // div 1
[object HTMLDivElement], // div id=div_elm (inc div 4)
[object HTMLDivElement] // div 4
]
9

gamboa@co.sapo.pt

DOM
...
<h1>head</h1>
<div>div 1</div>
<div>div 2</div>
<p>div 3</p>
<div>div 4</div>
</div>
...


document.body.getElementsByTagName('*');
[
[object HTMLHeadingElement], // head
[object HTMLDivElement], // div id=div_elm (inc p & div 4)
[object HTMLParagraphElement], // p
[object HTMLDivElement] // div 4 10
]
gamboa@co.sapo.pt

DOM
...
<h1>head</h1>
<div>div 1</div>
<div>div 2</div>
<p>div 3</p>
<div>div 4</div>
</div>
...


var elm = document.getElementById('div_elm');
elm.getElementsByTagName('div');
[
[object HTMLDivElement] // div 4
]

11

gamboa@co.sapo.pt

DOM


node.childNodes

node.firstChild

node.lastChild

node.nextSibling

node.previousSibling

node.parentNode

12

gamboa@co.sapo.pt

DOM
<body>
<h1>head</h1>
<div>div 1</div>
<div>div 2</div>
<p>div 3</p>
<div>div 4</div>
</div>
</body>


document.body.childNodes;
[object NodeList]

[
[object Text] // n *
[object HTMLHeadingElement] // H1
[object HTMLDivElement] // DIV 1
[object HTMLDivElement] // DIV 2
[object HTMLDivElement] // DIV id=div_elm
13
] gamboa@co.sapo.pt

DOM
<body>
<h1>head</h1>
<div>div 1</div>
<div>div 2</div>
<p>div 3</p>
<div>div 4</div>
</div>
</body>


document.body.firstChild;
[object HTMLHeadingElement] // H1

14

gamboa@co.sapo.pt

DOM
<body>
<h1>head</h1>
<div>div 1</div>
<div>div 2</div>
<p>div 3</p>
<div>div 4</div>
</div>
</body>


document.body.lastChild;
[object HTMLDivElement] // DIV id=div_elm

15

gamboa@co.sapo.pt

DOM
<body>
<h1>head</h1>
<div>div 1</div>
<div>div 2</div>
<p>div 3</p>
<div>div 4</div>
</div>
</body>


document.body.firstChild.nextSibling;
[object HTMLDivElement] // DIV (div 1)

16

gamboa@co.sapo.pt

DOM
<body>
<h1>head</h1>
<div>div 1</div>
<div>div 2</div>
<p>div 3</p>
<div>div 4</div>
</div>
</body>


document.body.lastChild.previousSibling;
[object HTMLDivElement] // DIV (div 2)

17

gamboa@co.sapo.pt

DOM
<body>
<h1>head</h1>
<div>div 1</div>
<div>div 2</div>
<p>div 3</p>
<div id=”div_4”>div 4</div>
</div>
</body>


document.getElementById('div_4').parentNode;
[object HTMLDivElement] // DIV (div id=div_elm)

18

gamboa@co.sapo.pt

DOM

Manipulação do DOM

19

gamboa@co.sapo.pt

DOM

Criar, adicionar,
remover e substituir
elementos no DOM

20

gamboa@co.sapo.pt

DOM


Criar
document.createElement('nodeName');
document.createTextNode('string');
var elmDiv = document.createElement('div');

elmDiv // [object HTMLDivElement]

---------------------------------------------------------

var textNode = document.createTextNode('my text');

textNode // [object Text]

21

gamboa@co.sapo.pt

DOM


Clonar <div id=”div_id”>
<p>paragraph</p>
<div>div</div>
elm.cloneNode(false); </div>
elm.cloneNode(true);
var elmDiv = document.getElementById('div_id');

<div id=”div_id”>
var clonedDiv = elmDiv.cloneNode(false); </div>
-----------------------------------------
var clonedDiv = elmDiv.cloneNode(true); <p>paragraph</p>
<div>div</div>
</div>
22

gamboa@co.sapo.pt

DOM
<p>text</p>
</div>

Adicionar
elm.appendChild(newElm);


var newP = document.createElement('p');
var newText = document.createTextNode('some text');

newP.appendChild(newText);
elmDiv.appendChild(newP); <p>text</p>
<p>some text</p>
</div>
23

gamboa@co.sapo.pt

DOM
<p id=”p_id”>text</p>
</div>

Adicionar antes
elm.insertBefore(newElm, nextElm);

var elmP = document.getElementById('p_id');

var newDiv = document.createElement('div');

elmDiv.insertBefore(newDiv, elmP); <div id=”div_id”>
<div></div>
</div>

24

gamboa@co.sapo.pt

DOM


Remover <p id=”p_id”>text</p>
</div>
elm.removeChild(oldElm);


elmDiv.removeChild(elmP);
ou ”suicídio”
</div>
elmP.parentNode.removeChild(elmP);

25

gamboa@co.sapo.pt

DOM

Substituir </div>

elm.replaceChild(newElm, oldElm);



elmDiv.replaceChild(newDiv, elmP); <div id=”div_id”>
<div></div>
ou </div>
elmP.parentNode.replaceChild(newDiv, elmP);

26

gamboa@co.sapo.pt

DOM
</div>

innerHTML
elm.innerHTML = 'new HTML string';

var newHTML = '<div>new div</div><p>text</p>';
var moreHTML = '<p>more text</p>';

elmDiv.innerHTML = newHTML; <div id=”div_id”>
<div>new div</div>
append <p>text</p>
</div>

elmDiv.innerHTML += moreHTML; <div id=”div_id”>
<div>new div</div>
<p>text</p>
<p>more text</p> 27
</div>
gamboa@co.sapo.pt

DOM

Manipular elementos
no DOM

28

gamboa@co.sapo.pt

DOM
<div id=”d_id”>
</div>

Definir propriedades/atributos
elm.setAttribute('atributo', 'valor');
elm.atributo = 'valor';

var elmDiv = document.getElementById('d_id');
ou

elmDiv.setAttribute('class', 'd_class');
ou
newDiv.id = 'd_id';
<div id=”d_id” class=”d_class”>
newDiv.className = 'd_class'; </div>

29

gamboa@co.sapo.pt

DOM


Ler propriedades/atributos
elm.getAttribute('atributo');
elm.atributo; <div id=”d_id” class=”d_class”>
</div>


elmDiv.getAttribute('id'); // d_id
elmDiv.getAttribute('class'); // d_class

ou

elmDiv.id; // d_id
elmDiv.className; // d_class

30

gamboa@co.sapo.pt

DOM
<div id=”d_id”>
</div>

Definir estilos
elm.style.estiloParaDefinir = 'valor';


elmDiv.style.position = 'absolute';
elmDiv.style.fontSize = '15px';

<div id=”d_id” style=”position: absolute; font-size: 15px”>
</div>

31

gamboa@co.sapo.pt

DOM

...

É capaz de ser hora de comer...

var sInt = setInterval(function() {
comer();
falar();
}, 1000);

setTimeout(function(){
clearInterval(sInt);
pensarEmVoltarPraSala();
}, 10 * 60 * 1000);

setTimeout(function(){
voltarPraSala();
}, 15 * 60 * 1000);
32

gamboa@co.sapo.pt

DOM

Eventos

33

gamboa@co.sapo.pt

DOM - Events


Lista de eventos

● click ● focus ● load
● dblclick ● blur ● unload
● mousedown ● change ● beforeunload
● mouseup ● keydown
● mousemove ● keyup
● mouseover ● keypress
● mouseout ● reset
● contextmenu ● submit

...

muitos mais

34

gamboa@co.sapo.pt

DOM - Events

Attach de eventos
elm.'on'+event = handler_f;
elm.attachEvent('on'+event, handler_f);
elm.addEventListener(event, handler_f, false);
var button = document.createElement('input');
button.type = 'button';
button.value = 'OK';
var handler_f = function(e) {
e = e || event;
alert('Hello World');
};
OK
button.onclick = handler_f;
ou
Click
if(button.attachEvent) {
button.attachEvent('onclick', handler_f);
// Hello World
} else {
button.addEventListener('click', handler_f, false);
} 35

gamboa@co.sapo.pt

DOM - Events

Attach de eventos
Usando frameworks - LibSAPO.js
e = e || event;
alert('Hello World');
};

SAPO.Dom.Event.observe(button, 'click', handler_f);
OK
Click

// Hello World

36

gamboa@co.sapo.pt

DOM - Events

Captura de eventos


e = e || event;

var elm = e.target || e.srcElement;

alert(elm.value);
};

if(button.attachEvent) { OK
button.attachEvent('onclick', handler_f);
} else { Click
button.addEventListener('click', handler_f, false);
}
// OK

37

gamboa@co.sapo.pt

DOM - Events

Captura de eventos

e = e || event;

var elm = SAPO.Dom.Event.element(e);

alert(elm.value);
};
OK
Click
SAPO.Dom.Event.observe(button, 'click', handler_f);

// OK

38

gamboa@co.sapo.pt

DOM - Events

Cancelar eventos var cancelEvent = function(e) {
if(e.cancelBubble !== null) {
e.cancelBubble = true;
var elmA = document.createElement('a'); }
elmA.href = 'http://www.sapo.pt/'; if(e.stopPropagation) {
e.stopPropagation();
}
var handler_f = function(e) { if(e.preventDefault) {
e = e || event; e.preventDefault();
cancelEvent(e); }
alert('link clicked'); if(window.event) {
}; e.returnValue = false;
elmA.addEventListener('click', handler_f, false); }
if(e.cancel !== null) {
e.cancel = true;
}
};

39

gamboa@co.sapo.pt

DOM - Events

Cancelar eventos

var elmA = document.createElement('a');
elmA.href = 'http://www.sapo.pt/';

e = e || event;
SAPO.Dom.Event.stop(e);
alert('link clicked');
};

SAPO.Dom.Event.observe(elmA, 'click', handler_f);

link clicked redirect www.sapo.pt
40

gamboa@co.sapo.pt

LibSAPO.js

LibSAPO.js

41

gamboa@co.sapo.pt

LibSAPO.js

http://js.sapo.pt/

check out
Library API
42

gamboa@co.sapo.pt

LibSAPO.js

SAPO

SAPO.Utility.*

SAPO.Dom.Element.*

SAPO.Dom.Event.*

SAPO.Dom.Css.*

SAPO.Dom.Selector.*

SAPO.Communication.Ajax()

43

gamboa@co.sapo.pt

LibSAPO.js

SAPO

http://js.sapo.pt/SAPO/

http://js.sapo.pt/SAPO/Namespace/Class/
http://js.sapo.pt/SAPO/Namespace/Class/sample/

44

gamboa@co.sapo.pt

LibSAPO.js
SAPO;
SAPO.require();
new SAPO.Communication.Ajax();
SAPO.Dom.Event.observe();
SAPO.Dom.Event.pointer();
SAPO.Dom.Event.findElement();
SAPO.Dom.Css.addClassName();
SAPO.Dom.Css.removeClassName();
SAPO.Dom.Event.stop();
SAPO.Dom.Css.getStyle(); SAPO.Dom.Css.setStyle();
SAPO.Dom.Element.get(); SAPO.Dom.Selector.select();
SAPO.Dom.Element.create();
SAPO.Utility.Date.get();
SAPO.Utility.Crypto.md5(); SAPO.Utility.String.htmlEntitiesEncode();
SAPO.Utility.Cookie.get(); SAPO.Utility.String.trim();
SAPO.Utility.Dumper.alertDump();
SAPO.Utility.Cookie.set();
SAPO.Utility.Dumper.alertDump(); SAPO.Utility.Url.getQueryString();
SAPO.Utility.Url.base64Encode();
SAPO.Utility.Serialize.get(); 45

gamboa@co.sapo.pt

DOM
ainda há mais slides

?
46

gamboa@co.sapo.pt

DOM
Cláudio Gamboa

@email: gamboa@co.sapo.pt
@xmpp: claudiogamboa@sapo.pt
@_: http://www.sapo.pt

@blog: http://blog.pdvel.com/
@social: suskind 47

gamboa@co.sapo.pt

tmn - Introdução ao DOM

Recomendados

Recomendados

Mais conteúdo relacionado

Destaque

Destaque (20)

tmn - Introdução ao DOM