DOM

<div class="demo">
    111
</div>
<div id="app">
    <div class="demo">
        222
    </div>
</div>
<div class="demo">
    333
</div>
<script>
    //getElementById
    //getElementsByClassName
    //document.getElementsByName
    //document.getElementsByTagName
    let app = document.getElementById('app')
    // console.log(app.getElementsByClassName('demo'));
    console.log(app.children);
    console.log(app.parentElement);
    console.log(app.nextElementSibling);
    console.log(app.previousElementSibling);

    let table = document.createElement('table')
    for (let i = 1; i <= 5; i++) {
        let tr = document.createElement('tr')
        table.appendChild(tr)
        for (let j = 1; j <= 5; j++) {
            let td = document.createElement('td')
            td.innerHTML = i * j
            tr.appendChild(td)
        }
    }
    document.body.appendChild(table)

    table.classList.add('tb')
    table.classList.add('zz')

    table.firstElementChild.firstElementChild.style.backgroundColor = "red"
    table.firstElementChild.firstElementChild.style.color = "white"

    table.firstElementChild.lastElementChild.style.backgroundColor = "yellow"
    table.firstElementChild.lastElementChild.style.color = "grey"

    table.lastElementChild.firstElementChild.style.backgroundColor = "skyblue"
    table.lastElementChild.firstElementChild.style.color = "white"

    table.lastElementChild.lastElementChild.style.backgroundColor = "#ada"
    table.lastElementChild.lastElementChild.style.color = "white"

    table.lastElementChild.lastElementChild.style.backgroundColor = "pink"
    table.lastElementChild.previousElementSibling.lastElementChild.style.color = "white"


</script>