选择器

    getElementById
    getElementsByClassName
    getElementsByTagName    // 指定标签名的对象的集合
    getElementsByName       // 带有指定名称的对象的集合。
    querySelector('#app .demo')
    querySelectorAll('#app .demo')
    
    console.log(app.children);               // 指定元素的所有子元素
    console.log(app.parentElement);          // 指定元素的父元素
    console.log(app.nextElementSibling);     // 指定元素的下一个兄弟元素
    console.log(app.previousElementSibling); // 指定元素的前一个兄弟元素
    
    // 指向第一个子元素里面的第一个子元素
    table.firstElementChild.firstElementChild.style.background = "red"
    
    // 指向最后一个子元素里面的最后一个子元素
    table.lastElementChild.lastElementChild.style.background = "blue"

实例

<script>
    let app = document.getElementById('app')
    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
            td.onclick = function(){
                let tds = document.getElementsByTagName('td')
                for (let i = 0; i < tds.length; i++) {
                    tds[i].style.color = "#000"  
                }
                this.style.color = "red"
            }
            tr.appendChild(td)
        }
    }
    // 指向第一个子元素里面的第一个子元素
    table.firstElementChild.firstElementChild.style.background = "red"

    table.firstElementChild.lastElementChild.style.background = "yellow"
    
    // 指向最后一个子元素里面的最后一个子元素
    table.lastElementChild.lastElementChild.style.background = "blue"
    
    table.lastElementChild.firstElementChild.style.background = "green"

    table.lastElementChild.previousElementSibling.lastElementChild.style.background = "gray"

    // 写后面，先创建再放入到页面
    document.body.appendChild(table)
</script>