Javascript & DOM #6 - DOM Manipulation (Part 2)

Setelah di video sebelumnya kita belajar mengenai manipulasi elemen pada DOM, kali ini kita akan belajar memanipulasi NODE yang ada pada DOM menggunakan method2 di JAVASCRIPT
---
DOWNLOAD SOURCE HTML
codepen.io/web...
---
METHOD DOM LENGKAP oleh MOZILLA
developer.mozi...
---
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

[@muhammadsupriyadi1622]

pak pengertian dari vas bunga, bunga dan ruang tamu ilustrasi yang sangat mudah dipahami...mantap pak

[@alfianardiansyah6663]

Gak semuanya orang pintar bisa mengajar, bahkan sangat sedikit yang bisa. Terima kasih pak sandhika.

[@nandaglhp]

terima kasih tuhan sudah menuntun saya ke channel yt pak sandhika. saya jadi lebih mudah dan semangat belajar. semoga selalu menjadi berkat bagi banyak orang ilmunya pak, rezeki juga lancar. saya ga skip iklan 🙏🏻

[@ahmaddzakymakarim5243]

Hatur nuhun pak Galih seru pisann euyyy ngoding sareng bapak,, mugia sehat selalu🙏

[@petanibiasa3068]

guru terbaik saya belajar coding. penjelasannya mudah dipahami, bahasanya kompleks simple padat dan jelas. semangat pak, terimakasih atas ilmunya

[@iqbalfajry]

pak dika makasih banyak saya paham setelah beberapa kali ulang dan pahami. Semoga makain berkembang web programming Unpas

[@alfianhidayah6403]

ya alloh bapak mantap banget gampang difahamin dan sangat sabar pelan2, sehat selalu pak :D

[@muhamadkhairavi2148]

semoga disehatkan selalu ya pak
ilmu nya sangat membantu bagi yang belajar sendiri

[@imadevictor]

Terimakasih bang dika share ilmunya sangat bermanfaat

[@alfinosuroso4377]

0 Dislike menandakan video dan pengajaran bapak Mantap! Terimakasih Pak Sandhika...

[@Aditya-io7lu]

Video nya mudah dipahami dan sgt terstruktur, sya jadi mudah belajar nya hehe

[@tombaHopnyeh]

analogi vas bunga dan bunga nya keren pak

[@davidsimamora4508]

thanks for saving my life Sir

[@nandopookey9195]

Keren, terima kasih pak ilmunya

[@hanmuid9387]

Terima kasih banyak Pak Dhika. Penjelasannya sangat mudah dipahami :D

[@khusnimubarok100]

mudah dimengerti pak makasih ilmu nya pak 😊

[@Ashkrik]

Hadir.... Suksess selalu

[@mudisams9837]

makin keren kang dhika...

[@rudynisanr8694]

Ia pak di tunggu freamwork php nya

[@thiobakti2159]

Terima kasih Bro Sandhika Galih

[@willyrumapea4438]

keren pak terimakasih

[@muhammadyusufWidiyanto]

sehat selalu njih pak

[@alimuqsith2239]

terima kasih pa ilmunya

[@jshare1407]

Ditunggu framework laravelnya atau CI pak, yang paling banyak dibutuhin perusahaan web dev deh😅

[@ismaildesign1507]

Makasih pak dika atas tutorialnya

[@muhammadnurulhuda2737]

di tunggu video selanjutnya pak :)

[@wibowomuhmmad]

lanjut dom

[@Abdulaziz-qb8eg]

Mantap lah pokoknya mh

[@nathafahrezi189]

yang masih nonton ditahun 2024 bulan 11 ☝

[@Bramsiregar]

thanks ilmunya pak

[@neongenesis3574]

mantul pak...

[@dagimal]

Angular 4 dong pak 😆😆😆😊😊

[@budi-dev8814]

Mangap pak, sehat selalu

[@danielherysetiawan657]

terima kasih....

[@nabillaaaaa]

Terima kasih pak

[@Kalisilie]

tetap semangat nonton

