Topik Belajar Javascript DOM – Belajar Teknologi Internet

PTopik.MY.ID – DOM singkatan dari Document Object Model yang merupakan sebuah representasi dari struktur dokument HTML atau XML dalam bentuk tree oleh Javascript. Atau diibaratkan sebuah pohon yang mana element satu dengan yang lain saling terkait

DOM memungkingkan dalam mengubah struktur, isi, atau still dokumen melalui kode javascript. Element tersebut dianggap sebuah pohon yang memiliki batang, ranting yang seolah olah disebut dengan struktur hierarkis yang merupakan child node dari element lain atau root node.

Untuk melihat object apa saja yang ada di document browser tersebut dengan menggunakan

console.dir (document);

untuk melihat element apa saja yang ada di web browsernya. Namun jika anda ingin mengambil element yang ada di halamn browser dengan

document.all[10]

untuk mendapatkan paragraf bisa menggunakan

document.all[10].innerText

Untuk memanipulasi nilai di halaman browser dengan cara

document.all[11].innerText = "Bird"

Daftar Isi Konten

+++++Document +++++

documentinimerupakanentrypointdarikeseluruhanobjekyangdimilikiolehDOM, danmenjadikanrepresentasidariseluruhkomponenenyangadadalamhalamanwebyangmemilikiberbagaimethodyangdapatdimanfaatkan.Atau

Prosedure yang ada di Dokument yaitu dengan menggunakan Select With DOM dengan menggunakan 3 perintah umum

getElementById contohnya

document.getElementById ('banner')
const banner = document.getElementById ('banner')

console.dir (banner)

getElementByTagName contohnya

document.getElementByTagName ('img ')

const allImage = document.getElementByTagName ('img ');

for (let img of allImage){
console.log (img.src);
img.src='https://topik.my.id'
}

getElementByClassNamecontohnya

document.getElementByClassName ('square')

++++ QuerySelector ++++

digunakan untuk mengambil semua elemen baik itu menggunakan Id, tagname dan class name dengan menggunakan QuerySelector dapat menggunakan selector yang sama halnya seperti css. contohnya

Cari elemen h1 pertama dengan menggunakan

document.querySelector ('h1')

Anda bisa juga mengambil semua paragraf dengan menggunakan

document.querySelectorAll('p')

Cari element pertama dengan id bernilai “red” yang tentunya menggunakan hastag sama halnya seperti css

