要在JS中获取元素节点，需要使用DOM API提供的方法。
innerHTML：不仅会返回一个纯文本，还可以解析一下这个文本中的语意。
innerText: 忽略HTML标记。
举例：
<body>
<div id="box1">这是一个ID选择器标签 </div>
<div class="box2">这是一个类选择器标签</div>
<div>普通的div标签</div>
<script>
var element_id = document.getElementById("box1");
console.log(element_id);
var element_class=document.getElementsByClassName('box2')[0];
console.log(element_class)
var element_tag=document.getElementsByTagName('div')[2];
console.log(element_tag);
element_id.innerHTML='<a href="#">跳转连接</a>';
element_class.innerText='<a href="#">跳转连接</a>';
element_tag.style.color='red';
element_tag.style.fontSize='20px';
</script>
</body>
效果：
DOM对象常用方法
| 方法 | 描述 |
| appendChild() | 把新的子节点添加到指定节点 |
| removeChild() | 删除子节点 |
| replaceChild() | 替换子节点 |
| insertBefore() | 在指定的子节点前插入新的子节点 |
| createAttribute() | 创建属性节点 |
| createElement() | 创建元素节点 |
| createTextNode() | 创建文本节点 |
| getAttribute() | 返回指定的属性值 |
在JS中，this是一个关键字，指向当前的上下文的对象。
移动端页面的开发，需要具备响应式的设计，来适应不同大小和分辨率的移动设备屏幕。
响应式布局实现方法(主流)
1.通过‘rem’、'vw/vh'等单位，实现在不同设备上显示相同比例进而实现适配。
2.响应式布局，通过媒体查询'@media'实现一套HTML，配合多套CSS实现适配。
Viewport
viewport ,可译为‘视区’或者'视口'。是指浏览器用来显示网页的区域，它决定了网页在用户设备上的显示效果。
1.width=device-width:将视口的宽度设置为设备的宽度。这确保网页内容不会被缩放，而是按照设备的实际宽度进行布局。
2.initial-scale=1.0 :设置初始的缩放级别为1.0. 有助于确保网页在加载时以原始大小显示，而不是被缩小或放大。
3.minimum-scale=1.0:最小缩放比例为1.
4.maximum-scale=1.0:最大缩放比例为1.
5.user-scalable=no:不允许用户缩放.
rem
'rem'是一个倍数单位，它是基于html标签中的‘font-size’属性值的倍数。
![[Transformer] The Structure of GPT, Generative Pretrained Transformer](https://i-blog.csdnimg.cn/direct/6b9d738c744f4cbeb6e9aec049578b91.png)
