Uczymy się czym jest nodeType i firstChild na przykładzie klasy, którą później rozbudujemy. Do dzieła.
Oto nasza klasa:
class Helper {
constructor(selector) {
this.item = document.getElementById(selector);
}
toUpper(){
let txt = this.item.textContent;
this.item.textContent = txt.toUpperCase();
}
toBold(){
let txt = this.item.textContent;
this.item.innerHTML = "<b>" + txt + "</b>";
}
}Nie wygląda na przesadnie trudną. Oto użycie:
window.addEventListener("DOMContentLoaded", function(){
let para = new Helper('para');
console.log(para.item.innerHTML);
//bla bla bla
para.toUpper();
para.toBold();
console.log(para.item.innerHTML);
//<b>BLA BLA BLA</b>
});Teraz wykonajmy nasze funkcje na odwrót:
window.addEventListener("DOMContentLoaded", function(){
let para = new Helper('para');
console.log(para.item.innerHTML);
//bla bla bla
para.toBold();
para.toUpper();
console.log(para.item.innerHTML);
//BLA BLA BLA
});Bold nam zniknął. Cóż, zróbmy taki test:
window.addEventListener("DOMContentLoaded", function(){
let para = new Helper('para');
console.log(para.item.innerHTML);
//bla bla bla
console.log(para.item.firstChild.nodeType === Node.TEXT_NODE);
//true
para.toBold();
//para.toUpper();
console.log(para.item.innerHTML);
//<b>bla bla bla</b>
console.log(para.item.firstChild.nodeType === Node.TEXT_NODE);
//false
});Wystarczy teraz zmienić nieco naszą klasę:
class Helper {
constructor(selector) {
this.item = document.getElementById(selector);
}
toUpper(){
let txt = this.item.textContent;
if(this.item.firstChild.nodeType === Node.TEXT_NODE){
this.item.textContent = txt.toUpperCase();
}else {
this.item.firstChild.textContent = txt.toUpperCase();
}
}
toBold(){
let txt = this.item.textContent;
this.item.innerHTML = "<b>" + txt + "</b>";
}
}Teraz wszystko będzie działać bez zarzutu:
window.addEventListener("DOMContentLoaded", function(){
let para = new Helper('para');
console.log(para.item.innerHTML);
//bla bla bla
para.toBold();
para.toUpper();
console.log(para.item.innerHTML);
//<b>BLA BLA BLA</b>
});