Autor prezentacji: Artur Delura
Opisuje w jaki sposób manipulować strukturą dokumentu, zmieniać właściwości elementów, usuwać, dodawać, reagować na zdarzenia i wiele innych
// zwraca obiekt reprezentujący element o danym id
document.getElementById('id');
// zwraca tablicę obiektów reprezentujących tagi span
document.getElementsByTagName('span');
// zwraca tablicę obiektów reprezentujących elementy o danej klasie
document.getElementsByClassName('klasa');
// zwraca pierwszy obiekt reprezentujący element który pasuje do selektora, tak jak w CSS
// aby pobrać wszystkie elementy użyj querySelectorAll
document.querySelector('[data‑id="1"]');
// Obiekty te posiadają właściwości, które możemy modyfikować.
// właściwość elementu ‑ węzeł rodzica
element.parentNode
// właściwość elementu ‑ lista dzieci
element.childNodes
// właściwość elementu ‑ pierwsze dziecko
element.firstChild
// tekst w elemencie, zobacz, co kryje się pod adresem
element.innerText = 'http://jsbin.com/camave/2/edit';
// kod HTML w elemencie
element.innerHTML = 'Jestem paragrafem
'
// zestaw danych w elemencie, jeżeli elementem jest paragraf o poniższej strukturze
// to
element.dataset.id // zwróci '1'
// metody manipulujące atrybutami elementów
element.setAttribute, element.getAttribute, element.hasAttribute, element.removeAttribute
// metody manipulujace atrybutem class elementu
element.classList.remove, element.classList.add, element.classList.toggle, element.classList.contains
// tworzy nowy obiekt reprezentujący element img
var img = document.createElement('img');
img.src = 'http://codecarrotsjs.github.io/gfx/ggc_logo.svg';
// dodaje dziecko do elementu
element.appendChild(img);
// usuwa dziecko z rodzica
element.removeChild(img);
// dodaje dziecko do elementu przed określonym elementem
parent.insertBefore(insertElement, beforeMe);
// gdy jest zdarzenie ‑ wiedz, że coś się dzieje
window.addEventListener('load', function () {
alert('Strona jest załadowana');
});
var button = document.getElementById('button');
button.addEventListener('click', function () {
window.location = 'http://codecarrotsjs.github.io/';
});
window.open('http://jsbin.com/waviyo/5/edit');
// więcej o zdarzeniach
window.open('http://bit.ly/1cDC1x3');
<!doctype html>
<html>
<head>
<title>Form przykład</title>
<meta charset="utf-8" />
</head>
<body>
<form action="http://google.pl" method="post">
<p>
<label for="speed">Speed: </label>
<input id="speed" type="text" name="speed" />
</p>
<p>
<label for="submit">Submit: </label>
<input id="submit" type="submit" />
</p>
</form>
<script>
var form = document.getElementsByTagName('form')[0];
form.addEventListener('submit', function (e) {
alert(form.querySelector('[name="speed"]').value);
// zapobiegnięcie domyślnej akcji, czyli przeładowania strony
e.preventDefault();
});
</script>
</body>
</html>