Javascript & DOM #10 - DOM Traversal

Di video kali ini kita akan membahas mengenai DOM TRAVERSAL atau PENELUSURAN pada DOM.
---
DOWNLOAD SOURCE HTML & CSS
codepen.io/web...
---
PLAYLIST Javascript & DOM :
• Javascript dan DOM (Do...
---
PLAYLIST LAIN:
HTML Dasar
• HTML Dasar
CSS Dasar
• CSS Dasar
Tutorial Sublime Text
• Tutorial Sublime Text 3
CSS Layouting
• CSS Layouting
Dasar Pemrograman dengan JAVASCRIPT
• Dasar Pemrograman deng...
Belajar PHP untuk Pemula
• Belajar PHP untuk PEMULA
---
MEDIA SOSIAL
/ sandhikagalih
/ webprogrammingunpas
codepen.io/webp...
github.com/web...
/ sandhikagalih
---
UNIVERSITAS PASUNDAN BANDUNG
www.unpas.ac.id/
www.if.unpas.ac...
terimakasih dan selamat #ngoding!
@sandhikagalih

[@zAkezONe]

8:00 beda cara tapi sama-sama berhasil
const closed = document.querySelector('.close');
const hidden = document.querySelector('.container');
closed.addEventListener('click', function() {
hidden.setAttribute('hidden', '');
});
chanel terbaik emang

[@kaumborjuis8953]

efektif dengan kata lain tidak perlu mendeklarasi setiap node, berguna banget nih pak

[@muhammadadekurnia4207]

Ini Channel Pemrograman Web Terbaik menurut saya 😍

[@reksamohammad6941]

apakah jika kita menulis e.target.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.parentElement.style.display = 'none';
laptop kita akan menghilang?
engga pak, saya bercanda.
sukses terus buat channel ini, sangat membantu sekali buat temen - temen belajar ilmu programming. Terimakasih pak dhika.

[@m.jamilrahman4971]

body

[@farsikogama6114]

haha

[@ilhamprabuzakys]

programmer joke :>

[@drichas7270]

inet provider : ' are u kidding me ?? '

[@dlist6132]

Anda sukses membuat saya tertawa 😂

[@iko1164]

Saya selalu menunggu vidio berikutnya
Alnya keren dan mudah dimengerti

[@iketutjaya4597]

Saya gak mau ketinggalan videonya pak...
👍👍

[@IGEDEWICAKSANA]

pak Dika, video sebelum koding dong. Misalnya waktu ngedesign, merancang, persiapan tool(library, database, framework, dll),dan lain lain biar engga asal koding. Tapi sebelumnya, terima kasih banyak buat video tutorialnya

[@joshuaimmanuel9407]

let container = document.querySelector('.container');
let card = document.querySelector('.card');
let tombolX = document.querySelector('.close').addEventListener('click',function(){
container.removeChild(card);
});
yg buat menghapus card

[@sapiqiuchannel4289]

javaScript luarbiasa yaaaa...

[@fajrie9396]

Keren . .di tunggu yg selanjutnya

[@NGprime]

Mantap kang dika channel nya, udah setahun lebih ngikutin,
mau share dikit kang, cara menghapus card
let container = document.querySelector(".container");
container.addEventListener("click", function(e){
if(e.target.classList.contains("close")){
e.target.parentElement.remove();
}
});
Salam (jangan lupa titik koma) :)

[@ariosetiawan173]

sebelumnya juga aku lakuin ini waktu pause moment :D

[@joelhkbn]

script ini ringkas dan efisien sekali.. makasih utk ilmunya..

[@ridhoaditya8841]

Yap bener saya juga pake remove()

[@michaelsimbolon5366]

mantap Pak, walaupun makin kompleks tpi berasa keren
tambahan buat viewers, buat menggunakan browser yang terupdate agar tidak eror

[@muhyiddienrabbani7117]

mantap bapak, inshaAllah berkah

[@hamidtrend1155]

kereen pak dika, sharing cara konsep belajar pemrograman dong pak dika, sering latihan tapi perasaan ngga semudah pak dika yah, hehe

[@ifanzalukhu97]

