Consider the following html code.
This is my link collection:
- Bye bye Borland
- Welcome to Micro Focus
The following table details the different properties that return.
browser.DomElement["//div[@id='mylinks']"].GetProperty["textContents"] | This is my link collection: |
browser.DomElement["//div[@id='mylinks']"].GetProperty["innerText"] | This is my link collection:Bye bye Borland Welcome to Micro Focus |
browser.DomElement["//div[@id='mylinks']"].GetProperty["innerHtml"] | This is my link collection:
|
Note: In Silk Test 13.5 or later, whitespace in texts, which are retrieved through the textContents property of an element, is trimmed consistently across all supported browsers. For some browser versions, this whitespace handling differs to Silk Test versions prior to Silk Test 13.5. You can re-enable the old behavior by setting the OPT_COMPATIBILITY option to a version lower than 13.5.0. For example, to set the option to Silk Test 13.0, type the following into your script:
'VB .NET code Agent.SetOption["OPT_COMPATIBILITY", "13.0.0"]
Beberapa minggu yang lalu, saya sedang mengerjakan sesuatu dan memiliki salah satunya 'Jadi begitu!' saat-saat di mana sesuatu sangat masuk akal sehingga saya berkata pada diri sendiri bahwa saya harus menjelajahinya dan menulis tentangnya. Sayangnya, saya tidak ingat apa yang sedang saya kerjakan atau apa itu
'Jadi begitu!' saat itu persis. Jadi, saya akan menyelam dan melihat apakah saya dapat menemukannya kembali. Dalam vanilla JavaScript, innerText hanya mengambil teks yang dirender dari elemen HTML. Intinya, teks yang terlihat di browser itulah yang diambil oleh innerText. HTML JavaScript Ini benar-benar akan mendapatkan atau mengatur konten dalam elemen HTML. Saat mengambil konten dalam, itu juga
akan menyertakan spasi dan tag elemen dalam seperti HTML This is an example . JavaScript #javascript #coding #html #programming #html Dalam vanilla JavaScript, innerText hanya mengambil teks yang dirender dari elemen HTML. Intinya, teks yang terlihat di browser itulah yang diambil oleh innerText.
kode sumber aplikasi uber
This is an example .
harga koin dink doink
var x = document.getElementById[example].innerText;
dalamHTML
generator wajah pix2pix online
var x = document.getElementById[example].innerHTML;
javascript.plainenglish.io
innerText vs innerHTML vs textContent dalam
JavaScript
Saat kamu memutuskan akan belajar Javascript, maka wajib hukumnya memahami tentang DOM.
Karena…
Salah satu tugas utama Javascript di dalam web adalah membuat halaman web agar terlihat dinamis.
Hal ini bisa dilakukan oleh Javascript dengan bantuan DOM.
Apa itu DOM API?
…dan bagaimana cara menggunakannya?
Mari kita bahas…
Apa itu DOM API?
DOM merupakan singkatan dari Document Object Model.
Artinya, dokumen [HTML] yang dimodelkan dalam sebuah objek.
Objek dari dokumen ini menyediakan sekumpulan fungsi dan atribut/data yang bisa kita manfaatkan dalam membuat program Javascript. Inilah yang disebut API [Application Programming Interface].
DOM tidak hanya untuk dokumen HTML saja. DOM juga bisa digunakan untuk dokumen XML dan SVG.
…dan DOM juga tidak hanya ada di Javascript saja, DOM juga ada pada bahasa pemrograman lain.
Bagaimana Cara Menggunakan DOM?
Seperti yang kita sudah katahui, DOM adalah sebuah objek untuk memodelkan dokumen HTML.
Objek DOM di javascript bernama document
. Objek ini berisi segala hal yang kita butuhkan untuk memanipulasi HTML.
Jika kita coba ketik document
pada console Javascript, maka yang akan tampil adalah kode HTML.
Di dalam objek document
, terdapat fungsi-fungsi dan atribut yang bisa kita gunakan untuk memanipulasi dokumen HTML.
Sebagai contoh fungsi documen.write[]
.
Fungsi ini digunakan untuk menulis sesuatu ke dokumen HTML.
Contoh:
Coba ketik kode berikut di dalam consoel Javascript.
document.write["Hello World"];
document.write["Saya Sedang Belajar Javascript
"];
Hasilnya:
Lihatlah!
Hasilnya akan langsung berdampak pada dokumen HTML.
Mengkases Elemen Tertentu dengan DOM
Objek document
adalah model dari dokumen HTML. Objek ini berisi kumpulan fungsi dan atribut berupa objek dari elemen HTML yang bisa digambarkan dalam bentuk pohon seperti ini:
Struktur pohon ini akan memudahkan kita dalam menggunakan elemen tertentu.
Mari kita coba mengakses objek dan
.
Coba ketik kode berikut pada Console:
// mengakses objek head
document.head;
// mengakses objek body
document.body;
// melihat panakang judul pada objek title
document.title.length
Hasilnya:
Apabila kita ingin mengakses elemen yang spesifik, terdapat beberapa fungsi yang bisa digunakan:
getElementById[]
fungsi untuk memilih elemen berdasarkan atributid
.getElementByName[]
fungsi untuk memilih elemen berdasarkan atributname
.getElementByClassName[]
fungsi untuk memilih elemen berdasarkan atributclass
.getElementByTagName[]
fungsi untuk memilih elemen berdasarkan nama tag.getElementByTagNameNS[]
fungsi untuk memilih elemen berdasarkan nama tag.querySelector[]
fungsi untuk memilih elemen berdasarkan query.querySelectorAll[]
fungsi untuk memilih elemen berdasarkan query.- dan lain-lain.
Fungsi-fungsi di atas cukup sering digunakan untuk mengakses elemen tertentu.
Contoh:
Misalkan kita punya kode HTML seperti ini:
Maka untuk memilih element tersebut di Javascript, kita bisa gunakan fungsi getElementByI[]
seperti ini:
// memilih elemen dengan id 'tutorial'
var tutorial = document.getElementById['tutorial'];
Variabel tutorial
akan menjadi sebuah objek DOM dari elemen yang kita pilih.
Contoh yang lebih lengkap:
Memilih Elemen Berdasarkan ID
// mengakses elemen tutorial
var tutorial = document.getElementById["tutorial"];
// mengisi teks ke dalam elemen
tutorial.innerText = "Tutorial Javascript";
// memberikan CSS ke elemen
tutorial.style.backgroundColor = "gold";
tutorial.style.padding = "10px";
Hasilnya:
Pada contoh di atas, kita memilih elemen dengan fungsi document.getElementById[]
. Lalu membuatkan objek untuk elemen tersebut. Setelah itu, kita bisa lakukan apapun yang diinginkan seperti mengubah teks
dan style CSS.
Lalu pertanyaanya:
Bagaimana kalau ada lebih dari satu elemen yang dipilih?
Misalkan kita memilih elemen berdasarkan nama tag atau atribut class.
Jawabannya:
Eelemn yang akan terpilih akan menjadi sebuah array. Karena kita memilih sekumpulan elemen.
Array tersebut akan berisi objek DOM dari elemen-elemen yang terpilih.
Contohnya:
DOM API Javascript
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?
Lorem ipsum dolor sit amet consectetur adipisicing elit.
Quo quaerat recusandae qui ullam eaque cumque ea fugit,
debitis commodi ipsum illo dolorum consequatur sed laudantium suscipit quis magni,
maiores in?
var paragraf = document.getElementsByClassName["paragraf"];
console.log[paragraf];
Pada contoh di atas, kita memiliki tiga buah paragraf dengan nama class paragraf
.
Lalu kita mencoba memilih ketiga paragraf tersbut melalui javascript dengan method atau fungsi getElementByClassName[]
.
Kemudian, hasilnya kita tampilkan ke dalam console Javascript.
Maka hasilnya:
Variabel
paragraf
akan berisi sebuah array yang di dalamnya terdapat tiga buah objek DOM dari paragraf.
Mari kita coba bereksperimen dengan mengubah warna teks dari paragraf pertama.
Paragraf pertama akan barada pada posisi indeks ke-0
di dalam array.
Coba ketik perintah berikut di dalam console Javascript:
paragraf[0].style.color = "red"
Maka hasilnya, paragraf pertama akan berwarna merah.
Mari kita coba buat sebuah animasi warna.
Ubahlah kode javascript di atas menjadi seperti ini:
var paragraf = document.getElementsByClassName["paragraf"];
setInterval[function [] {
paragraf[0].style.color = "red";
paragraf[1].style.color = "green";
paragraf[2].style.color = "blue";
setTimeout[function [] {
paragraf[0].style.color = "black";
paragraf[1].style.color = "black";
paragraf[2].style.color = "black";
}, 500]
}, 1000];
Kita memanfaatkan fungsi setInterval[]
dan fungsi setTimeOut[]
untuk
menentukan waktu animasinya.
Pada kode diatas, rentang waktu [interval] kita berikan 1000
milidetik atau 1 detik.
Sedangkan untuk merubah warnanya menjadi hitam, kita berikan waktu 500
milidetik atau 0.5 detik.
Maka hasilnya:
Membuat Elemen dengan DOM API
DOM juga menyediakan fungsi untuk membuat elemen HTML.
Salah satunya adalah fungsi createElement[]
.
Contoh:
document.createElement['p'];
Maka, akan tercipta elemen baru. Namun tidak akan ditampilkan ke dalam halaman web.
Mengapa tidak ditampilakn?
Karena kita belum menambahkannya ke dalam body dokumen.
Cara menambahkannya ke body dokumen, kita bisa gunakan fungsi append[]
.
Contoh:
DOM API Javascript
// membuat element h2
var judul = document.createElement["h2"];
// mengisi kontent elemen
judul.textContent = "Belajar Javascript";
// menambahkan elemen ke dalam tag body
document.body.append[judul];
Hasilnya:
Menghapus Elemen dengan DOM API
Kalau tadi kita menggunakan fungsi append[]
untuk menambahkan elemen, maka untuk menghapusnya kita menggunakan
fungsi remove[]
.
Berikut ini contohnya:
DOM API Javascript
Delete Saya!
// memilih elemen berdasarkan ID
var h2 = document.getElementById['judul2'];
// menghapus elemen yang sudah dipilih
h2.remove[];
console.log["Elemen sudah dihapus"];
console.log[h2];
Hasinya:
Elemen berhasil dihapus dari halaman web, namaun elemen masih berada di dalam memori.
Contoh Program yang Memanfaatkan DOM
Kita sudah tahu cara mengakses elemen dengan DOM dan kita juga sudah paham cara menambahkan dan menghapus elemen.
Biar pemahamannya semakin mantap, coba contoh program berikut:
DOM API Javascript
Aplikasi Ubah Warna
Warna latar:
Warna teks:
var bgColor = document.getElementById['bg-color'];
var txtColor = document.getElementById['text-color'];
bgColor.addEventListener["change", [event] => {
document.body.style.backgroundColor = bgColor.value;
}];
txtColor.addEventListener["change", [event] => {
document.body.style.color = txtColor.value;
}];
Program ini berfungsi untuk mengubah warna latar belakang dari elemen dan mengubah warna teksnya.
Kita menggunakan event "change"
pada elemen bgColor
dan txtColor
. Artinya nanti setiap nilai dari elemen ini berubah, kode di dalamnya akan
dieksekusi.
Hasilnya:
Apa Selanjutnya?
Kedepannya kita akan banyak menggunakan DOM untuk membuat aplikasi dengan Javascript.
Selanjutnya, silahkan pelajari tentang:
- Opeartor pada Javascript;
- Percabangan pada Javascript;
- Perulangan pada Javascript
- dll.