HTML element oluşturmak için etiket adını kullanırız. JavaScript kullanarak HTML element oluşturmak oldukça basittir . document.createElement() metodunu kullanırız. Bu metod bir HTML element etiket adını string olarak alır.
// syntax
document.createElement('tagname')<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<script>
let title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = 'Creating HTML element DOM Day 2'
console.log(title)
</script>
</body>
</html>Birden fazla element oluşturmak için döngü kullanmalıyız. Döngü kullanarak istediğimiz kadar HTML elementi oluşturabiliriz. Element oluşturduktan sonra, HTML nesnenin farklı özelliklerine değer atayabiliriz.
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<script>
let title
for (let i = 0; i < 3; i++) {
title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = i
console.log(title)
}
</script>
</body>
</html>Oluşturduğumuz elementi HTML'de görmek için, üst element olarak child olarak eklememiz gerekir. HTML'de body'sine document.body ile erişebiliriz. document.body appendChild() metodunu destekler. Aşağıdaki örneğe bakın.
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<script>
// creating multiple elements and appending to parent element
let title
for (let i = 0; i < 3; i++) {
title = document.createElement('h1')
title.className = 'title'
title.style.fontSize = '24px'
title.textContent = i
document.body.appendChild(title)
}
</script>
</body>
</html>HTML oluşturduktan sonra, element veya elementleri kaldırmak isteyebiliriz ve removeChild() metodunu kullanabiliriz.
Örnek:
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Removing child Node</h1>
<h2>Asabeneh Yetayeh challenges in 2020</h1>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Done</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
<script>
const ul = document.querySelector('ul')
const lists = document.querySelectorAll('li')
for (const list of lists) {
ul.removeChild(list)
}
</script>
</body>
</html>Önceki bölümde gördüğümüz gibi, bir üst elementin tüm iç HTML elementlerini veya child elementleri innerHTML metodu ve özelliklerini kullanarak ortadan kaldırmak için daha iyi bir yol mevcut.
<!DOCTYPE html>
<html>
<head>
<title>Document Object Model:30 Days Of JavaScript</title>
</head>
<body>
<h1>Removing child Node</h1>
<h2>Asabeneh Yetayeh challenges in 2020</h1>
<ul>
<li>30DaysOfPython Challenge Done</li>
<li>30DaysOfJavaScript Challenge Done</li>
<li>30DaysOfReact Challenge Coming</li>
<li>30DaysOfFullStack Challenge Coming</li>
<li>30DaysOfDataAnalysis Challenge Coming</li>
<li>30DaysOfReactNative Challenge Coming</li>
<li>30DaysOfMachineLearning Challenge Coming</li>
</ul>
<script>
const ul = document.querySelector('ul')
ul.innerHTML = ''
</script>
</body>
</html>🌕 Çok özel birisin, her gün ilerliyorsun. Şimdi, ihtiyaç duyduğunda oluşturulmuş bir DOM elementini nasıl yok edeceğini biliyorsun. DOM'u öğrendin ve şimdi uygulamaları inşa etme ve geliştirme becerisine sahipsin. Öğrenme yolunda sadece sekiz gün kaldı. Şimdi beynin ve kasların için bazı egzersizler yap.
- HTML belgesinde bir div kapsayıcısı oluşturun ve dinamik olarak 0 ila 100 sayılar oluşturun ve kapsayıcı div'e ekleyin.
- Çift sayıların arka planı yeşil
- Tek sayılar arka planı sarı
- Prime numaraları arka planı kırmızı
- Ülkeler dizisini kullanarak tüm ülkeleri görüntüleyin. Tasarımı görün.
Bu projenin gereksinimlerini jpg ve gif görüntülerinden her ikisinden de kontrol edin. Tüm veri ve CSS, yalnızca JavaScript kullanılarak uygulanmıştır. Veri starter klasörü proje_3'de bulunmaktadır. Açılır menü düğmesi detaylar HTML öğesi kullanılarak oluşturulmuştur.
🎉 Tebrikler ! 🎉