Lompat ke konten Lompat ke sidebar Lompat ke footer
Beranda / html

Membuat Duplikasi Node HTML Menggunakan importNode DOM

Dipublikasikan Oleh: elfanmauludi 5 komentar
Method importNode() DOM pada HTML digunakan untuk menciptakan sebuah duplikasi dari node dokumen lain dan mengimpornya ke dokumen saat ini.


Sebelum memahami lebih dalam materi tentang Membuat Duplikasi Node HTML Menggunakan importNode DOM, terlebih dahulu pelajari materi tentang: Menggunakan Implementation DOM HTML dan Fungsinya, Menggunakan Image Collection DOM HTML dan Fungsinya, dan Menggunakan Properti Head HTML DOM dan Fungsinya.

Sintak: document.importNode(externalNode, [deep])

Parameter:
  • externalNode: node yang dibutuhkan untuk proses import dari dokumen lainnya dalam bentuk tipe apapun.
  • [deep]: Nilai dari parameter ini dapat diatur ke "TRUE" jika ingin melakukan copy node beserta nilai atributnya, dan child node. Juga, dapat diatur ke nilai "FALSE" jika ingin melakukan copy node dan nilai atributnya saja. Jika nilai pada parameter ini tidak ditentukan, maka nilai default dari parameter [deep] adalah "TRUE".


Contoh:

<!DOCTYPE html>

<html>

 

<body>

<!-- iframe digunakan untuk  

menciptakan frame baru didalam 

dokumen saat ini dan 

menggabungkannya dengan 

dokumen lain -->

 

<!-- frame yang ingin 

ditautkan dapat diletakkan di 

dalam kode src pada iframe -->

 

<iframe 

src="https://www.penelitian.id/p/about-us.html"

style="height:380px;width:520px;">

</iframe>

 

<button 

onclick="myNode()">

Try it

</button>

 

<script>

function myNode() 

{

// akses iframe menggunakan 

// variabel frame

var frame = document.getElementsByTagName("IFRAME")[0];

 

// mengakses elemen <h1> dari

// dokumennya, di dalam

// iframe.

var bong =

frame.contentWindow.document.getElementsByTagName("H1")[0];

 

// penerapan method

// importNode() untuk menambah

// node ke dalam dokumen asli.

var bnn = document.importNode(bong, true);

document.body.appendChild(bnn);

}

</script>

 

</body>

 

</html>

Output:



Contoh:

<!DOCTYPE html>

<html>

 

<body>

 

<iframe 

src="https://www.penelitian.id/p/about-us.html"

style="height:380px;width:520px;">

</iframe>

 

<button 

onclick="myImport()">

Try it

</button>

 

<script>

function myImport() 

{

var frame = document.getElementsByTagName("IFRAME")[0];

// akses elemen <div> dari 

// dokumennya, di dalam 

// iframe.

 

var mkn =

frame.contentWindow.document.getElementsByTagName("DIV")[0];

 

var bong = document.importNode(mkn, true);

document.body.appendChild(bong);

}

</script>

 

</body>

 

</html>

Output:

Artikel ini didedikasikan kepada: Brian Hakim Pangestu, Cendana Sekar Kumala Yastri, Charesta Vida Reswara, Cintya Nur Indriyani, dan Cyntia Wahyu Auliasari.
Location: Semarang, Kota Semarang, Jawa Tengah, Indonesia

5 komentar untuk "Membuat Duplikasi Node HTML Menggunakan importNode DOM"

  1. AnonimSenin, 27 Desember 2021 pukul 16.56.00 WIB

    Jenis browser apa saja yang dapat mendukung penggunaan method importNode pada DOM HTML?

    BalasHapus
    Balasan
    1. AnonimSenin, 27 Desember 2021 pukul 16.57.00 WIB

      Berikut beberapa jenis browser yang dapat digunakan untuk mengaktifkan method importNode() pada DOM HTML:
      1. Google Chrome
      2. Internet Explore
      3. Firefox
      4. Opera
      5. Safari

      Hapus
    2. AnonimSenin, 27 Desember 2021 pukul 16.57.00 WIB

      Catatan: Method ini tidak didukung penggunaannya pada Internet explorer 8 dan versi sebelumnya.

      Hapus
  2. AnonimSelasa, 04 Januari 2022 pukul 10.19.00 WIB

    Apa fungsi method importNode() pada DOM HTML?

    BalasHapus
    Balasan
    1. AnonimSelasa, 04 Januari 2022 pukul 10.19.00 WIB

      Method importNode() pada dom html berfungsi untuk mengimpor node atau simpul dari dokumen lain. Node yang diimpor bisa berasal dari semua tipe node. Jika parameter kedua diatur ke nilai TRUE, maka node child (turunan) juga akan ikut diimport ke dalam dokumen.

      Hapus

Hubungi admin melalui Wa : +62-896-2414-6106

Respon komentar 7 x 24 jam, mohon bersabar jika komentar tidak langsung dipublikasi atau mendapatkan balasan secara langsung.

Bantu admin meningkatkan kualitas blog dengan melaporkan berbagai permasalahan seperti typo, link bermasalah, dan lain sebagainya melalui kolom komentar.

- Ikatlah Ilmu dengan Memostingkannya -
- Big things start from small things -