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

相关推荐
昔人'17 小时前
`list-style-type: decimal-leading-zero;`在有序列表`<ol></ol>` 中将零添加到一位数前面
前端·javascript·html
岁月宁静1 天前
深度定制:在 Vue 3.5 应用中集成流式 AI 写作助手的实践
前端·vue.js·人工智能
心易行者1 天前
10天!前端用coze,后端用Trae IDE+Claude Code从0开始构建到平台上线
前端
saadiya~1 天前
ECharts 实时数据平滑更新实践(含 WebSocket 模拟)
前端·javascript·echarts
fruge1 天前
前端三驾马车(HTML/CSS/JS)核心概念深度解析
前端·css·html
百锦再1 天前
Vue Scoped样式混淆问题详解与解决方案
java·前端·javascript·数据库·vue.js·学习·.net
烛阴1 天前
Lua 模块的完整入门指南
前端·lua
浪里行舟1 天前
国产OCR双雄对决?PaddleOCR-VL与DeepSeek-OCR全面解析
前端·后端
znhy@1231 天前
CSS易忘属性
前端·css
瓜瓜怪兽亚1 天前
前端基础知识---Ajax
前端·javascript·ajax