<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="wrap"></div>
<p class="goudan"></p>
<p class="goudan"></p>
<p class="goudan"></p>
<script>
    // let oWrap = document.getElementById('wrap');
    //
    // console.log(oWrap);
    //
    // oWrap.id = 'g123';
    // oWrap.innerHTML = '123';
    // 这样是可以的

    // let aP = document.getElementsByClassName('goudan');
    //
    // console.log(aP);
    // aP[0].className = 'dachui';
    //
    // console.log(aP);
    // aP[0].innerHTML = '123456';
    // 容器是没有变的，但是里边的装的东西改变了
    // 这样是在操作容器改变里边的内容

    // let aP = document.getElementsByClassName('goudan');
    // let oP = aP[0];
    //
    // oP.className = 'dachui';
    // oP.innerHTML = '123456';
    // 这样是不改变容器的

    // getElementsByClassName()
    // getElementsByTagName()
    // getElementsByName()
    // 获取到的是一个动态的

    // .querySelectorAll()
    // 获取到的是一个静态的

    // 也就是直接用的时候改变获取条件那么袋子中的东西就会改变
</script>
</body>
</html>