Sunday, October 6, 2013

Mendapatkan Teks di dalam suatu Elemen

Mendapatkan teks di dalam suatu elemen merupakan hal yang sering kali perlu dilakukan ketika bekerja dengan DOM.

Contoh kode di bawah, elemen P adalah root di mana didalamnya berisi satu elemen STRONG dan suatu blok teks, dan elemen STRONG itu sendiri juga berisi suatu blok teks:

<P><STRONG>Halo!</STRONG> apa kabar hari ini?</P>

Mendapatkan Teks dari STRONG
Asumsikan saja bahwa variabel strongElem berisi referensi kepada elemen STRONG dan asumsikan juga bahwa variabel pElem berisi referensi kepada elemen P.

Contoh kode di bawah mencoba untuk mengekstrak teksnya:

// Non-Mozilla Browsers:

strongElem.innerText; // 'Halo!' pElem.innerText; // 'Halo! apa kabar hari ini?'

// All platforms:

strongElem.firstChild.nodeValue; // 'Halo!' pElem.firstChild.nodeValue; // 'Halo! apa kabar hari ini?'

Sekarang anda telah mengetahui bagaimana mendapatkan isi berupa teks dari suatu single elemen.

Di bawah ini adalah fungsi yang bisa anda manfaatkan untuk mendapatkan teks dari elemen manapun:

function oText(Elem) { var Text = ""; Elem = Elem.childNodes || Elem; for(var i = 0; i < Elem.length; i++) { Text += Elem[i].nodeType != 1 ? Elem[i].nodeValue : oText(Elem[i].childNodes); } return Text; }

Di mana contoh kali ini, fungsi dipanggil oleh kode untuk menampilkan teks dari elemen STRONG, yang di wakili variabel strongElem:

oText(strongElem); // 'Halo!'

Mendapatkan HTML di dalam Elemen
Selain kemampuan mendapatkan teks dari suatu elemen, DOM juga mempunyai satu kemampuan untuk mendapatkan HTML di dalam suatu elemen.

innerHTML
Dengan properti ini anda dapat mendapatkan semua HTML dan teks di dalam suatu elemen.

Jika elemen yang di akses tidak berisi elemen lain didalamnya dan hanya berisi teks saja, string yang dikembalikan hanyalah berisi teks.

Contoh ketika anda mengakses STRONG menggunakan properti ini:

strongElem.innerHTML; // "Halo!"

Contoh ketika anda mengakses P menggunakan properti ini:

pElem.innerHTML; // "<strong>Halo!</strong> apa kabar hari ini?"