dom adalah singkatan dari ( document object model )
dimana document html kita dan root document nya itu si html kemudian child nya itu head sama body
, kemudian element element berikutnya itu adalah child dari element berikutnya
jadi dom itu kurang lebih adalah html kita
document.getElementById(id)
document.getElementsByTagName(tagname)
document.getElementsByClassName(classname)
document.querySelector(id|tagname|classname)
outerHTML = untukmenampilkan tag nya
textContent = untuk menampilkan isi text nya
// mendapatkan html - finding HTML Element
<section>
<div></div>
<div id="div-2"></div>
<div class="div-1"></div>
</section>
// let el = document.getElementById("div-2");
// let el = document.getElementsByTagName("div")
// console.log(el[0]);
// let el = document.getElementsByClassName("div-1")
// console.log(el[0]);
// let el = document.querySelector("#div-2");
// let el = document.querySelector(".div-1");
// let el = document.querySelector("div");
// document.querySelectorAll(".divClass").forEach(el => {
el.innerHTML = "isi baru";
});
// merubah html
// let el = document.querySelector(".div-1");
// console.log(el);
// el.innerHTML = "<p> Hello World </p>"
// let input = document.getElementById("input");
// console.log(input);
// input.setAttribute("type", "checkbox")
// let input = document.getElementById("input");
// console.log(input);
// input.style.borderColor = 'red'
// input.style.color = 'red'
adding and deleting element
// membuat dan menghapus element
//buat element
// const pElement = document.createElement("p");
// const divEl = document.getElementById("div-2");
// // menambah element child
// divEl.appendChild(pElement);
// pElement.innerHTML = "hello world";
// // hapus element child
// divEl.removeChild(pElement);
DOM EVENT
// DOM EVENT
// ketika kejadian terjadi apa yang terjadi
// const hello = document.getElementById("hello");
// hello.addEventListener("mouseenter", function () {
// // console.log("hallo dari mouse enter");
// hello.style.border = "1px solid blue"
// });
<p id="p">hallo sorot saya</p>
<button onclick="btnclick()">Ini Button</button>
<p id="boom" style="display: none;">BOOM</p>
<p onmouseenter="addborder(this)">enter</p>
let sorot = document.getElementById("p")
sorot.addEventListener("mouseenter", function () {
sorot.style.border = "1px solid blue"
})
function btnclick() {
const boom = document.getElementById("boom")
boom.style.display = "block"
}
function addborder(el) {
el.style.border = "1px solid black"
}
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Data JSON</title>
</head>
<body>
<h1>Data Crypto Trending</h1>
<div id="output"></div>
<div id="detail"></div>
<script src="app.js"></script>
</body>
</html>
let hasil = "";
let api = "https://api.coingecko.com/api/v3/search/trending";
fetch(api) // ambil data
.then((response) => response.json()) // membuka datanya
.then((data) => {
// simpan datanya untuk di tampilkan
data.coins.forEach((element, index) => {
const item = element.item;
hasil += `
<img src="${item.thumb}" alt="thumb">
<p>
nama : ${element.item.name} <br>
simbol : ${element.item.symbol} <br>
rank : ${element.item.market_cap_rank}
</p>
<button onclick="showDetail(${index})">
Lihat Detail
</button>
<hr>
`;
});
document.getElementById("output").innerHTML = hasil;
// simpan data global
window.cryptoData = data.coins;
});
function showDetail(index) {
document.getElementById("output").innerHTML = "";
const coin = cryptoData[index].item;
let detail = `
<button onclick="backToList()">⬅ Kembali</button>
<h3>${coin.name}</h3>
<img src="${coin.large}" width="100">
<p>Symbol : ${coin.symbol}</p>
<p>Rank : ${coin.market_cap_rank}</p>
<p>Harga USD : $${coin.data.price}</p>
<p>Market Cap : ${coin.data.market_cap}</p>
`;
document.getElementById("detail").innerHTML = detail;
}
function backToList(){
document.getElementById("detail").innerHTML = "";
document.getElementById("output").innerHTML = hasil;
}