pak dosen request Nodejs & Express dong

[@mohammadsjauhary9165]

Mantap pak, biasanya pake jquery ternyata kode aslinya seperti itu

[@luisly3187]

Pak dika, mungkin saya emg uda telat banget. Maaf tp saya ad beberapa saran untuk video bapak kedepannya supaya semakin mudah dimengerti termasuk oleh saya sendiri. Saran saya adalah kalau biasa dibagian penutup diberi kesimpulan atau penegasan kembali pak. Seperti contoh video diatas. misal kenapa kita menggunakan dom transversal? Knp ga langsung aj kita seleksi parentnya? Mungkin dikesimpulannya bisa dijelaskan bahwasannya " Keduanya emang benar tapi lebih efektif dan benar kalau menggunakan cara ini" . Terima kasih pak 👏. Semoga bisa terbaca pak dhika karna ni video da 4 tahun yg lalu hehe.
Note : komen ini dari saya pribadi karna saya keasikan denger penjelasan pas diakhir video eh lupa apa bedanya hehe

[@khalifahhafidh9613]

mmmm saya rasa sebenernya dibanding dengan dosen atau pengajar yang lain bagi saya bapak dhika
sudah sangat jelas dan baik hati yang mana ilmu yang bapak dhika share secara gratis. jadi rasanya kalau kita meminta lebih bnyak rasanya kurang tepat. kalau saya biasanya akan mencatat apa yang penting dari perkataan bapak dhika dengan cara mempause dimana kata kata yang perllu dicatat dan diulang ulang aja videonya. sekedar sharing sih. terima kasih bapak sudah membantu orang seperti kami yang sedang berusaha menuntut ilmu

[@ahmadnurarifin4914]

mantap pak . saya mahasiswa akuntansi . tapi lebih suka coding . lanjutkan trus berbagi informasi nya pak

[@buayadarat7860]

Keren bang, saya juga teknik mesin bg

[@hilmanfirdaus7139]

juaraa pisann

[@aksanraharjo]