document.querySelector (#red)

Cari element pertama dengan class bernilai “big”

document.querySelector ('.big')

mencari element dengan tipe checkbox

document.querySelector('button [type = "checkbox"]')
document.querySelector('input [type = "checkbox"]')

++++++ Manipulate +++++++

DOM hanya bekerja dalam sebuah browser atau halaman web,setelah dokument diambil dapat diubah dengan menggunakan manipulate. Cara untuk menguasai dom harus sering menggunakan property atau fungsi tersebut. Bisa anda pakai yang sering digunakan nanti bakal hafal untuk menguasai dokument object model di dalam javascript

document.querySelector ('h1')
const heading = document. querySelector ('h1')

console.dir (heading)

heading.innerHTML
heading.innerText

const para = document.querySelector ('p')
para.innerText
para.textContent

untuk mengubah dan memanipulasinya anda bisa melakukan

para.innerText = 'ini kita ubah paragrafnya'

untuk mengubah html atau linknya bisa menggunakan

para.innerHTML = 'ini kita  ubah  pargrafnya.'

++++ Mendapatkan atribut yang dimiliki element html ++++

document.QuerySelector('banner').attributes

const banner = document.QuerySelector('banner').attributes
banner.id
banner.src
benner.alt ='gambar kucing'
banner.setAttribute ('class','isian-class')
banner

++++ Melakukan Styling Dengan Javascript Model ++++

const heading = document.querySelector('h1')

heading.style

untuk style tidak dapat dibaca karena beda allam, dapat dibaca stylenya jikalau di inline style

const links = document.querySelector('a')

links.style.color = ' rgb (0,108,134)''
links.style.textDecorationColor = 'magenta'

++++++ Memanfaatkan Classlist Untuk Styling Dengan Dom +++++

const heading = document.querySelector('h1')

h1.setAttribute('class','bg-info')
h1.getAttribute ('class')
let currentValue = h1.getAttribute ('class')
1.setAttribute('class','${currentValue}border-danger')
akan tertimpa jika menyimpan style lain. agar tidak tertimpa anda bisa menggunakan
h1.classlist
h1.classlist.add ('border-danger')

untuk menghapsunya and bisa menggunakan

h1.classlist.remove ('border-danger')

sehingga anda tidak harus membuatnya di inline element.Anda

++++ Menjelajahi Element Parent, Child Dan Sibling ++++

untuk mengakses element parent atau element turunannya dengan menggunakan properties dan method
untuk mengakses element di dalam paragraf bisa menggunakan cara sebagai berikut

const textBold = document.querySelector('b')

element apa yang membungkus atau parentnya dari texbold ini

textBold.parentElement

anda bisa mencari parent element diatasnya

textBold.parentElement.parentElement

untuk melihat turunannya bisa menggunakan

const paragraf =textBold.parentElement

paragraf.children
paragraf.children[6].children

const squareImg = document.querySelector('square')

squareImg.previousSibling

previousElementSibling = melihat element yang dicari sebelum imagenya
nextSibling = melihat apa yang dicari setelah imagenya
nextElementSibling = melihat elemet imagenya

+++ Memahami Append dan Appenchild +++

bisa menambahkan element baru di posisi yang akan anda inginkan dengan menggunakan Append

document.createElement('img')
const newImage = document.createElement('img')

newImage.src = ' https://topik.jpg'

document.body.appendChild(newImage)
newImage.classList.add ('square')

apa beda appendChild dengan Append

const paragraf. document.querySelector('p')
paragraf.append ('cat</>') // dan ditambahkan di akhir element

const h2 = document.createElement('h2')

h2.append('this is about cat')
const h1 = document.querySelector('h1')

h1.insertaAdjacentElement('afterend',h2)

+++++ Memahami Remove Dan Removechild +++

Menghapus suatu element di DOM menggunakan remove child dan remove

kita harus menseleksi objek yang harus diseleksi, pilih dulu parentnya baru dihapus

const firstli = document.querySelector ('li')

firstli.parentElement
firstli.parentElement.removeChild (firstli)

bisa menggunakan element remove dengan browser chrome terbaru, contohnya dengan menghapous gambar

const img = document.querySelector('img')
img.remove ()

+++ Latihan Memanggil Pokemon Dengan Dom +++

menampilkanjenispokemonyangdiambildigithubPokeAPIdengantipepng
denganurl’https://github.com/PokeAPI/’andabisacloneatauunduhdantaruhdidalamvisualcodeyangandamiliki

andabisamembuatindekhtmlbiasadanmenambahkanscripjavayangberisiperintahdanmeletakkanyadidalam

const container = document.querySelector('#container');

const baseImgURL = 'https://raw.githubusercontent.com/PokeApi/sprites/master/sprites/pokemon/';

for (let i = 1; i <= 500; i++){
constpokeBall=document.createElement ('div');
pokeball.classlist.add ('pokemon');
container.appendchild (pokeBall);

constimgPokemon=dokument.createElement('img')
imgPokemon.src='${baseImgURL} $ {i}.png';

constlabel=document.createElement ('span')

label.innerText='#${i}'

pokeBall.appendChild (imgPokemon);
container.appendChild(label)
container.appendChild(pokeBall)

}

+++++ Event Menindaklanjuti inputan atau perintah pengguna +++++

Event dapat melakukan suatu proses inputan yang dikirimkan oleh pengguna contoh kecil yang digunakan event adalah DragEvent, drop, click, scrool, print halaman inilah contoh event yang digunakan pada document object model

++++ Contoh Beberapa Event +++

contoheventinlinedihtml

<button>Click SAYA!</button>

++++MenjalankanEventMelaluiPropertyDom++

contoheventinlinedihtml

constbutton=document.querySelector(#clickme)

button.onclick=function(){
console.log ('you click me');

}

constscream=() => {
console.log (' Dont Touch Me');

};


button.onmouseover=scream;

untuk element di html seperti dibawah ini

<button id="clickme">Click SAYA!</button>

++++ Mengenal Fungsi Addeventlistener ++++

const eventbtn = document.querySelector ('#eventbtn');
eventbtn.Addeventlistener ('click',stepSatu);
eventbtn.Addeventlistener ('click',stepdua);




evenbtn.Addeventlistener ('click', function ()) => {
alert ('you clicked me!')
}

jika anda menambahkan dua properti function dalam element anda bisa menambahkan di wadah variabelnya

untuk html menggunakan html sebagai berikut

<button id="eventbtn">event listener button</button>

++++ Latihan Addeventlistener Untuk Generate Color +++

Melakukan genarate warna pada function rgb
membuat html biasa untuk button Generate

<button> generate </button>

Mengambil object button dengan query selector

const button = document.querySelector('button')
const h1 = document.querySelector ('h1')

button.Addeventlistener ('click,() =>'{
constnewColor=generateRamdomColor()
document.body.style.backgroundColor=newColor
h1.innerText=newColor;
console.log (newColor);

});

const generateRandomColor = () => {
constr=Math.floor (Math.Random ()*255);
constg=Math.floor (Math.Random ()*255);
constb=Math.floor (Math.Random ()*255);
return'rgb(${r}, ${g}, ${b})'
};

+++ Manfaatkan Keyword This Pada Event Dom ++++

const generateRandomColor = () => {
constr=Math.floor (Math.Random ()*255);
constg=Math.floor (Math.Random ()*255);
constb=Math.floor (Math.Random ()*255);
return'${r}, ${g}, ${b}'
};

<button> generate </button>
<button> generate </button>
<button> generate </button>
<button> generate </button>
<button> generate </button>
<button> generate </button>
<button> generate </button>
<button> generate </button>

Dengan membuat style button
button

 {
width : 100px;
height : 100px;
margin : 20px;
}

Melakukan pemberian efek pada function

const buttons = document.querySelectorAll('button')

for (let button of buttons){
button.addEventListener ('click',() =>{
button.style.backgroundColor=generateRandomColor();


});

function colorize (){
this.style.background=generaterRandomColor ();
this.style.color=generateRandomColor();
}

+++ Belajar Keyboard Event Dan Mengenal Object Dalam Event +++++

Even menindaklanjuti atau perintah pengguna
anda bisa membuat html terlebih dahulu

<button> click </button>
<input type="text" />

kemudian anda bisa membuat js dulu dibawah ini

document.querySelector( 'button').addEventListener ('click', (e)=> {
console.log (e);

})

const input = document.querySelector('input');
input.addEventListener ('keydown', (e) => {
console.log (e.key);
console.log (e.code);
switch (e.code){




case'Arrowup': //untuk tombol atas yang akan diprint
console.log ('Tombol Arah Atas');
break;
}
});

input.addEventListener ('keyup', () => {
console.log ('Tombol dirilis');
});

++++ Mengenal Event Preventdefault ++++

Membuat form sederhana di html, kemudian biasanya kalau inputkan form langsung ke halaman lain, bagaimana caranya agar tetap ada ditempat ketika diinputkan form yaitu dengan menggunakan event ini. Contoh htmlnya form

<form id="submitted" action="/destination">
<input type="text" /> <button>Submit</button></form>

harusnya pindah ke destinasi apalagi detinasinya gak ada, harusnya tidak kemana-mana lagi dan prosesnya bisa berjalan dengan javascript
Preventdefault mencegah suatu action untuk tidak ke menu selanjutnya

const form = document.querySelector('form');
form.Addeventlistener ('submit'), function (e){
e.Preventdefault();
console.log (submittedform);

}

begitu juga anda bisa membuat a href tanpa kemana mana atau refresh halaman dengan prevent ini

contoh htmlnya adalah

<a href=" http://google.com"> link</a>

kemudian anda bisa buat js seperti dibawah ini

document.querySelector ('a').addEventListener ('click', (e) =&gt; {
e.preventDefault ();
console.log ('harusnya ke google');
});

++++ Praktek Input Realtime Dengan Event Dan Dom ++++

dan biasanya event tersebut jika di click akan berpindah ke suatu halaman, kenapa prevent default ini ada, contohnya untuk menambahkan suatu inputan secara realtime tanpa ada refresh page anda bisa buat htmlnya seperti dibawah

<form id="submitted" action="/destination"><input type="text" />
<button>Submit</button>
</form>
<ul id="notes"></ul>

kemudian untuk JS Domnya seperti dibawah ini:

const form = document.querySelector ('#form');
const input = document.querySelector ('input')
const list = document.querySelector ('#notes')




form.Addeventlistener ('submit'), function (e){
e.Preventdefault();
constnoteValue=input.value;
constnewList=document.createElement ('li')
newlist.innerText=noteValue;
list.append (newList)
input.value = '';
};

+++++ Event Input Dan Change Pada Form ++++++

kita akan mengenal event listerner change dan event listener inputan pada proses yang telah dibuat sebelumnya

const form = document.querySelector ('#form');
const input = document.querySelector ('input')
const list = document.querySelector ('#notes')

event input dan change yang menggunakan proses sebelumnya atau memanfaatkan object yang sama sebelumnya

input.addEventListener ('change', (e) => {
console.log (' Nilai Berubah');

})

akan terjadi bila kita menginput formnya dan juga tidak akan berubah kalau tidak menginputkan ulang

input.addEventListener ('input', (e) => {
document.querySelector('h1').innerText=input.value;
console.log (' Nilai Berhasil diinput');

})

form.Addeventlistener ('submit'), function (e){
e.Preventdefault();
constnoteValue=input.value;
constnewList=document.createElement ('li')
newlist.innerText=noteValue;
list.append (newList)
input.value = '';
};

+++++ Mengenal Event Bubbling +++++

event akan berjalan secara berantai, jika ada satu element dan satu event, button memiliki suatu elemen yang dibungkus paragraf yang memiliki alert dan akan dieksekusi secara bersamaan coontohnya html berikut ini

maka keduanya akan dilakukan bersamaan alertnya. bagaimana jika ingin dilakukan secara tidak bersamaan

<div id="container">Click to Hide<button id="ChangeColor">Change Color</button>
</div>

maka keduanya akan dilakukan bersamaan alertnya. bagaimana jika ingin dilakukan secara tidak bersamaan

const button = document.querySelector ('#ChangeColor')
const container = document.querySelector ('#container')

button.addEventListener('click', function (e){
container.style.backgroundColor=e.stopPropagation();

})

container.addEventListener ('click', function (){
container.classList.add ('hide');
})

const generateRandomColor = () => {
constr=Math.floor (Math.Random ()*255);
constg=Math.floor (Math.Random ()*255);
constb=Math.floor (Math.Random ()*255);
return'rgb(${r}, ${g}, ${b})'
};

++++ Mengenal Event Delegation ++++

Event delegation ini adalah yang mewakili suatu element yang dikenakan oleh event listener yang dieksekusi adalah hal lainnya. Dengan menggunakan html sebelumnya

<form id="submitted" action="/destination"><input type="text" /> 
<button>Submit</button></form>
<ul>
<li style="list-style-type: none;">
<ul>
<li>Satu</li>
</ul>
</li>
</ul>
&nbsp;
<ul>
<li style="list-style-type: none;">
<ul>
<li>Dua</li>
</ul>
</li>
</ul>

Untuk file jSnya sebagai berikut

const form = document.querySelector ('#form');
const input = document.querySelector ('input')
const list = document.querySelector ('#notes')




form.Addeventlistener ('submit'), function (e){
e.Preventdefault();
constnoteValue=input.value;
constnewList=document.createElement ('li')
newlist.innerText=noteValue;
list.append (newList)
input.value = '';
};


list.addEventListener ('click',(e) => {
e.target.remove();
});


const lis = document.querySelectorAll ('li');
for(let li of lis){
li.addEventListener('click', function(){
li.remove();
});
}

Latihan DOM Membuat Papan Skor Bag

membuat papan scor dengan DOM dengan membuat index html terlebih dahulu didalam body

<div class="scoreboard container d-flex flex-column justify-content">
<div class="row -row-cols-1 row-cols-md-2 text-center py-5 justify-content-center"> 
<div class="col col-auto py-3 points d-flex flex-column align-items-center">
<h2>Player 1</h2>
<p class="px-3" id="p1-display">0</p>
<div class="score-btns">
<button class="btn btn-primary" id="p1-button">+1</button>
</div>
</div>
<div class="col col-auto py-3 points d-flex flex-column align-items-center">
<h2>Player 2</h2>
<p class="px-3" id="p2-display">0</p>
<div class="score-btns">
<button class="btn btn-primary" id="p2-button">+1</button>
</div>
</div>
</div>
<div class="d-grip gp-2 col-6 col-md4 mx-auto pb-5">
<select name="" id="winpoint" class="form-select">
<option value="5">5</option>
<option value="10">10</option>
<option value="21">21</option>
</select>
</div>
<div class="d-grip gp-2 col-2 col-md-4 mx-auto pb-5">
<button class="btn btn-primary" id="reset">reset</button>
</div>
</div>

// Kemudian anda membuat javascript

const p1button = document.querySelector("#p1-button");
const p2button = document.querySelector("#p2-button");
const p1Display = document.querySelector("#p1-display");
const p2Display = document.querySelector("#p2-display");
const resetButton = document.querySelector("#reset");
const winPointOption = document.querySelector("winpoint");




let p1Score = 0;
let p2Score = 0;
let winPoint = 21;
let isGameOver = false;




function reset() {
isGameOver=false;
p1Score=0;
p2Score=0;
p1Display.textContent=0;
p2Display.textContent=0;
}




p1button.addEventListener("click", function () {
if (!isGameOver) {
p1Score += 1;
if (p1Score === winPoint) {
isGameOver=true;
}
p1Display.textContent=p1Score;
}
});




p2button.addEventListener("click", function () {
if (!isGameOver) {
p2Score += 1;
if (p2Score === winPoint) {
isGameOver=true;
}
p2Display.textContent=p2Score;
}
});




resetButton.addEventListener("click", reset);
winPointOption.addEventListener("change", function () {
winPoint=parseInt(this.Value);
reset();
});

Penutup

Semoga dengan sedikit artikel belajar tentang DOM Javascript ini menambah pengetahuan anda dalam belajar pemrograman.