获取节点
改变节点样式
<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代码