• 撩课-Web大前端每天5道面试题-Day2


    1.伪类与伪元素的区别?

    1) 定义区别

    伪类
          伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。
    前者包含那些匹配指定状态的元素,比如:visited,:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child,:first-of-type,:target。
    
    伪元素
       伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。
    比如::before表示选择元素内容的之前内容,也就是"";::selection表示选择元素被选中的内容。      
    

      

    2) 语法区别

      在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。
       但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。
    

      

    3) 伪类/伪元素一览表

    <伪类如下>
     
    :active 选择正在被激活的元素  1
    :hover  选择被鼠标悬浮着元素  1
    :link   选择未被访问的元素   1
    :visited    选择已被访问的元素   1
    :first-child    选择满足是其父元素的第一个子元素的元素 2
    :lang   选择带有指定 lang 属性的元素   2
    :focus  选择拥有键盘输入焦点的元素   2
    :enable 选择每个已启动的元素  3
    :disable    选择每个已禁止的元素  3
    :checked    选择每个被选中的元素  3
    :target 选择当前的锚点元素   3
    
    <伪元素如下>
     
    ::first-letter  选择指定元素的第一个单词    1
    ::first-line    选择指定元素的第一行  1
    ::after 在指定元素的内容后面插入内容  2
    ::before    在指定元素的内容前面插入内容  2
    ::selection 选择指定元素中被用户选中的内容 3
    

      

    2. css样式优先级,各自的权重

    优先级别:
     
    通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式
     
    权重:
    
    第一等:代表内联样式,如: style=””,权值为1000。
    第二等:代表ID选择器,如:#content,权值为100。
    第三等:代表伪类和属性选择器,如.content,权值为10。
    第四等:代表类型选择器和伪元素选择器,如div p,权值为1。

    3.常见的DOM操作有哪些?

    主要操作包括:
    查找节点,新建节点,添加节点,删除节点,修改节点;
    开发中,我们用到最多的是element类型,
    用于表现HTML元素,提供了对元素标签名、子节点及特性的访问。

    1)DOM常用操作举例:

    // 查找节点
    document.getElementById('id属性值'); // 返回拥有指定id的第一个对象的引用        
    document.getElementsByClassName('class属性值'); // 返回拥有指定class的对象集合

    2)新建节点:

    // 创建新的元素节点
    document.createElement('元素名');
    // 创建新的属性节点 
    document.createAttribute('属性名');
    // 创建新的文本节点
    document.createTextNode('文本内容');
    // 创建新的注释节点
    document.createComment('注释节点');

    3)添加节点:

    var element = document.getElementsByTagName('p')[0];
    element.innerHTML='新增文本内容'; //插入文本内容

    4)删除节点:

    parentNode.removeChild( existingChild ); //删除已有的子节点,返回值为删除节点
    element.removeAttribute('属性名'); // 删除具有指定属性名称的属性,无返回值
    element.removeAttributeNode( attrNode ); // 删除指定属性,返回值为删除的属性

    5)修改节点:

    // 添加属性节点,修改属性值
    element.setAttribute( attributeName, attributeValue );

    6)属性节点:

    // 增添id属性,并修改class属性值
    var element = document.getElementsByTagName('p')[0];
    
    // 添加属性节点
    var attr = document.createAttribute('id');
    attr.value = 'idValue';
    element.setAttributeNode(attr);
    
    // 修改属性值
    var attr = document.createAttribute('class');
    attr.value = 'classNewValue';
    element.setAttributeNode(attr);

    7)DOM事件:

    允许 JavaScript 对 HTML 事件作出反应,主要包括:
    
    onclick 事件——当用户点击时
    onload 事件——用户进入
    onunload 事件——用户离开
    onmouseover事件——鼠标移入
    onmouseout事件——鼠标移出
    onmousedown事件——鼠标按下
    onmouseup 事件——鼠标抬起

    4.判断数据类型有哪些方法?

    1)typeof

    typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。
    返回的结果用该类型的字符串(全小写字母)形式表示,
    包括以下 7 种:number、boolean、symbol、string、object、undefined、function 等。

    2) instanceof

    instanceof 是用来判断 A 是否为 B 的实例,
    表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。 
    在这里需要特别注意的是:instanceof 检测的是原型

    3) constructor

    当一个函数 F被定义时,JS引擎会为F添加 prototype 原型,
    然后再在 prototype上添加一个 constructor 属性,并让其指向 F 的引用。

    4)toString

    toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]]点击并拖拽以移动 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。对于 Object 对象,直接调用 toString()  就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。

    5.介绍一下 JS 的基本数据类型?

    Undefined、Null、Boolean、Number、String
    

      

    6.介绍一下 JS 有哪些内置对象?

    Object 是 JavaScript 中所有对象的父对象; 
    数据封装类对象:Object、Array、Boolean、Number、String 
    其他对象:Function、Argument、Math、Date、RegExp、Error

    7.push()-pop()-shift()-unshift()分别是什么功能?

    // push 方法
    // 将新元素添加到一个数组中,并返回数组的新长度值。
    var a=[1,2,3,4];
    a.push(5);
    
    // pop 方法
    // 移除数组中的最后一个元素并返回该元素。
    var a=[1,2,3,4];
    a.pop();
    
    // shift 方法
    // 移除数组中的第一个元素并返回该元素。
    var a=[1,2];
    a.shift();
    
    // unshift 方法
    // 将指定的元素插入数组开始位置并返回该数组。
    var a=[1,2];
    a.unshift(0);

    8.null 和 undefined 有何区别?

    1) null 表示一个对象被定义了,值为“空值”;
     undefined 表示不存在这个值。
    
    typeof undefined //"undefined" 
    2) undefined :是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但是还没有定义。
    当尝试读取时会返回 undefined; 例如变量被声明了,但没有赋值时,就等于undefined。 
    
    typeof null //"object"  null : 是一个对象(空对象, 没有任何属性和方法);
    3) 注意: 在验证null时,一定要使用 === ,因为 == 无法分别 null 和 undefined

    9.new操作符具体干了什么?

    1)  创建一个空对象,并且 this 变量引用该对象。
    2)  属性和方法被加入到 this 引用的对象中。 
    3)  新创建的对象由 this 所引用。

    10.你对 JSON 了解吗?

    1) JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。 
    2) 它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小。 
    如:{"age":"12", "name":"back"}

    1.伪类与伪元素的区别?

    1) 定义区别

    伪类
          伪类用于选择DOM树之外的信息,或是不能用简单选择器进行表示的信息。
    前者包含那些匹配指定状态的元素,比如:visited:active;后者包含那些满足一定逻辑条件的DOM树中的元素,比如:first-child:first-of-type,:target。
    
    伪元素
       伪元素为DOM树没有定义的虚拟元素。不同于其他选择器,它不以元素为最小选择单元,它选择的是元素指定内容。
    比如::before表示选择元素内容的之前内容,也就是""::selection表示选择元素被选中的内容。                
    

    2) 语法区别

      在CSS3中,伪类与伪元素在语法上也有所区别,伪元素修改为以::开头。
      但因为历史原因,浏览器对以:开头的伪元素也继续支持,但建议规范书写为::开头。
    

    3) 伪类/伪元素一览表

    <伪类如下>
     
    :active 选择正在被激活的元素  1
    :hover  选择被鼠标悬浮着元素  1
    :link   选择未被访问的元素   1
    :visited    选择已被访问的元素   1
    :first-child    选择满足是其父元素的第一个子元素的元素 2
    :lang   选择带有指定 lang 属性的元素   2
    :focus  选择拥有键盘输入焦点的元素   2
    :enable 选择每个已启动的元素  3
    :disable    选择每个已禁止的元素  3
    :checked    选择每个被选中的元素  3
    :target 选择当前的锚点元素   3
    
    <伪元素如下>
     
    ::first-letter  选择指定元素的第一个单词    1
    ::first-line    选择指定元素的第一行  1
    ::after 在指定元素的内容后面插入内容  2
    ::before    在指定元素的内容前面插入内容  2
    ::selection 选择指定元素中被用户选中的内容 3
    

    2. css样式优先级,各自的权重

    优先级别:
     
    通用选择器(*) < 元素(类型)选择器 < 类选择器 < 属性选择器 < 伪类 < ID 选择器 < 内联样式
     
    权重:
    
    第一等:代表内联样式,如: style=””,权值为1000。
    第二等:代表ID选择器,如:#content,权值为100。
    第三等:代表伪类和属性选择器,如.content,权值为10。
    第四等:代表类型选择器和伪元素选择器,如div p,权值为1。
    

    3.常见的DOM操作有哪些?

    主要操作包括:
    查找节点,新建节点,添加节点,删除节点,修改节点;
    开发中,我们用到最多的是element类型,
    用于表现HTML元素,提供了对元素标签名、子节点及特性的访问。

    1)DOM常用操作举例:

    // 查找节点
    document.getElementById('id属性值'); // 返回拥有指定id的第一个对象的引用        
    document.getElementsByClassName('class属性值'); // 返回拥有指定class的对象集合
    

    2)新建节点:

    // 创建新的元素节点
    document.createElement('元素名');
    // 创建新的属性节点 
    document.createAttribute('属性名');
    // 创建新的文本节点
    document.createTextNode('文本内容');
    // 创建新的注释节点
    document.createComment('注释节点');
    

    3)添加节点:

    var element = document.getElementsByTagName('p')[0];
    element.innerHTML='新增文本内容'; //插入文本内容
    

    4)删除节点:

    parentNode.removeChild( existingChild ); //删除已有的子节点,返回值为删除节点
    element.removeAttribute('属性名'); // 删除具有指定属性名称的属性,无返回值
    element.removeAttributeNode( attrNode ); // 删除指定属性,返回值为删除的属性
    

    5)修改节点:

    // 添加属性节点,修改属性值
    element.setAttribute( attributeName, attributeValue );
    

    6)属性节点:

    // 增添id属性,并修改class属性值
    var element = document.getElementsByTagName('p')[0];
    
    // 添加属性节点
    var attr = document.createAttribute('id');
    attr.value = 'idValue';
    element.setAttributeNode(attr);
    
    // 修改属性值
    var attr = document.createAttribute('class');
    attr.value = 'classNewValue';
    element.setAttributeNode(attr);
    

    7)DOM事件:

    允许 JavaScript 对 HTML 事件作出反应,主要包括:
    
    onclick 事件——当用户点击时
    onload 事件——用户进入
    onunload 事件——用户离开
    onmouseover事件——鼠标移入
    onmouseout事件——鼠标移出
    onmousedown事件——鼠标按下
    onmouseup 事件——鼠标抬起
    

    4.判断数据类型有哪些方法?

    1)typeof

    typeof 是一个操作符,其右侧跟一个一元表达式,并返回这个表达式的数据类型。
    返回的结果用该类型的字符串(全小写字母)形式表示,
    包括以下 7 种:number、boolean、symbol、string、object、undefinedfunction 等。
    

    2) instanceof

    instanceof 是用来判断 A 是否为 B 的实例,
    表达式为:A instanceof B,如果 A 是 B 的实例,则返回 true,否则返回 false。 
    在这里需要特别注意的是:instanceof 检测的是原型
    

    3) constructor

    当一个函数 F被定义时,JS引擎会为F添加 prototype 原型,
    然后再在 prototype上添加一个 constructor 属性,并让其指向 F 的引用。
    

    4)toString

    toString() 是 Object 的原型方法,调用该方法,默认返回当前对象的 [[Class]]点击并拖拽以移动 。这是一个内部属性,其格式为 [object Xxx] ,其中 Xxx 就是对象的类型。对于 Object 对象,直接调用 toString()  就能返回 [object Object] 。而对于其他对象,则需要通过 call / apply 来调用才能返回正确的类型信息。
    

    5.介绍一下 JS 的基本数据类型?

    Undefined、Null、BooleanNumberString
    

    6.介绍一下 JS 有哪些内置对象?

    Object 是 JavaScript 中所有对象的父对象; 
    数据封装类对象:ObjectArrayBooleanNumberString 
    其他对象:Function、Argument、MathDateRegExpError
    

    7.push()-pop()-shift()-unshift()分别是什么功能?

    // push 方法
    // 将新元素添加到一个数组中,并返回数组的新长度值。
    var a=[1,2,3,4];
    a.push(5);
    
    // pop 方法
    // 移除数组中的最后一个元素并返回该元素。
    var a=[1,2,3,4];
    a.pop();
    
    // shift 方法
    // 移除数组中的第一个元素并返回该元素。
    var a=[1,2];
    a.shift();
    
    // unshift 方法
    // 将指定的元素插入数组开始位置并返回该数组。
    var a=[1,2];
    a.unshift(0);
    

    8.null 和 undefined 有何区别?

    1) null 表示一个对象被定义了,值为“空值”;
     undefined 表示不存在这个值。
    
    typeof undefined //"undefined" 
    2) undefined :是一个表示"无"的原始值或者说表示"缺少值",就是此处应该有一个值,但是还没有定义。
    当尝试读取时会返回 undefined; 例如变量被声明了,但没有赋值时,就等于undefinedtypeof null //"object"  null : 是一个对象(空对象, 没有任何属性和方法);
    3) 注意: 在验证null时,一定要使用 === ,因为 == 无法分别 nullundefined
    

    9.new操作符具体干了什么?

    1)  创建一个空对象,并且 this 变量引用该对象。
    2)  属性和方法被加入到 this 引用的对象中。 
    3)  新创建的对象由 this 所引用。
    

    10.你对 JSON 了解吗?

    1) JSON(JavaScript Object Notation)是一种轻量级的数据交换格式。 
    2) 它是基于JavaScript的一个子集。数据格式简单,易于读写,占用带宽小。 
    如:{"age":"12", "name":"back"}
  • 相关阅读:
    【题解】 [yLOI2019] 梅深不见冬
    【题解】[CSP-S2019] Emiya 家今天的饭
    【题解】Acwing400. 太鼓达人
    【题解】[ZJOI2007]最大半连通子图
    【题解】Acwing395. 冗余路径
    【题解】CF487E Tourists
    “𣎴” 这个字存Mysql Incorrect string value: 'xF0xA3x8ExB4' for column 'msg' at row 1
    logminer分析异机db的归档日志(外部文件)
    logminer存储在外部文件(external file)
    logminer分析在线redo log
  • 原文地址:https://www.cnblogs.com/gxq666/p/10030165.html
Copyright © 2020-2023  润新知