Javascript ile Web Sayfasındaki Öğeleri Kullanmak

Web sayfasında id veya class değeri verilmiş elemanlara nasıl ulaşıldığını anlamak için aşağıdaki kodu inceleyebilirsiniz.

Javascript içeriğini HTML içeriğinden sonra script tagı içine yazın.

<p id="paragraf-1">1. paragraf içeriği</p>
<p id="paragraf-2">2. paragraf içeriği</p>
<p class="paragraf">3. paragraf içeriği</p>
<p class="paragraf">4. paragraf içeriği</p>
<p class="paragraf">5. paragraf içeriği</p>
<button onclick="myFunc1()">1 için Tıkla</button>
<button onclick="myFunc2()">2 için Tıkla</button>
<button onclick="myFunc345()">3,4,5 için Tıkla</button>

<script type="text/javascript">
    function myFunc1() {
        // id özelliği paragraf-1 olan elementi alır
        var paragraf1 = document.getElementById('paragraf-1');
        // içerik yazısı
        paragraf1.innerText = "1. paragraf değişti";
        // arkaplan rengi
        paragraf1.style.backgroundColor = '#F00';
        // yazı rengi
        paragraf1.style.color = '#FFF';
    }
    
    function myFunc2() {
        // id özelliği paragraf-2 olan elementi alır
        var paragraf1 = document.getElementById('paragraf-2');
        // içerik HTML kodu
        paragraf1.innerHTMl = "<strong>paragraf-2</strong> id özellikli değişti";
        // arkaplan rengi
        paragraf1.style.backgroundColor = '#555';
        // çerçeve
        paragraf1.style.border = '1px solid #FE012D';
    }

    function myFunc345() {
        // class özelliği paragraf olan elementleri diziye alır
        var paragraf345 = document.getElementsByClassName('paragraf');
        for (var i in paragraf345) {
            var paragraf = paragraf345[i];
            // içerik yazısı
            paragraf.innerText = "class paragraflar değişti";
            // arkaplan rengi
            paragraf.style.backgroundColor = '#00F';
            // yazı rengi
            paragraf.style.color = '#FFF';
        }
    }
</script>

Uygulama aşağıdaki gibidir.

document websayfasının tamamını temsil etmektedir. getElementById id özelliğine göre bir elemanı alıp javascript değişkeni olarak döndürür. getElementsByClassName ise class özelliğine göre elemanları alıp dizi olarak döndürür. getElementsByTag şeklinde de elemanları tag ismine göre alabilirsiniz. document.getElementsByTag('p') sayfadaki bütün p tagı elementlerini dizi olarak döndürecektir.