Code Carrots – Document Object Model

View Github Repository Open presentation in a new window

CodeCarrotsJS

See all presentation from CodeCarrotsJS

Code Carrots – Document Object Model

0 0

prezentacja-dom

On Github CodeCarrotsJS / prezentacja-dom

Code Carrots

Document Object Model

Autor prezentacji: Artur Delura

Document Object Model

Opisuje w jaki sposób manipulować strukturą dokumentu, zmieniać właściwości elementów, usuwać, dodawać, reagować na zdarzenia i wiele innych

DOM - dostęp do elementów

// 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"]');
jsbin.com/gajesu/2

DOM - dostęp do elementów

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

DOM - praca z obiektami

// 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 jsbin.com/tutate/3

DOM- usuwanie, dodawanie, przenoszenie elementów

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

DOM - zdarzenia

// 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');

DOM - formularze

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