Javascript & DOM #5 - DOM Manipulation (Part 1)

[@knzamy]

Saya dari Malaysia. kalau saya masih muda, memang saya akan ke indonesia untuk kuliah bersama pak dika.. Mantap sekali.. saya dulu dosen saya tidak sebegini.

[@muridkajew6120]

Kenapa channel yang sangat bermanfaat dan bermutu seperti ini dkk semua subscribernya lebih dikit jika dibandingkan yang hanya have fun

[@darwisrevih6827]

Untuk membantu belajar. Start 00:19 Topik 01:10 Method di Manipulasi Element 02:05 innerHTML 04:00 style properti css 08:26 setAttribute 09:56 getAttribute 13:35 removeAttribute 14:32 classList pre 15:08 classList 17:01 classList.add() 18:13 classList.remove() 19:12 classList.toggle() 19:40 classList.item() 22:22 classList.contains() 23:40 classList.replace() 24:09 Done 24:56 Noice :)

[@kaumborjuis8953]

Kerenn 🔥

[@sergiomoses8493]

Thanks

[@ekiprastyan560]

Semoga jadi amal jariah bapak sandhika aminn

[@grayos14]

Alhamdulillaah.. tidak perlu cari" referensi lain tinggal menyimak Pak Sandhika langsung bisa paham.. Terima kasih Pak :)

[@prasetyoerdi6126]

alhamdulillah mulai ngerti banyak.

[@alifnurrohman9940]

Mantap pak Dhika, padahal saya masih newbie baru masuk SMK, tapi penjelasannya masuk ke otak semua, trimakasih pakk

[@JaluPratamaa]

Mantaps, langsung mengerti

[@budi-dev8814]

Mantap pak, semoga membawa manfaat dan kebaikan untuk kita semua

[@imadevictor]

Trimakasih bang dika atas share ilmunya sangat membantu buat saya yang otodidak

[@essekupse]

Terima kasih Pak atas ilmunya. Sangat detail sehingga saya bisa paham

[@adhy612000151]

Makasih Bang... semuanya keren lah...

[@herlanmustopa4796]

Mantap...Terbit juga

[@khalifahhafidh9613]

buat yang baru belajar juga, saran saya coba lanjutin dulu kelist js lanjutan terutama di bagian constructor object, sama prototype. jadi lebih paham semua hal yang dapar dimanipulasi dari suatu elemen html

[@khairulimam4161]

Maksudnya sebelum nonton ini, nonton js lanjutan dulu bang?

[@johanesalberto6136]

Terima kasih banyak pak sandhika

[@Studi_kasus]

Keren pak

[@hanmuid9387]

Hatur nuhun Pak Dhika

[@Ashkrik]

Hadir,, Mantap!!!... suksess... selalu...

[@willyrumapea4438]

ternyata mirip logika percabangan if method classList.toggle. terimakasih pak dhika

[@wandaazhar]

