Web前端基础知识（七）

要在JS中获取元素节点，需要使用DOM API提供的方法。

innerHTML：不仅会返回一个纯文本，还可以解析一下这个文本中的语意。

innerText: 忽略HTML标记。

举例：

<body>

<div id="box1">这是一个ID选择器标签 </div>

<div class="box2">这是一个类选择器标签</div>

<div>普通的div标签</div>

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'属性值的倍数。