《JavaScript学习笔记》获取html节点、改变节点样式、改变节点内容、创建节点

获取节点

改变节点样式

 <script>
        // 第一步 获取节点
        var fa = document.querySelector(".fa");
        console.log(fa);

        // 更改节点样式
        fa.style.height = "100px";
        fa.style.width = "200px";
        fa.style.backgroundColor = "red";

        // 获取一个节点属性getAttribute
        console.log( fa.getAttribute("data-id"));

        // 获取所有的属性attributes
        console.log( fa.attributes);

        // 更改属性setAttribute("属性","值")
        fa.setAttribute("data-id","2")
        console.log(fa);
    </script>

改变节点内容

 <script>

        var fa = document.querySelector('.fa');

        // 更改节点内容  innerHTML

        fa.innerHTML = "22222";

        var pbbox = document.querySelector('.pbbox');

        pbbox.innerHTML = `<img src="./img/3.webp" alt="">
        <div class="name">
            Xiaomi MIX Fold 2
        </div>
        <div class="tag">超轻薄折叠机身设计</div>
        <div class="price">8999元起</div>`;
        
        // 特别注意不是双引号""   是反演号``
    </script>

创建节点

案例：动态创建8个手机内容如下

js代码