Web前端基础知识(七)

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

相关推荐
excel2 小时前
ES6 中函数的双重调用方式:fn() 与 fn\...``
前端
可乐爱宅着3 小时前
全栈框架next.js入手指南
前端·next.js
你的人类朋友4 小时前
什么是API签名?
前端·后端·安全
会豪6 小时前
Electron-Vite (一)快速构建桌面应用
前端
中微子6 小时前
React 执行阶段与渲染机制详解(基于 React 18+ 官方文档)
前端
唐某人丶6 小时前
教你如何用 JS 实现 Agent 系统(2)—— 开发 ReAct 版本的“深度搜索”
前端·人工智能·aigc
中微子6 小时前
深入剖析 useState产生的 setState的完整执行流程
前端
遂心_6 小时前
JavaScript 函数参数传递机制:一道经典面试题解析
前端·javascript
小徐_23337 小时前
uni-app vue3 也能使用 Echarts?Wot Starter 是这样做的!
前端·uni-app·echarts
RoyLin7 小时前
TypeScript设计模式:适配器模式
前端·后端·node.js