Lompat ke konten Lompat ke sidebar Lompat ke footer

Membuat Duplikasi Node HTML Menggunakan importNode DOM

Method importNode() DOM pada HTML digunakan untuk menciptakan sebuah duplikasi dari node dokumen lain dan mengimpornya ke dokumen saat ini.

2 Contoh Penggunaan Method importNode() DOM pada HTML
Ilustrasi importNode DOM HTML

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

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.

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

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

    BalasHapus
    Balasan
    1. 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. Catatan: Method ini tidak didukung penggunaannya pada Internet explorer 8 dan versi sebelumnya.

      Hapus
  2. Apa fungsi method importNode() pada DOM HTML?

    BalasHapus
    Balasan
    1. 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 -