mohon izin menambahkan pak. buat temen temen jika ingin menambahkan agar bisa di enter seperti di file html biasa, silahkan menggunakan tanda backtik ` (disamping angka 1) supaya tidak error. seperti di menit ke 08:00

[@kyousukehasegawa6886]

setalah dicoba disamping angka 1 gagal. coba disisipkan di awal dan di akhir single quote( ' ), gagal juga. coba cari dan ketemu di stackoverflow(string interpolation, meskipun saya masih kurang paham artinya karena dari gtranslate artinya interpolasi string), ternyata posisinya tetap di awal dan di akhir tetapi menggantikan single quote( ' ) yg saya gunakan biar bisa nulis kebawah. terima kasih mas informasinya :)

[@Kalisilie]

terima kasih ilmunya

[@jovankaalexand2154]

Nice

[@syahdanmasyhuri7244]

Terimakasih pak dikha ilmunya sangat bermanfaat 👍jadi pengen kuliah di unpas hehehe

[@Abdulaziz-qb8eg]

Mantaps, sangat membantu sekali. Boleh dong bikin video tentang frameworknya pak dika.

[@danielherysetiawan657]

terima kasih.....

[@akbararam4306]

Terimakasih pak ilmunya sangat bermanfaat😄

[@sapeikids984]

Mksh pak sandika, lanjut trus

[@nabillaaaaa]

Terima kasih pak

[@wibowomuhmmad]

Lanjutt wkwk, day -3

[@sukronalmahdi3066]

Yang nonton 2023 dong?

[@mhdrifqi6895]

2024 hadir bro

[@aminullah6512]

2024 bosss

[@rajunwiramulyono7390]

Halo saya dari masa depan 2025

[@zorrobasher2947]

Thankyou Pak

[@kertasputih7482]

Bayangin bang gara-gara Corona, dosen gua suruh buat tugas ngrangkum video lu semua 😩😩

[@sandhikagalihWPU]

😅😅 serius?! "semua" tuh gimana ceritanya?

[@kertasputih7482]

Serius bang, enggak semuanya sih tapi udah sekitar 20an lebih materi web client suruh ngrangkum video-video elu 😅

[@gimmegame0]

Saya nonton materi ini lagi. Karena shadow dom

[@sapiqiuchannel4289]

makasih pak dika, mantaff

[@rudynisanr8694]

Is the best

[@muhammadsatriaherman5504]

Mantap

[@mrcuplacuplis1697]

mantap

[@ininamakokharusdijarak6815]

// keren~

[@koiseduluran]

Thanx you

[@artmosphereID]

seharusnya sbelom masuk kursus javascipt, saya nonton channelnya pak dhika dulu biar gak keteteran hiks

[@muhammadnurulhuda2737]

Terimakasih Pak (y) :)

[@sanspubgmobile3940]

Mas Buat Tutorial Web Scrapping atau Grab dong Mas

[@coheng.11]

akhirnya,,

[@sariyanto744]

hadir pak dhika. pak kok hanya 1 videonya minggu ini pak. udah kangen mau belajar dom pak he..he..

[@imamsubagja8829]

bang dika, buat tutorial tentang bootstrap dong bang, please, saya cari tutor di channel lain susah ngerti

[@fandiks]

bahas react dong pak hehe

[@tyrxbryh3571]

Pak request untuk tutorial android studio dong

[@ihsannurulhabib9729]

Nuhun pa Dhika :D

[@ilhamprabuzakys]

Saya bingung mau nanya apa, soalnya bapak pandai mengajarnya😅

[@annascahwetan45]

pak saya menmgajukan pertanyaan

[@MuhammadHijri25]

pak kalau mengubah class yg pertama menggunakan classList.replace() itu gk bisa y pak ?

[@munasirinsirin2737]

Mas jelasin method pos

[@rodhmcluzec2029]

Punten minta sarannya agar saya selalu merasa ingin belajar bahasa pemrograman tuh gimana ya?

[@ilhamvocalovi6879]

Kalonya emng bukan passionnya mending jangan dipaksain, ntar ujung-ujungnya malah nyesel

[@eula_23]

Maksud dari HTMLCollection itu live dan NodeList tidak, itu apa maksdunya pak?

[@wahyuonoalfian9740]

Jangan lupa tonton iklannya.

[@afifudin780]

pak dika mau tanya. di vidio 7:20 (document.querySelector()) knpa ga di kasih index jga ya? sementra di vidio ke #4 di jelasin kalau (document.querySelector) menghasilkan element dan harus di kasih index?

[@breasthopper]

Yang make index kan cuma querySelectorAll bang, yang di video #4 querySelector ada indexnya itu kan karena milih child dari li jadi harus ada indexnya. *ralat : ga harus ada indexnya, tapi karena milih child ke-n jadi harus isi.

[@malvinval]

itu bukan index mas, itu menggunakan nth-child() dan membutuhkan parameter berupa urutan li nya.

[@pn6862]

Bang saya belum mengerti tentang serching di php

[@fauzan5448]

pak update dong javascriptnya ke 2020

[@nailasoimakamila8956]

Bingung semua, jadi gak tau mau nanya apa😢

[@remixerganemat]

Gimana dengan. (setElemenBayId)?

[@imaduddin5395]

berarti innerHTML itu bisa dimasukan script juga yah pak, kalo ada script yang fungsinya ngambil data website bahaya gk pak?

[@romdhaniromdhani2515]

Pak.. Ini dom bisa dipakai untuk membuat games enggak ya pak? Oiya pak, untuk yang latihan membuat gamea suit itu judulnya apa ya pak? Saya pernah lihat cuma lupa.

[@sandhikagalihWPU]

bisa banget, nanti kayanya kita bakal bikin game sederhana juga.. ini linknya : kzbin.info/www/bejne/g57JZIaOfc6ZeNk

[@romdhaniromdhani2515]

Web Programming UNPAS apakah games seperti flappy bird, tic tac toe, pacman, hangman, congklak, dinosaurus chrome, snake bisa menggunakan teknik dom pak? Saya jadi enggak sabar nih pak mau lihat games apa yang bisa dibuat pake teknik dom. Oiya pak, kalau besok lusa saya ke bandung. Saya mau mampir nih ke unpas mau jadi mahasiswa bohongan bapak untuk satu hari aja boleh ya pak?. Karena saya mau belajar guna meningkatkan diri dari pengajar ecek2 menjadi dosen seperti bapak.

[@syahritahir6883]

kalau mau menampilkan nilai dari input tipe radio ke textbox, caranya gimana yah pak? mohon bantuann.

[@frensiatanagaanaclaudia1258]

Hallo Pak Shandika saya ada pertanyaaan di menit ke 12.21 Itukan setattribute kita mau nambhin atribute contoh ('name' , 'shandika') Kenapa pakai koma ya ? Bukan = jadi( 'name = shandika') Tapi malah , Trimakasih

[@malvinval]

memang sudah aturannya syntaxnya ya kak :')

[@reyhanalsauqi2163]

jadi ketika kita mencari sebuah item menggunakan classList untuk urutan angka awalnya menggunakan 0 atau 1

[@reyhanalsauqi2163]

????

[@myproject8493]

0

[@mroyase7579]

maaf pak tolong ngoding nya di vscode aja. kalau di console saya rada ga mudeng dan berantakan(jujur). jika bisa remake video ini dan full ngoding di vscode pak. bila dikabulkan moga berkah pak

[@idulkadir5819]

maaf pak Dika, bagaimana cara mengganti innerHTML dengan style yang sudah dibuat di halaman css?

[@malvinval]

const x = document.querySelector(''); x.innerHTML = 'teks ini diubah'; x.style.color = 'crimson';

[@nailakhalida9151]

bapakk aku mau tanya, ko di console aku getElementById nya not defined yaa ;(

[@informationunfaedah7071]

React js pak

[@fajaradepamungkas8620]

Permisi pak. Saya mau tanya tentang seberapa banyak suatu element HTML dapat menampung sebuah class

[@malvinval]

banyak ya pokoknya :D silahkan coba tambahkan berkali-kali dengan method element.classList.add() dan lihat berapa daya tampungnya

[@dassault8203]

gk setiap senin lagi pak.. lagi sibuk yaa :3

[@_wahyuirawan0902]

saya nyoba manipulasi AdminLTE tapi ga berubah. apa sy yg salah apa memang itu sudah dipakem ga bisa diubah

[@robyandreansyah9182]

Permisi pak Dhika mau nanya? Manipulasi element di video kan cuma ada 4 yg dipelajari sedangkan kata pak Dhika bilang kalo manipulasi element masih byk lagi. Jadi saya mau nanya pak, cari referensi manipulasi element lainnya dimana ya? Makasih pak.

[@sandhikagalihWPU]

coba cek disini : www.w3schools.com/js/js_htmldom.asp

[@FMATheQuiet]

tapi pak kenapa saya udah nulis gitu di html nya gak bertambah attr nya const p2 = document.querySelector('.p2'); p2.setAttribute("name", "label"); di konsolnya, gak error cuman gak bertambah doang

[@Muhy5567]

p2.setAttribute('name' ,'label');

[@thoriqabdul5557]

pak dika maaf pertanyaannya keluar dari pembahasan, javascript bisa connect ke database ga ya?

[@sandhikagalihWPU]

Secara langsung tidak bisa, butuh bantuan bahasa / teknologi lain seperti php atau node.js

[@shintafiaa]

21:28 punten, izin bertanya, kenapa di saya background body ndak bisa berubah biru ya teman2, dan bapak(?) File CSS: .biru-muda { background-color: lightblue; } Console: document.body.classList.toggle('biru-muda');

[@johanliebert9662]

"lightblue", karena tidak menggunakan petik dua

[@erlanggarizky4216]

erlangga_hadir

[@jokerxd5911]

#ask. pak dhika maaf mau tanya saya coba di consule browser mozilla firefox yang p2.ClassList.replace('tiga', 'empat') kok gak bisa ya?? tulisannya gini TypeError: p2.ClassList.replace is not a function maaf masih newbie🙂

[@leravio]

itu cuma kesalahan pada penulisan class yang seharusnya 'c' itu huruf kecil. Jadi kayak gini p2.classList.replace('tiga', 'empat')

[@tinker_tailor]

@@leravio #ask judul.classList.replace('lama', 'baru'); Kok masih muncul pesan error? replace is not a function

[@faledemy]

maff pa dika,jika kita mengunakan innerHtml lalu di elemen nya di ganti dengan tag div class bisa ga ya?

[@malvinval]

bisa, asalkan selectornya juga harus sesuai sama target manipulasi.

[@yanesreksandi2835]

Vanilla js itu apa pak? Dan cara pakenya bagaimana?

[@sandhikagalihWPU]

vanilla js itu javascript murni / polos tanpa library atau framework (seperti jQuery).. yang kita lakukan di video ini contoh vanilla javascript.. :)

[@guadownload9354]

pak bedanya library sama framework apa ya? saya belom ngerti2 perbedaannya, menurut saya soalnya sama aja :D makasih pak, tolong dijawab.

[@ahmadnurrizal225]

GGWP

[@dlist6132]

hmmm mungkin kah ini cikal bakal dari tumbul like dan sodara-sodaranya berasal???????? interisting interisting

[@iqb_qb2120]

Kenapa pakek id Kok ga pakek Class..?

[@-Almarhum]

C/C++ Please

[@sandhikagalihWPU]

cek channel youtube "Kelas Terbuka"

[@edwardangelino1350]

17:11

[@andryantoaman]

SAh..

[@muhamadnazir1369]

pengen bnget skolah programer tp ng ad duit☹️

[@muhammadsupriyadi1622]

ada kok yang murah

[@yusrila_]

Pak no WA

[@rohmatht1086]

Mantap

[@teguhbadrusalam295]

mantap

[@frensiatanagaanaclaudia1258]

Hallo Pak Shandika saya ada pertanyaaan di menit ke 12.21 Itukan setattribute kita mau nambhin atribute contoh ('name' , 'shandika') Kenapa pakai koma ya ? Bukan = jadi( 'name = shandika') Tapi malah , Trimakasih

[@malvinval]

memang sudah aturannya syntaxnya ya kak :')

[@frensiatanagaanaclaudia1258]

@@malvinval terimakasih

[@malvinval]

@@frensiatanagaanaclaudia1258 sama sama, maaf telat jawab :)

[@frensiatanagaanaclaudia1258]

Hallo Pak Shandika saya ada pertanyaaan di menit ke 12.21 Itukan setattribute kita mau nambhin atribute contoh ('name' , 'shandika') Kenapa pakai koma ya ? Bukan = jadi( 'name = shandika') Tapi malah , Trimakasih

[@malvinval]

memang sudah aturannya syntaxnya ya kak :')