Pak Dhika. Terima kasih ilmunya.
Mohon pencerahan. Saya sedang mencoba membuat Sales Order.
Disetiap baris ada 8 kolom. Isinya :
1. Nomor
2. Produk
3. Volume
4. Satuan
5. HJS (Harga Jual Satuan)
6. HJT (Harga Jual Total)
7. HMS (Harga Modal Satuan), dan
8. HMT (Harga Modal Total)
Baris2 ini ditambahkan dengan mengklik tombol "+ baris" dan dikurangi dengan mengklik tombol "- baris. Ini saudah berhasil.
Yang jadi masalah adalah :
HJT = Volume x HJS
HMT = Volume x HMS
Saya mengunakan baris code ini :
const hjs = document.querySelectorAll('.tbodyInput2');
const hms = document.querySelectorAll('.tbodyInput3');
for( let i = 0; i

[@alamsantikowibowo8624]

coba pake firebase untuk buat struktur datanya lebih mudah

[@tenangsantai02]

Alternatif lain :
const closeItems = document.querySelectorAll(".close");
for (const item of closeItems) {
item.addEventListener("click", (event) => {
event.target.parentElement.remove();
});
}

[@khusnimubarok100]

const close = document.querySelector('.close');
close.addEventListener('click',function(){
const contain = document.querySelector('.container');
contain.remove(close)
}); gini pak work

[@Ashkrik]

Hadir, sehat, maju, and suksess selalu...

[@adliroziqin868]

gandeng

[@coheng.11]

semangat terus bikin video nya pak dosen,, 💪💪💪

[@rudynisanr8694]

Wah mantap pak dika

[@nothought9750]

KERENNN

[@rizwansetiawan7972]

Const Remove = document.querySelector('.perasaan');
Const klik =document.querySelector('.onklik',
Remove.addEvenListener('click',function(){
Klik.style.display='none';)}

[@becakdarurat1367]

const x = document.getElementsByClassName('close')[0];
const container = document.getElementsByClassName('container')[0];
x.addEventListener('click',function(){
container.style.display = 'none';
});
gk nyangka sama dengan sama pak dika awowkk

[@syawqiarroyan3606]

mantap pak

[@hanmuid9387]

Terima kasih pak. Semoga lancar terus urusannya.
Amal jariyah nih :D

[@elisadoa8381]

Nuhun bang dika

[@FMATheQuiet]

Pak Dika klo Pak Dika musisi dah saya pajang poto pak Dika dan logo WPU nya di kamar saya, Pak Dika nya sebagai vokalis di suatu band bernama Web Programming Unpas

[@LukmanulHakim_]

const hapus = document.querySelector('.close');
let kontak = document.querySelector('.card');
hapus.addEventListener('click',function(){
kontak.remove();
})

[@alzayrid8263]

kapan kapan main ke UNPAS ah, siapa tau ketemu Pa Dhika hehe

[@leung_rasta]

forEach itu rekursif kan yaa biasa menggatikan looping / bukan yaa ?

[@tarantulalabaz2294]

Terima kasih pak

[@shandybroom]

laravel dan eloquent nya ditunggu pak hehe

[@erizonadepratama4290]

Pak tutorial laravel dong

[@herisetyawan3857]

Kasih tutorial bahasa python dong ,pingin bisa bikin tool sederhana sendiri soalnya biasanya copas mulu

[@anahdagussandi5432]

pak ada rencana bikin tutor node.js ngga ?

[@ahmadnurrizal225]

mantap pak, ty
btw iklannya gak aku skipp bang heheee

[@hasanbasri-bs9su]

Kenapa pas saya implementasi eror ya..pas saya cek console value dari none nya yang buat erorrr

[@alimuqsith2239]

pa klo untuk looping dan fungsi addeventlistener di jquery gmna pa ??

[@yyirex]

izin bertanya pak, kalau dalam fungsi tadi yang paramaternya 'el' dan 'e' itu merujuk kemana ya? saya kurang paham

[@samanthatricia318]

23:16 nama.parentNode berarti harusnya juga spasi dong valuenya?

[@badcode8029]

nga kak, kalo parent langsung nunjuk siapa parentnya. kecuali kalo previousSibling mungkin hasilnya bakalan spasi dan enter

[@pemrogramandasar5528]

kalo pake perentElement kalo timbok X di click bener pak cardnya yang hilang cuman gimana menanggulangi user click bagian card jadinya kan isi dari containernya yang hilang?

[@fchannel9513]

Malam pak dhika, jika parent nya hanya satu gmna ya pak ? Terima kasih

[@ronnykn2108]

pak, kalau pakai SELAIN querySelector ketika X di click, gambar dan namaNomorHp masih ada, cuma DIV saja yg hilang kenapa ya?

[@kafkakhalis5494]

Cara membuat slider di web bagaimana pak dika ?

[@irawatipayapo836]

menghilangkan card -> tahun 2024
const card = document.querySelector ('.container');
card.addEventListener('click', function (){
const close = document.querySelector ('.close');
card.remove('close');
})

[@syifanurlatifah]

Functions declared within loops referencing an outer scoped variable may lead to confusing semantics. ({a})
pak kok saya ada tulisan ini, artinya apa ya?

[@joshuamanuputty8120]

lapor pak dosen
const card = document.getElementsByClassName("card")[0];
const close = document.getElementsByClassName("close")[0];
close.addEventListener('click', function(){
if(close.classList.contains("close")){
card.style.display = 'none';
}
});

[@nurPaujiana]

Pak punya saya toElemnent nya bernilai null, jadinya pas diolok malah ulang semua

ooh... mirip mirip dengan lookup kah?

[@harrypath6313]

Pak CI nya kapan yaa, klu boleh tw kita

[@hwchannel5104]

maaf sedang belajar
kenapa untuk forEach di teks editor vs code sekarang harus seperti ini
keluar = document.querySelectorAll('.close');
keluar.forEach((keluar) => {
keluar.addEventListener('click', function (e){
e.target.parentElement.style.display = 'none';
});
});
tidak bisa seperti pak dhika?

[@Putra-mg8yg]

variable close nya jgn di komentarin, yg ini const close = document.querySelectorAll('.close')

[@kepaprogaming7609]

mas buat java scrip hitung nilai max dan min nya mas .

[@FMATheQuiet]

Pak kenapa punya saya mah PointerEvent?

[@risanussy]

sensei>//

[@yusrila_]

#TANYAPADIKA pak dika lanjutin video php nya dong pak, kan video itu untuk pemula jadi pasti ada yang bukan pemulanya :) eak

[@naufaltrisubakti4881]

mending fokus ke satu cara cara biar ga bingung dan belibett

[@agusprema06]

baang tau tooltip gak? kalo tau buat tutorialnya dong!

[@yogabenrc3631]

pa sandika apakah link source codenya bisa diperbarui ? soalnya tidak bisa di download

[@hanafiilham7081]

const close = document.querySelectorAll('.close');
close.forEach(function(btn) {
btn.addEventListener('click', function() {
btn.parentElement.remove();
});
});

[@wibowomuhmmad]

day ke ga tau brapa wwkkw, learn DOM

[@vebe3381]

aneh gua jd cepet ngerti kalo gua nntn sambil maen game -__-

[@apayanamanyaadayangpunyaid9800]

Giman caranya biar tau posisi sebuah elemen/cordirnat nya gitu gimana caranya ya?

[@axelwangg]

itu ada di playlist ini yg sebelumnya, yg "DOM Events".

[@apayanamanyaadayangpunyaid9800]

@@axelwangg itu bukan nya mouse apa sama cara nya sama yang mouse?

[@kangkoment100]

kok sama aja ya kayak panggil querySelector langsung ke id/class nya ?

[@ariosetiawan173]

benar tapi dalam hal ini pada kasus tertentu kita lebih mudah menggunakan fungsi2 traversal, agar tidak selalu menyeleksi satu persatu element yang dimaksud, cmiiw

[@ininamakokharusdijarak6815]

// Dom Travel

[@nailakhalida9151]

pak kenapa chrome saya tampilannya beda ya pak sama punya bapak, padahal sourcecodenya jg udh copas dr bapak ;(

[@azkiafairuz4801]

Bedanya gmn

[@azkiafairuz4801]

Posisi nya kah?

[@azkiafairuz4801]

Coba gabung grup discordnya terus tanya kirimin photonya juga

[@thoriqabdoel6940]

pak dika kok kalo saya add elemnt terus mau remove element pake cara pak dika ga bisa? saya ikutin cara add element di vidio ke 3 di playlistt ini

[@sandhikagalihWPU]

ada muncul error ga di console nya?

[@thoriqabdoel6940]

engga pak dika, cuma waktu mgapusnya doang ga bisa

[@guadownload9354]

for(let i = 0; i < close.length; i++){
close[i].addEventListener('click', function(){
});
pak, mohon pencerahannya. saya tidak mengerti.
kalo tidak diklik kan pengulangannya sudah langsung habis, gmna ya pak?

[@neongenesis3574]

perbaiki cara bertanya dulu gan..

[@achmadjulian741]

Agak binggung nih, tapi ya emang bener, kan perulangan langsung dieksekusi

[@pattystealers5453]

mau tanya pak,
bedanya pake ini :
close.forEach(function(el){
el.addEventListener('click', function(){
el.parentElement.style.display = 'none'
})
})
sama ini:
close.forEach(function(el){
el.addEventListener('click', function(e){
e.target.parentElement.style.display = 'none'
})
})
apa ya ?

[@ropikiropiki4895]

Tapi bagaimana cara install .html to .apk tolong buat tutorialnya😕

[@ashandileonadi6724]

PWA (Progressive Web Apps)

[@widibmth]

const deletes = document.querySelector('.close');
deletes.addEventListener('click', function(e) {
const card1 = document.querySelector('.card');
card1.remove();
});

[@aslief9808]

const closeBtn = document.querySelectorAll(".close");
for (let i = 0; i < closeBtn.length; i++) {
closeBtn[i].addEventListener("click", function () {
closeBtn[i].parentNode.remove();
});
}

[@S0da0DA]

.style.display = 'none' bisa diganti .remove() kan?

[@nabillaaaaa]

Terimakasih pak