[@matriks_yang_bikin_bingung]

Node.js pak, ke backend😂

[@muhammadnurulhuda2737]

Terimakasih Pak :)

[@zorrobasher2947]

Thankyou Pak :)

[@muhammadferdiansyah5015]

pak mau tanya misa saya ada class container yang didalamnya ada 3 buah class , trus saya mau ada 3 container yang sama menggunakan js gimana ya pak?

[@muhammadikhsan274]

Thanks Pak

[@olfiar8058]

Mau tanya, Pak. Koding js bagian Paragraf Baru saya bisa berjalan, tapi selain itu tidak ada yg bisa jalan (add Judul Baru, remove link, dan replace), Pak. Dan saya sudah periksa semua kodenya dari awal 2x tapi tetap tidak jalan. Mohon bantuannya.

[@sandhikagalihWPU]

Coba cek console browsernya

[@zakkytaufiqurrohman9378]

Di tunngu framework php nya pak

[@rohmatht1086]

Mantap

[@alimuqsith2239]

mantul pa (y)

[@danielchristianto306]

kalau pakai document saja gak pakai tag html nya boleh tah.

[@alifnurrohman9940]

Gua agak ngerti nih konsepnya, jadi itu tuh di masukin ke variabel make function, nanti kita make function yg lain buat memprosesnya, sesuai kebutuhan gitu kan, make parameter juga tuh.

[@malvinval]

itu bukan function mas, itu manipulation method. disitu variabel digunakan untuk menampung hasil selection terhadap suatu elemen dan juga untuk menampung tugas yang dilakukan sebuah method. jadi, methodnya bisa bekerja dengan memanggil variabelnya.

[@orluq7617]

izin bertanya pak, di video sebelumnya pak Dika bilang bahwa ada saatnya kita tidak boleh menyentuh atau mengubah halaman HTML, saat kondisi seperti apa kita tidak boleh mengutak-atik halaman
HTML?

[@syarieeef4879]

bantu jawab, saya ambil contoh kasus, web pembuatan link seperti linktree, user tidak mungkin merubah link atau tombol di bagian backend, maka dibuat manipulasi DOM dibagian front end / bagian tampilan user, agar user dapat merubah / mengganti link tersebut dibagian front end, semoga bisa menjawab

[@orluq7617]

@@syarieeef4879 trimakasih bang jawabannya

[@tonokip8735]

Mas dhika bikin tutorial bahasa pemograman untuk mobile dong seperti c# ?

[@sandhikagalihWPU]

cek channel youtube 'Kelas Terbuka' :)

[@yanesreksandi2835]

1. perbedaan ecmascript dan typescript itu apa pak?
2. ada rencana buat tutorial node js ga pak? di youtube belum ketemu tutorial yang bener - bener lengkap tentang node js

[@rezadwiputra1416]

dan sekarang sudah terkabul wkwk

[@dandi_saputra]

@@rezadwiputra1416 wkwkw

[@gunturwahyudigunturwahyudi8149]

@@rezadwiputra1416 alhamdulillah wkwkwk

[@royrezeky8347]

saya dari masa depan

[@yanesreksandi2835]

Wkwkwk ga kerasa udah 6 thn yg lalu

[@budicds5103]

klo bisa nambah elemen dr html langsung , knpa hrs lewat js pak?

[@noviaamarsheilaa5344]

saya juga bingung

[@pipitgusmayanti8342]

Untuk generate konten webpage secara dinamis, contohnya video-video pada home page youtube yang muncul saat di-scroll.

[@musuhabadi2534]

sama saya juga penasaran kenapa harus pake DOM jika HTML dan CSS juga memiliki fungsi yg sama

[@hasanbasri-bs9su]

Kenapa yang pas saya implementasi menambah paragraf baru di akhir section#a nya malah elemen nya a nya hilang kyk ketimpa gitu solusi nya gi mana pak

[@herikurniawan238]

insertBeforenya undefined kenapa ya pak ? Padahal 3 komponen yg di butuhkan sudah benar di uji2 satu2 di console ?

