Dostęp, tworzenie oraz usuwanie węzłów i atrybutów

workshop: #js9-ws-dom.html

Mini-warsztat JS: DOM i węzły

Obsługa tablic, poznanie struktury obiektów oraz ich właściwości

Przygotowanie

Otwórz narzędzia deweloperskie przegladarki, następnie przejdź na zakładkę Konsola (console)
Wykonuj tam kod i polecenia z poniższych przykładów
Przetestuj każdy przykład od 1.1 do 1.5 wywołując jego funkcjonalności i obserwując zachowanie. Popraw/uzupełnij przykład, jeżeli posiada błędy/braki
Odpowiedz na pytania u dołu dokumentu

1.1Dodanie linku powrotu za każdym tytułem skryptu

let figcap = document.getElementsByTagName('figcaption');
for( let i=0; i<=figcap.length-1; i++){
let lnk = document.createElement('a');
	lnk.setAttribute('href', '#workshop' );
	lnk.setAttribute('class', 'toTopBtn' );
	lnk.textContent = 'Przewiń do góry';
	figcap[i].appendChild(lnk);
}
// przycisk "Przewiń (..)" pojawi się po najechaniu na tytuł każdego Skryptu (znacznik FIGCAPTION)

1.2 Wyświetlenie liczby i rodzaju elementów

var allLinks = document.body.querySelectorAll('A');
console.log("Wszystkich odnośników na stronie: "+allLinks.length);
	// ile odnośników wyliczył skrypt?
var locLinks = document.getElementById('workshop').querySelectorAll('[href^="#"]');
console.log("Odnośników w obrębie dokumentu: "+locLinks.length);
	// ile wewnętrznych odnośników wyliczył skrypt?
var pres = document.getElementsByTagName('pre');
var code = document.getElementsByTagName('code');
console.log("Listingów kodu: "+pres.length);
console.log("Pojedynczych kodów: "+code.length);
	// ile elementów wyliczył skrypt?

1.3Usuń wybrany węzęł oraz atrybut

var boxes = document.querySelectorAll('.gtkBox');
console.log('Elementy które można usunąć:');
console.log(boxes);
console.log('Wskaż index węzła "Zasoby lekcji"; index: od 0 do '+(boxes.length-1));
console.log("i wywołaj funkcję: deleteElem( index, węzeł rodzica)");
function deleteElem(index=0,parent='gtkWindow'){
  var deleteNode = document.getElementsByClassName('gtkBox')[index];
  document.getElementsByClassName(parent)[0].removeChild(deleteNode);
}

1.4Zmiana aktywnego arkusza CSS

var styles = [
	{ label: "Domyślny", file:"default"},
	{ label: "Czerwony", file:"red"},
	{ label: "Limonkowy", file:"lime"}
];
var changeCss = function(){
	var id = this.dataset.css;
	var cssPath = 'gui/'+id+'/'+id+'.css';
	document.getElementsByTagName("link")[0].setAttribute("href", cssPath);
	// kontynuuj zadanie 1.4 wykonując zadanie 1.5 - kiedy wszystko będzie gotowe
	// - sprawdź działanie skryptu - czy atrybut HREF znacznika LINK się zmienia?
	console.log(document.getElementsByTagName("link")[0].getAttribute("href"));
}

1.5Menu zmiany szablonu strony

let nav = document.querySelector('.gtkInfoBar');
let wcagMenu = document.createElement('ul');
for( let i=0; i<=styles.length-1; i++){
let wmItem = document.createElement('li');
let wmLink = document.createElement('a');
	wmLink.setAttribute('data-css', styles[i].file );
	wmLink.textContent = styles[i].label;
	wmLink.addEventListener('click', changeCss, false );
	wmItem.appendChild(wmLink);
	wcagMenu.appendChild(wmItem);
}
nav.appendChild(wcagMenu);
// kiedy skończysz skrypt 1.4 oraz 1.5 upewnij się,
// że testując ten skrypt masz w dokumencie dostepny znacznik LINK w części HEAD dokumentu