对HTML语义化的理解、px em rem 取用选择依据、对this的理解、JS中的预解析与变量声明提升、DOM里document的常用的查找访问节点的方法并做说明（Data 2023/1/12）

1.简述一下你对 HTML 语义化的理解

（1）HTML 语义化让页面的内容结构化，结构更清晰，便于对浏览器、搜索引擎解析；

（2）即使没有CSS，也能以一种文档格式显示，容易阅读；

（3）搜索引擎的爬虫也依赖于 HTML 标记来确定上下文和各个关键字的权重，有利于SEO

（4）使阅读源代码的人更容易将网站分块，便于阅读、维护和理解。

2.px em rem 取用选择依据？

1）px 像素（Pixel）。绝对单位。像素 px 是相对于显示器屏幕分辨率而言的，是一 个虚拟长度单位，是计算机系统的数字化图像长度单位，如果 px 要换算成物理长度，需 要指定精度 DPI。

2）em 是相对长度单位，相对于当前对象内文本的字体尺寸。如当前对行内文本的字 体尺寸未被人为设置，则相对于浏览器的默认字体尺寸。它会继承父级元素的字体大小， 因此并不是一个固定的值。

3）rem 是 CSS3 新增的一个相对单位（root em，根 em），使用 rem 为元素设定 字体大小时，仍然是相对大小，但相对的只是 HTML 根元素。

4）区别：IE 无法调整那些使用 px 作为单位的字体大小，而 em 和 rem 可以缩放， rem 相对的只是 HTML 根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过 它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合 的连锁反应。目前，除了 IE8 及更早版本外，所有浏览器均已支持 rem。

3. 说说你对 this 的理解？ ⚡⚡⚡

this 是一个关键字，它代表函数运行时，自动生成的一个内部对象，只能在函数 内部使用。

(自己的话：this是执行上下文对象的一个属性)

1.this在函数外被调用时，也就是说在全局环境中被调用,指向全局对象window

2. 函数内部this：谁(哪个对象)在调用函数，this就指向谁(哪个对象)

const div = document.querySelector('div')
div.addEventListener('click', function () {
       console.log(this)
       console.log(this === div)
       //this指向事件源，操作this，就等同于操作事件源
    })

3.作为对象的方法调用, 谁调用当前的方法,this指向当前这个对象

const obj = {
    name: 'ikun',
    fn: function () {
        console.log(this) // this指向obj
        this.name = '唱跳rap'
    }
 }
 obj.fn()

4.箭头函数this指向：向上级查找(沿用上级的this)

 const obj = {
      name: 'ikun',
      fn: () => {
        console.log(this)// this指向window
      }
    }
obj.fn()

 一般对于事件函数的回调，建议写普通函数，因为如果写箭头函数，this就不再指向事件源了

5.构造函数中的this指向new出来的实例(对象) （new 会改变 this 的指向）

function Person (name, age, gender) {
      // 构造函数中的this指向new出来的实例(对象)
      // 此时this是个空对象、相当于 this = { }
      this.name = name
      this.age = age
      this.gender = gender
    }

    // 实例化对象
    const qz = new Person('刘诗诗', 18, '女')
    console.log(qz)

    const zm = new Person('霍建华', 30, '男')
    console.log(zm)

6. call/apply 调用 this 指向 apply 方法的第一个参数

const obj = {
      uname: '坤坤',
      age: 18
    }

    function fn (x, y) {
      console.log(this, x + y)
    }

 fn(10, 20)// window 30
 fn.call(obj, 10, 20)// obj  30
 fn.apply(obj, [10, 20])// obj  30

4.JavaScript 中的 预解析与变量声明提升？

1）预解析：

在代码整体执行之前，先解析一部分。

预解析之后，代码才会从上往下依次整体执行，但是预解析执行过的代码不会 重复执行。

js 预解析干了什么事：js 中预解析会把声明部分的代码预先执行。

声明相关的代码可以分为两部分：

1. 变量声明 通过 var 关键字定义的变量。
2. 函数声明 通过 function 关键字声明的函数

预解析时如果遇到重复的变量声明，那么忽略。

预解析时如果遇到重复的函数声明，保留后面的函数。 

2）变量声明提升：

使用 var 关键字定义的变量，被称为变量声明；  

变量提升：把var声明变量提升到当前作用域的最顶部去执行，只提升声明，不提升赋值

console.log(a)
var a = 1

（var在全局下声明的变量会自动成为window对象属性,let/const不会） 

3）函数提升： 

函数提升：把function声明的有名函数提升到当前作用域的最顶部，然后再执行 

函数声明提升的特点是，在函数声明的前面，可以调用这个函数

fn()
function fn () {
   console.log('fn')
}

5.简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法并做简单说明

1. document.querySelector('选择器')   根据选择器查找元素，只会找第一个满足条件的（只找一个）；
2. document.querySelectorAll('选择器')   据选择器查找所有符合元素；
3. document.getElementById   根据元素 id 查找元素；
4. document.getElementByName   根据元素 name 查找元素；
5. document.getElementTagName  根据指定的元素名查找元素；