Start

• minimal.html
• example2.html
• Oglądanie DOM
• Chrome Developer Tools
• Firebug

Czytanie DOM

document.getElementsByTagName("p")
[ <p...]
document.getElementById("pierwszy")
[ <p... ]
document.getElementsByName("p")
[]
document.getElementsByName("pierwszy")
[]

Modyfikowanie DOM

• Cheating: document.body.innerHTML = "<h1>Heading 1</h1>"
• Tworzenie elementów

h = document.createElement("h1")
h_text = document.createTextNode("Heading 1")
h.appendChild(h_text)
document.body.appendChild(h)

window.onload

minimal2.html

window.onload = function() {
h = document.createElement("h1")
h_text = document.createTextNode("Heading 1")
h.appendChild(h_text)
document.body.appendChild(h)
}

Zdarzenia

window.onload = function() {
h = document.createElement("button")
h_text = document.createTextNode("Click!")
h.appendChild(h_text)
  h.addEventListener('click',function(){
   alert(h.firstChild.data);
   h.firstChild.data = 'Clack!'
 }, false);
document.body.appendChild(h)
}

Zadanie na dziś

• W swoim dokumencie dodać wiersz do tabeli

Rozgrzewka:

• Dodać kilka akapitów do example2.html
• Dodać akapit do example1.html #content