Javascript elementler üzerinde gezinme

JAVASCRİPT 2023-12-16 19:54:36

Javascripte dom elemanlar arasında gezinmek için 

parentElement  : içinde bulunduğu kapsayıcıyı döndürür

Örneğin :

    <ul>
        <li>Item 1</li>
        <li>Item 2</li>
        <li>Item 3</li>
    </ul>

    
<script>
    //ana kapsayıcıyı öğrenmek için
    const li1 = document.querySelectorAll('li')[0];
    console.log(li1.parentElement);
    //bir sonraki öğrenmek için
    const li2 = document.querySelectorAll('li')[1];
    console.log(li2.nextElementSibling);
    // bir önceki öğrenmek için
    const li3 = document.querySelectorAll('li')[2];
    console.log(li3.previousElementSibling);    
</script>

//başka bir örnek

<div>
    <h1>başlık</h1>
    <ul>
        <li>
            <ul>
                <li>Ahmet 1</li>
                <li>Ahmet 2</li>
                <li>Ahmet 3</li>
                <li>Ahmet 4</li>
                <li>Ahmet 5</li>
            </ul>
        </li>
        <li>
            <ul>
                <li>Altun 11</li>
                <li>Altun 2</li>
                <li>Altun 3</li>
                <li>Altun 4</li>
                <li>Altun 5</li>
            </ul>
        </li>
    </ul>
</div>

<script>
let div = document.querySelector('div');
div = div.children[1].children[1].children[0].children[0].textContent = "Değiş";
console.log(div);
</script>

 

parentElement nextElementSibling previousElementSibling

CONTACT ME

0 / 250 karakter