Web大前端面试题-Day2

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

1) 定义区别

伪类

伪类用于选择DOM树之外的信息，
或是不能用简单选择器进行表示的信息。
前者包含那些匹配指定状态的元素，
比如:visited，:active；
后者包含那些满足一定逻辑条件的DOM树中的元素，
比如:first-child，:first-of-type，：target。

伪元素
伪元素为DOM树没有定义的虚拟元素。
不同于其他选择器，它不以元素为最小选择单元，
它选择的是元素指定内容。
比如::before表示选择元素内容的之前内容，
也就是""；::selection表示选择元素被选中的内容。                

2） 语法区别

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

3） 伪类/伪元素一览表

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

<伪元素如下>
::first-letter  选择指定元素的第一个单词
1::first-line    选择指定元素的第一行  
1::after 在指定元素的内容后面插入内容  
2::before    在指定元素的内容前面插入内容  
2::selection 选择指定元素中被用户选中的内容 

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