欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-10-19 23:38:04
1.伪类与伪元素的区别? 1) 定义区别 2) 语法区别 3) 伪类/伪元素一览表 2. css样式优先级,各自的权重 3.常见的DOM操作有哪些? 主要操作包括:查找节点,新建节点,添加节点,删除节点,修改节点;开发中,我们用到最多的是element类型,用于表现HTML元素,提供了对元素标签名、 ......

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、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"}