web前端培训:2022前端基础面试题 

  CSS部分
  
  什么是外边距重叠?重叠的结果是什么?
  
  外边距重叠就是margin-collapse。
  
  在CSS当中,相邻的两个盒子(可能是兄弟关系也可能是祖先关系)的外边距可以结合成一个单独的外边距。这种合并外边距的方式被称为折叠,并且因此结合成的外边距称为折叠外边距。
  
  折叠结果遵循下列计算规则:
  
  两个相邻的外边距都是正数时,折叠结果是它们两者之间较大的值。
  
  两个相邻的外边距都是负数时,折叠结果是两者绝对值的较大值。
  
  两个外边距一正一负时,折叠结果是两者的相加的和。
  
  rgba()和opacity 的透明效果有什么不同?
  
  两者都能实现透明的效果。
  
  不同的是opacity作用于元素,以及元素内所有内容的透明度。
  
  而rgba()只作用于元素的颜色或其背景色。(设置rgba透明的元素的子元素不会继承透明效果!)
  
  display : none 与visibility:hidden的区别是什么?
  
  display:隐藏对应的元素但不挤占该元素原来的空间。
  
  visibility:隐藏对应的元素并且挤占该元素原来的空间。
  
  使用CSS display:none属性后,HTML元素(对象)的宽度、高度等各种属性值都将“丢失”;
  
  而使用visibility:hidden属性后,HTML元素(对象)仅仅是在视觉上看不见(完全透明),而它所占据的空间位置仍然存在。
  
  JS部分
  
  对于应届生来说,不会考一些非常高深的JS,更多的是注重基础部分,看看是否能够掌握透彻基础知识。所以JS基础要求会比较高。
  
  怎样添加、移除、移动、复制、创建和查找节点
  
  1)创建新节点
  
  createElement() // 创建一个具体的元素
  
  createTextNode() // 创建一个文本节点
  
  2)添加、移除、替换、插入
  
  appendChild() // 添加
  
  removeChild() // 移除
  
  replaceChild() // 替换
  
  insertBefore() // 插入
  
  3)查找
  
  getElementsByTagName() // 通过标签查找
  
  getElementsByName() // 通过元素Name属性查找
  
  getElementById() // 通过元素Id属性查找
  
  querySelector() // 匹配元素的 CSS 选择器(id, 类, 类型, 属性, 属性值等)
  
  希望获取到页面中所有的checkbox怎么做?(不使用第三方框架)
  
  let domList = document.getElementsByTagName('input')
  
  let checkBoxList = [] // 所有 checkbox
  
  let len = domList.length
  
  while(len--){ // while 效率 比 for 高
  
  if(domList[len].type == 'checkbox'){
  
  checkBoxList.push(domList[len])
  
  设置一个已知ID的DIV的html内容为xxxx,字体颜色设置为黑色
  
  let dom = document.getElementById('ID')
  
  dom.innerHTML = 'xxxx'
  
  dom.style.color= '#000'
  
  已有字符串foo = 'get-element-by-id',写一个function将其转换为驼峰表示法,即 getElmentById
  
  function switchToHump(str){
  
  let arr = str.split('-') // [get,element,by,id]
  
  for(let i = 1; i < arr.length; i++){
  
  arr[i] = arr[i].charAt(0).toUpperCase()+arr[i].substr(1,arr[i].length-1)#p#分页标题#e#
  
  str = arr.join("")
  
  return str
  
  稍微分析一下这里面最难的那一串啥意思
  
  arr[i].charAt(0).toUpperCase() 意思就是获取该字符串第0个字符,并将其转换为大写
  
  arr[i].substr(1,arr[i].length-1) 意思就是 提取从第1个字符开始到最后一个字符
  
  将其用“+” 来连接,就得到了驼峰字符串啦~
  
  输出今天的日期,以YYYY-MM-DD的方式
  
  我知道百度有,但是面试的时候可不会让你百度,这个东西会经常用到的,www.atguigu.com比如用户操作之后需要将操作时间按照格式传给后端等等。如果这个都不会,那可是很糟糕的。
  
  let d = new Date()
  
  let year = d.getFullYear() // 是FullYear
  
  let month = d.getMonth() + 1 // 月份 0 代表 1月 所以 + 1
  
  let day = d.getDate() // 是Date 不是 day
  
  // 注意了,题目要求的是 MM 的格式,如果是1月要变成 01月
  
  month = month < 10 ? '0' + month : month
  
  day = day < 10 ? '0' + day : day
  
  alert(year + '-' + month + '-' + day)