[@candraibrasanie7260]

First

[@zakkanativana1459]

Pak saya mau nanya di Menit ke 15.20 ,
Ketika const ul = document.querySelector diganti dengan --
const ul = document.getElementsByTagName ('ul');
const li2 = document.getElementsByTagName ('ul li);
ul.appendChild(liBaru, li2);
Kok Terjadi Error di ul.appendChild is not a function , kenapa ya ? apa karena Ul Li itu adalah Selector bukan Tag Html ?
*note : ketika saya menggunakan document.querySelector tidak error appendChild nya

[@alfianizzah3394]

getElementsByTagNama itu menghasilkan HTMLColection(Mirip seperti array) punya index .jadi waktu melakukan DOM selectionnya tuliskan Indexnya. coba nonton ulang video ini ruclips.net/video/bCKxPvA8KPo/видео.html

[@ridhoaditya8841]

Jangan lupa index ke brp nya [2]

[@happydwolflucken1965]

Pak dika saya melakukan seperti ini dijadikan 1 baris :
sectionA.appendChild(document.createElement('p').appendChild(document.createTextNode('Mermaid Baru')));
Yg keluar hanya textNodenya saja tanpa ada p..
Seharusnyakan Mermaid Baru.. Ini kenapa ya? Terimakasih

[@arnolddominggo9246]

kalau mau 1 baris jadinya gini gan:
sectionA.appendChild(document.createElement('p')).appendChild(document.createTextNode('Mermaid Baru'));

[@onoy1598]

Pa izin bertanya,, kenapa value dari method "appendChild(node)" tidak di kasih tanda kutip sedangkan method yg lain di kasih ?? Jadi bikin bingung knp yh alasannya ?? Terimakasih pa

[@BillyDavincy]

karna dia manggil variabel yg tadi dibikin duluan, klo yang kutip kan buat milih node atau kasih String.
contohnya :
const baru = document.createElement('h2');
const teksh2baru = document.createTextNode('tesss');
baru.appendChild(teksh2baru);
'baru' ini dia bikin element baru yang tagnya h2, terus 'teksh2baru' ini bikin teks yang mau dimasukin ke dalem h2.
jadi baru.appendChild(teksh2baru) = pilih variabel yang namanya baru, terus kasih child di dalemnya berupa variabel 'teksh2baru' yang dimana isinya string "tesss"
klo dijadiin html simplenya bakal jadi gini doang tesss

[@pandoedo6860]

Ijin bertanya pak @sandhikagalih, saya menambahkan paragraph pada sectionB untuk paragraph 5 dibawah element paragrap 4.
yang terjadi adalah paragrap baru (paragraph 5) berada di bawah item 3 ( element ul li item 3) bukan di element setelah paragrap ke 4. kira2 bagaimana ya supaya berada di bawah paragraph 4?

[@Rchtn_]

Pake insertBefore, di scop dulu ul nya, kalo pake appendChild dia pasti berada di akhir dari isi parent node nya

[@polsekbaureno2663]

kalau tambah paragraf baru di section " b " setelah paragraf 4, buat const 'section b' dan "ul'
codingannya :
const pBaru = document.createElement('p');
const textPBaru = document.createTextNode('Paragraf 5');
pBaru.appendChild(textPBaru);
const sectionB = document.getElementById('b');
const ul = document.querySelector('section#b ul');
sectionB.insertBefore(pBaru, ul)

[@okanjauhary8456]

Pak kalo misalnya kita mau buat element baru dg class gimana caranya? Misal buat

[@sandhikagalihWPU]

const pBaru = document.createElement('p');
pBaru.classList.add('a');

[@okanjauhary8456]

Oh gitu ya pak jadi harus buat elemen dulu trs kasih class

[@okanjauhary8456]

Oh gitu ya pak jadi harus buat elemen dulu trs kasih class

[@invysible]

mau tanya pak, untuk documentation nya bisa dilihat dimana ya pak seputar dom ini?

[@annascahwetan45]

pak untuk perbedaanya antara appendChild( ) ama insertBefore( ) masih bingun yang itu

[@pipitgusmayanti8342]

*parentNode.appendChild(child)* menambahkan elemen 'child' sebagai anak terakhir dari 'parentNode'.
- parent-node _

[@muktidwijatmoko3385]

Kodingan saya yang insertBefore kok ga jalan ya pak. Padahal caranya sudah sama. Sy pakai browser chrome. Kira2 knp pak?

[@suryaramadhan2903]

mungkin getElement nya,
untuk id gak pakai huruf s

[@malvinval]

untuk bertanya tentang error source code, langsung sertakan saja source codenya mas. karna error dalam coding ga hanya 1 jenis, bisa human error, logical error, dan syntax error. kalo disertakan source codenya disini, orang lain jadi lebih mudah meneliti dan memberikan solusinya.

[@faledemy]

ko saya gapaham2 ya di bagian inshertBefore nya saran nya pak

[@musuhabadi2534]

Pak saya masih penasaran kenapa kita harus menggunakan DOM, padahal kegunaannya mirip seperti HTML dan CSS..... apa ada alasan khusus ?

[@mshipdi2852]

Izin jawab. Bedanya kalau pake HTML dan CSS coba bisa dikelola oleh Developer beda kalau pake DOM user juga bisa berinteraksi. Kalau abangnya pernah maen game yang bisa edit karakternya itu dibuat pake DOM, kurang lebih gitu bang

[@happydwolflucken1965]

Pak mau tanya.. Saya melakukan 2 kali appendchild dengan variabel dari create textnode yg sama..
Tetapi kenapa text node pada appendchild yg pertama jdi kosong.. Jdi cuman masuk di appendchild yg kedua? Terima kasih..

[@alfianizzah3394]

Kirim source codex gan biar kita pecahkan sama2

[@malvinval]

kalo dengan appendChild(); gabisa, coba dengan insertBefore();

[@RenalTutor]

23:19 apakah sekarang sudah support di semua browser pak ?

[@fauzan5448]

TERGANTUNG!,kalo lu sudah update yah support

[@pndn7769]

Semoga bapak masih baca ya saya masih bingung pak misal cara mengganti tulisan hello world sesuka kita itu bagaimana pak kalau menggunakan manipulasi ini

[@aldin7325]

Permisi pak mau nanya, saya sudah mempunyai element Table pada HTML dan ingin menambahkan row baru , kira2 bagaimana menambahkan element row baru dan dengan menambahkan class pada row yang baru dibuat tersebut ya?

[@malvinval]

berikut source code yang bisa dicoba
==HTML==
Table Manipulation
Hello World


Data 1


==JAVASCRIPT==
const createElement = document.createElement('tr'); // dengan ini elemen baru telah dibuat tapi hanya disimpan didalam memori
const textCreateElement = document.createTextNode('Data 2'); // dengan ini, text content baru telah dibuat didalam elemen
// dengan 2 variabel tersebut, sudah dibuat elemen dan teks contentnya, tetapi mereka berdua belum menyatu.
// maka satukan text contentnya dengan elementnya dengan appendChild
createElement.appendChild(textCreateElement); // dengan ini, kita sudah menyatukan variabel dari elemen dan text contentnya.
// tahap akhir, tempatkan elemen baru tersebut ke tempat yang diinginkan.
const selectSectionA = document.querySelector('section#a table');
selectSectionA.appendChild(createElement);
createElement.setAttribute('class', 'classBaru'); // memberikan atribut berupa class baru

[@limboeyoeng]

Berarti bisa donk kita design semua halaman html kita dengan file script js yg kita buat, maksudnya design by script

[@malvinval]

untuk style bisa saja dengan CSS, tapi kalo UX untuk interaksi web dengan user bisa pake js.

[@kaumborjuis8953]

@@malvinval izin nanya, berarti dom membantu css dalam hal transisi dll ya ?

[@Duda-ke3uz]

Sampai di penjelasan membuat elemen baru yg ribet, saya bingung kenapa butuh ini
Kenapa tidak tambahkan seperti biasa ke HTML seperti menit 3:35
Kalau ada yg ribet, kenapa harus yg mudah?

[@ItzMeHio]

namanya juga DOM cok

[@Duda-ke3uz]

@@ItzMeHio Bukan gitu. Intinya adalah penerapan DOM bukan utk kasus seperti ini, karena ada cara yg lebih mudah. Saya hanya mewakili pemikiran pemula ketika melihat video ini

[@denitaufikramadhan4578]

@@Duda-ke3uz karena disini kita belajar dari dasar konsepnya

[@feelsillogical]

Ada proyekan dimana kita gaboleh merubah elemen htmlnya jadi mau gamau kita musti ngerti konsep dom
Jadi ini bukan masalah ribet susahnya,pemrograman non freelance misal perusahaan,kan kerjanya dalam tim

[@musuhabadi2534]

@@Duda-ke3uz bisa tolong dijelasin lagi ga bang ? saya masih penasaran alasan penggunaan DOM ini, kegunaannya mirip seperti CSS dan HTML

[@zaiidleader]

Kedua

[@muchammadfaisal7651]

pak kalo document create element itu ,elementnya harus kita seleksi dari html nya ?

[@malvinval]

document.createElement() gaperlu melakukan selection terhadap elemen manapun karna tugasnya hanya membuat elemen baru dan ditempatkan didalam memori. yang memerlukan selection adalah node.appendChild() atau node.insertBefore()

[@muchammadfaisal7651]

@@malvinval thankyou

[@himenov]

kalau ada pertanyaan, kirim ke mana ya pak?

[@bayusamara]

pak, baris kode
const teksPBaru = document.createTextNode('Paragraf Baru');
pBaru.appendChild(teksPBaru);
kenapa ngga langsung pBaru.innerHTML = 'Paragraf Baru'; saja pak?

[@bayusamara]

ooohhh.. ternyata ini jawabnnya
createTextNode will escape any strings and show them as they are, while innerHTML could render html-like strings into a DOM

[@mantannolife3759]

pak mau tanya, apakah bisa dengan menggunakan javascript misal kita login ke gmail, nah kita bisa ngesend email itu lewat javascript, jadi sistem nya kaya bot, bisa ngesend otomatis

[@BrilianK]

Mau ngapain tuh kira-kira 😂

[@Bantinck]

Assalamu'alaikum, pak Dika, SectionA itu bukannya parent-nya p ya?

[@sandhikagalihWPU]

betul, tapi tergantung p yang mana, karena di dalam sectionB juga ada p..

[@AndiSyafrianda]

makasih pak

[@Bantinck]

Web Programming UNPAS terima kasih pak

[@dodilase4957]

kok style nya ngak ikut pak saat menambahkan elementnya ?

[@malvinval]

bisa diatur stylenya dengan document.style.();

[@fauzan5448]

pak update javascript nya dong ke 2020-2021

[@guadownload9354]

wah, pas tau ada kaya gini jadi inget admin di wp. bisa kan ya dijadiin gitu pak?

[@refkymaulana21]

Kok saya pake pBaru ga bisa ya?

[@erlanggarizky4216]

erlangga_hadir

[@eula_23]

perbedaan append dengan appendChild itu apa ya?

[@malvinval]

sama saja, untuk menempatkan child baru dibagian akhir sebuah elemen html.

[@republiksantrinusantara]

mulai bingung di section ini bang

[@ihsannurulhabib9729]

KeEnam

[@fristaamanda]

Pak boleh minta ppt nya gak?

[@isengproject6551]

cara komentar (// ) gimana?

[@letshavefun3169]

Saya bantu jawab ya mas..
semua yg mau dijadiin comment diblock dulu, kemudian tekan ctrl + /

[@japroythekuproy8825]

Yang ini aga bingung

[@ininamakokharusdijarak6815]

//

[@lagulawas07]

Terima kasih pak