JS 前端基础高频面试题

完全对标考试 / 面试满分答题规范:术语严谨、无错别字、逻辑闭环、代码原生无 ES6、易错点标注、格式干净、去掉多余序号、定义精准、对比清晰,逐题打磨到无扣分点。

  1. 希望获取到页面中所有的 checkbox 怎么做

完整实现逻辑为,首先获取页面中全部 input 标签元素,接着循环遍历每一个 input 标签,通过条件判断当前元素 type 属性值是否为 checkbox,之后新建一个空数组,将筛选出的复选框元素依次存入数组,最后遍历该数组即可得到页面中所有 checkbox 元素。

原生 JS 满分代码

js

// 获取页面所有input标签

var inputEle = document.getElementsByTagName('input');

// 定义空数组存放复选框

var checkboxArr = [];

// 循环筛选

for(var i = 0; i < inputEle.length; i++){

// 严格全等判断,避免类型隐式转换

if(inputEle[i].type === 'checkbox'){

checkboxArr.push(inputEle[i]);

}

}

// 遍历输出所有复选框

for(var j = 0; j < checkboxArr.length; j++){

console.log(checkboxArr[j]);

}

扣分规避点:必须使用===严格相等;禁止直接使用querySelectorAll投机取巧,严格按照题目四步流程实现。

  1. 请写出 js 添加 删除 替换 插入元素所用的方法

添加元素时使用 document.createElement 创建元素节点,使用 document.createTextNode 创建文本节点,通过 appendChild 将节点追加至父元素内部末尾完成页面渲染。

删除元素依靠 removeChild 方法,由父元素调用该方法,传入需要被移除的子元素实现删除。

替换元素使用 replaceChild 方法,传入新创建的元素与需要被替换的旧元素完成 DOM 替换。

插入元素使用 insertBefore 方法,将新元素插入到指定参照元素的前方位置。

节点创建方法仅在内存中生成节点,不会直接渲染到页面,必须通过追加或插入方法挂载至 DOM 树才会在页面显示。

  1. js 怎样改变元素的内容、属性、样式

改变元素内容可以通过元素.innerHTML 赋值实现,该方式支持解析 HTML 标签;也可以使用元素.innerText 赋值,仅展示纯文本内容不解析标签。

改变元素原生属性可直接通过元素。属性名赋值修改,自定义属性需要使用 setAttribute 方法进行设置。

改变元素行内样式使用元素.style. 样式名赋值,样式名称采用驼峰命名规则,不能使用短横线命名。

标准示例

js

// 修改内容

box.innerHTML = '测试文本';

// 修改属性

img.src = 'test.png';

// 修改样式

box.style.backgroundColor = '#f00';

  1. js 怎样获取浏览器窗口尺寸

window.innerWidth 用于获取浏览器可视区域的宽度,window.innerHeight 用于获取浏览器可视区域的高度。

该尺寸不包含浏览器地址栏、菜单栏、滚动条区域,窗口大小发生变化时数值实时更新。

兼容低版本 IE 浏览器可使用 document.documentElement.clientWidth 与 document.documentElement.clientHeight。

  1. js 怎样控制浏览器前进、后退、页面跳转

window.history.forward () 可以控制浏览器访问历史记录中的下一页实现前进功能。

window.history.back () 可以控制浏览器访问历史记录中的上一页实现后退功能。

window.history.go (number) 可跳转到历史记录中指定页面,正数代表前进,负数代表后退,数值为 0 代表刷新当前页面。

window.location.assign (url) 实现页面跳转,跳转后保留历史记录,支持后退返回上一页。

window.location.replace (url) 实现页面替换跳转,不会生成新历史记录,无法后退返回原页面。

window.location.href = url 赋值跳转,功能与 assign 完全一致。

  1. js 绑定事件的方法有几种

行内绑定直接在 HTML 标签中书写 on 开头事件属性,直接调用执行函数,结构耦合度高,维护性差。

DOM0 级绑定在 JS 中获取 DOM 元素后直接对事件属性赋值函数,同一个元素同名事件仅能绑定一次。

DOM2 级事件监听通过 addEventListener 绑定事件,支持给同一元素绑定多个同名事件,是开发中标准推荐写法。

  1. js 常用的几种事件,请分别描述一下

click 事件在鼠标于元素上按下并松开时触发。

dblclick 事件在鼠标于元素上连续两次按下并松开时触发。

mouseup 事件在鼠标按键在对应元素上松开时触发。

mousemove 事件在鼠标在元素区域内移动时持续触发。

keyup 事件在键盘按键松开时触发。

keypress 事件在按下键盘字符按键时触发。

reset 事件在点击表单重置按钮时触发。

select 事件在输入框内选中部分文本内容时触发。

touchstart 事件在移动端手指触摸屏幕时触发。

touchmove 事件在移动端手指在屏幕上滑动时触发。

touchend 事件在移动端手指离开屏幕时触发。

wheel 事件在用户滚动鼠标滚轮时触发。

load 事件在整个页面及所有外部资源全部加载完成后触发。

resize 事件在浏览器窗口尺寸发生改变时触发。

scroll 事件在页面滚动行为发生时触发。

33.oninput 和 onchange 事件有什么区别

oninput 事件在用户输入内容、元素值发生实时变化时立即触发,支持 input、textarea 元素,无法作用于下拉选择框,适合实时输入校验场景。

onchange 事件在元素内容修改完成,且元素失去焦点后才会触发,支持 input、textarea、select、keygen 元素,适用于输入完成后校验场景。

核心区别:oninput 实时触发,onchange 失焦触发;onchange 支持下拉框,oninput 仅用于文本输入类元素。

  1. 什么是数组,什么是对象,并说出他们的区别

数组是一种有序的数据集合,本质属于特殊对象,依靠数字索引对数据进行存储与访问。

对象是无序的键值对数据集合,由属性名与属性值一一对应组成,依靠属性名完成数据访问。

数组有序存储数据,对象无序存储数据;数组通过数字索引访问元素,对象通过属性名访问数据;数组采用索引列表结构,对象采用键值对结构;数组自带 length 属性获取长度,对象无直接长度属性;数组多用于存储批量有序数据,对象多用于描述单一实体信息;判断数组使用 Array.isArray () 方法,判断普通对象使用 typeof 运算符。

相关推荐
凯瑟琳.奥古斯特9 小时前
常见加密算法及应用
java·开发语言·网络·网络协议·职场和发展
放下华子我只抽RuiKe59 小时前
React 从入门到生产(八):测试与部署
前端·javascript·深度学习·react.js·前端框架·ecmascript·集成学习
Dxy12393102169 小时前
JS列表获取指定范围值的 N 种方法
开发语言·javascript·ecmascript
froginwe119 小时前
Memcached CAS 命令详解
开发语言
蜡笔小电芯9 小时前
【Electron】第2章—BrowserWindow 与 Electron 窗口机制
前端·javascript·electron
zhangxingchao9 小时前
AI 大模型面试核心二:微调、RAG、MCP、Agent 与工程落地
前端·人工智能·后端
ZC跨境爬虫9 小时前
跟着 MDN 学CSS day_15:(掌握CSS背景与边框的创造性用法)
前端·css·ui·html·tensorflow
zhangxingchao9 小时前
AI 大模型面试核心三: RAG、Agent 到 Prompt Engineering 的工程化理解
前端·人工智能·后端
Hilaku9 小时前
从 15MB 减到 800KB,一行 ffmpeg 解决3D 渲染卡顿问题
前端·javascript·程序员