常见面试题（一）

1、div+css 的布局较 table 布局有什么优点？

table布局的优缺点

优点：

布局简单、快捷、兼容性好 容易上手

缺点：

改动不便，需要调整，工作量大

div+css布局的优缺点

优点：

布局更加灵活多样，能够通过样式选择来实现界面设计方面的更多要求

DIV精简了页面，提高了灵活性。而精通CSS的设计师能避免DIV的重复嵌套，从而大大提高页面加载速度，以及站点的可以维护性。

布局改版方便，不需要过多地变动页面内容，通常只要更换相应的css样式就可以将网页变成另外一种风格展现出来。

布局可以让一些重要的链接和文字信息等优先让搜索引擎抓取，内容更便于搜索。

加快了页面的加载速度

缺点：

要考虑兼容版本浏览器

有可能相当复杂，甚至比较庞大，如果CSS文件调用出现异常，那么整个网站将变得惨不忍睹。

2、有哪项方式可以对一个 dom设置它的 CSS 样式?

//第一种方式直接用style更改样式，这样添加的样式为行内样式
div.style.属性='属性值'
//第二种方法，先将样式写在一个类名中之后使用className将这个类名添加到元素上
     <style>
    div{
        width: 100px;
        height: 100px;
    }
    </style>
   document.querySelector('div').className = 'div'

// 第三种方法
   直接在标签内写样式，行内样式
// 第四种方法
   内部样式，将css样式写在style内，不在直接写进标签里
// 第五种方法
   外部样式，将css样式单独写进 一个css文件中，在引入这个css文件

3、行内元素和块级元素的具体区别是什么？

行内元素的 padding 和 margin 可 设置吗？

行内元素：

行内元素（内联元素）：不占有独立的区域，仅仅依靠自己的字体大小或者是图像大小来支撑结构。 不可以设置宽高 常见的行内元素有：,,,,,等 宽高要靠元素内容撑开

行内元素的margin 和 padding 只有左右可以生效，上下无效 行内元素内不能放块元素等，只能放文本

块级元素：

块级元素不管内容大小都会独占一行，可以设置宽高，margin和padding都可以使用，块元素内可以放任何元素

常见的块元素：

~

,

,

,

• ,
  1. ,

行内块元素 ：

行内块元素包含了块元素和行内元素的特点，可以设置宽高并且不会独占一行，margin和paddig也都可以使用，行内块元素内可以放任何元素

4、BFC 是什么?

BFC是块级格式化环境

BFC是CSS中隐藏的一个属性，当给某个元素设置指定属性时，可以开启元素的BFC

开启BFC后的特点：（可以使用开启BFC解决以下问题）

1.不会被浮动元素覆盖

2.子元素和父元素的外边距不会重叠

3.可以包含浮动的子元素

通过以下方式开启元素的BFC

1. float 的值不是 none
2. position 的值不是static或者relative。
3. display的值是inline-block、table-cell、flex、table-caption或者inline-flex
4. overflow 的值不是 visible

总结来说BFC是一个隐藏的属性，可以通过给元素设置某些属性来解决一些问题，比如说1.浮动后父元素的高度塌陷问题，2.子盒子与父盒子的外边距重叠问题，3.当一个元素浮动后，下一个元素会自动往上排，导致浮动的元素覆盖了下面的元素的问题，这些都可以通过

使用以下方式可以直接解决父元素高度塌陷，和外边距重叠问题

  
        .box3::after,
        .box3::before {
            content: '';
            display: table;
            clear: both;
        }

5、谈谈你对javascript 的同源策略的理解

1.同源策略是一种约定。是浏览器最核心最基本的安全功能，避免其收到攻击，或被窃取数据

同源：协议 域名 端口

例：
http://www.test.com:8000/test.html

协议 子域名 主域名 端口 请求资源地址
只有协议 域名 端口一致才是同源

注意：即使两个不同的域名指向同一个ip地址，也是非同源

同源是浏览器的一种行为，当我们的请求发出去了，服务器也响应了，但是无法接收这就是非同源

6、编写一个数组去重的方法

var arr = [2, 8, 5, 0, 5, 2, 6, 7, 2]; => [2,8,5,0,6,7]

// 先封装成一个函数
// 声明一个空数组接受去重之后的数组
// 用for循环先遍历去重之前的数组
// 让数组的每个元素都用indexof这个方法判断是否存在，如果不存在就是-1，就把这个数放进新数组的最后
// 如果不等于-1也就是存在相同的，就把相同的元素删除

function sum(arr) {
            var arr2 = []
            for (var n = 0; n < arr.length; n++) {
                if (arr2.indexOf(arr[n]) == -1) {
                    arr2.push(arr[n]);
                } else {
                    arr.splice(n, 1);
                    n--;
                }
            }
            return arr2
        }
        console.log(sum([2, 8, 5, 0, 5, 2, 6, 7, 2]));

7、当一个 DOM 节点被点击时候，我们希望能够执行一个函数，有几种方法实现，应该怎么做？

  <script>
      //注册DOM 0级事件
        // 第一种方法
        document.querySelector('div').onclick = function() {

            }

        // 第二种方法
        //注册DOM 2级事件
        document.querySelector('div').addEventListener('click', function() {

        })
    </script>

8、看下列代码输出结果是什么？解释原因。

var a; 
alert(typeof a); 
alert(b); 
b=10;
alert(typeof b);

1.首先a只是一个变量名，并没有值所以检测不到a是什么类型所以会弹出undefined

之后会出现一个报错，因为代码是从上到下执行的，alert(b)中的b在执行这行代码的时候在前面根本找不到这个b，所以会直接报错，报错之后的代码就不会在运行了，最后一个alert没有运行

9、输出今天的日期，以 YYYY-MM-DD 的方式，

比如今天是 2021年 4 月 8 日， 则输出 2021-04-08

 let daT = new Date()
        var FullYear = daT.getFullYear()
        console.log(FullYear);
        var Month = daT.getMonth() < 10 ? "0" + (daT.getMonth() + 1) : (daT.getMonth() + 1)
        console.log(Month);
        var date = daT.getDate() < 10 ? "0" + daT.getDate() : daT.getDate()
        console.log(date);
        document.documentElement.innerHTML = '今天是' + FullYear + '年-' + Month + '-' + date

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ojnzTXtU-1618402833480)(C:\Users\阎涛\AppData\Roaming\Typora\typora-user-images\image-20210408092424300.png)]

10、看下列代码，将会输出什么?为什么？

<script>
    var foo = 1;
    function f(){
        console.log(foo);
        var foo = 2;
        console.log(foo);
    }

    f();
</script>

输出的结果为undfinde和2

首先因为全局变量和局部变量都有foo的变量声明，这时调用f()这个函数，首先执行函数内的第一个console.log(foo)

但此时全局和局部都有foo这个变量，但是因为是在函数内部执行，所以它会首先去找函数内部声明的foo,找到了函数内部的foo,因为函数内部声明的foo在第一个console.log下面，函数内部的foo变量提升，但是只是变量提升，变量的值并没有提升，所以第一个console.log只找到了foo这个变量，并没有找到值，所以会包undefined

第二个console.log输出的是2，还是因为会先从函数内部寻找变量，此时第二个console.log在函数内部声明的foo下面，所以第二个console.log既可以找到foo也可以获取到它的值，所以就打印2

可以看成这样:

        
        var foo = 1;
        function f() {
            var foo;
            console.log(foo);
             foo = 2;
            console.log(foo);
        }
        f();

11、用 js 实现随机选取 10–100 之间的 10 个整数数字，存入一个数组，并排序

       var arr = []
        var j = 0
        for (var i = 1; i <= 10; i++) {
            arr[j] = parseInt(Math.random() * (100 - 10 + 1) + 10)
            j++
        }
        arr2 = arr.sort(function(a, b) {
            return a - b;
        })
        console.log(arr2);

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-KU1c98j2-1618402833486)(C:\Users\阎涛\AppData\Roaming\Typora\typora-user-images\image-20210408093644106.png)]

12、简述列举文档对象模型 DOM 里 document 的常用的查找访问节点的方法

​ 并做简单说明

// 通过querySelector可以查找类名 id名 name 标签名  但都如果有相同的都是只能找到第一个
    document.querySelector('')
        // 通过querySelectorAll  可以查找到所有的相同的类名 id名 name 标签名的元素，会以数组的形式返回
    document.querySelectorAll('')
        // 通过Id查找
    document.getElementById('')
        // 通过元素的标签名直接获取,如果有多个相同元素标签名的属性会全部获取
        // 如果想要通过标签名指定获取一个元素，需要加下标
    document.getElementsByTagName('')[1];
    //  通过class属性获取
    // 如果有元素的clas值相同会返回他们的合集
    document.getElementsByClassName('');
    // 通过name获取元素
    // 返回name属性为指定值的元素对象的集合，一般用来获取表单元素节点
    // 如果有多个name的值相同，会返回他们的集合
    document.getElementsByName('');

13、谈谈 Cookie 的弊端

1.Cookie数量和长度的限制。每个 domain 最多只能有 20 条 cookie，每个 cookie 长度不

能超过 4KB，否则会被截掉。

2.安全性问题。如果 cookie 被人拦截了，那人就可以取得所有的 session 信息。即使加密

也与事无补，因为拦截者并不需要知道 cookie 的意义，他只要原样转发 cookie 就可以达到

目的了。

3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务器端保存

一个计数器。如果我们把这个计数器保存在客户端，那么它起不到任何作用。

14、DOM 操作——怎样添加、移除、移动、复制、创建和查找节点。

查找节点

          // 通过querySelector可以查找类名 id名 name 标签名  但都如果有相同的都是只能找到第一个
        document.querySelector('')
            // 通过querySelectorAll  可以查找到所有的相同的类名 id名 name 标签名的元素，会以数组的形式返回
        document.querySelectorAll('')
            // 通过Id查找
        document.getElementById('')
            // 通过元素的标签名直接获取,如果有多个相同元素标签名的属性会全部获取
            // 如果想要通过标签名指定获取一个元素，需要加下标
        document.getElementsByTagName('')[1];
        //  通过class属性获取
        // 如果有元素的clas值相同会返回他们的合集
        document.getElementsByClassName('');
        // 通过name获取元素
        // 返回name属性为指定值的元素对象的集合，一般用来获取表单元素节点
        // 如果有多个name的值相同，会返回他们的集合
        document.getElementsByName('');

添加删除

        // 在指定元素前面添加
        // 前边是要添加的新元素，后边是要添加到谁的前边
         div.insertBefore(li, div.children[0])
        // 删除div里的第一个元素
       div.removeChild(div.children[0])

移动

        //  如果元素有定位直接更改left和top的值让元素移动
        document.querySelector('div').style.left = 1000 + 'px'
        document.querySelector('div').style.top = 1000 + 'px'

        // 通过scroll或者offset来控制元素移动
         document.querySelector('div').offsetLeft=100
         document.querySelector('div').scrollLeft=100

创建

 document.createElement('')

复制

    document.documentElement.innerHTML = document.cloneNode('')

15、判断一个字符串中出现次数最多的字符，统计这个次数

如：var str = ‘asdfssaaasasasasaa’;

打印结果：出现次数最多的是:a出现9次；

<script>
    var str = 'asdfssaaasasasasaa';
    var json = {};
    for (var i = 0; i < str.length; i++) {
        if (!json[str.charAt(i)]) {
            json[str.charAt(i)] = 1;
        } else {
            json[str.charAt(i)]++;
        }
    };
    var iMax = 0;
    var iIndex = '';
    for (var i in json) {
        if (json[i] > iMax) {
            iMax = json[i];
            iIndex = i;
        }
    } 
    alert('出现次数最多的是:' + iIndex + '出现' + iMax + '次');
</script>

16、什么是闭包？ 写一个简单的闭包

可以读取其他函数内部变量的函数就是闭包

function name(x) {
            var num = 10;
            return function() {
                console.log(num);
            }
        }
        var arr = name()
        arr()

17、BOM 对象有哪些，列举 window 对象？

1、window 对象 ，是 JS 的最顶层对象，其他的 BOM 对象都是 window 对象的

属性；

2、document 对象，文档对象；

3、location 对象，浏览器当前 URL 信息；

4、navigator 对象，浏览器本身信息；

5、screen 对象，客户端屏幕信息；

6、history 对象，浏览器访问历史信息；

18、HTTP 协议中，GET 和 POST 有什么区别？分别适用什么场景

	GET	POST
缓存	能被缓存	不能缓存
历史	参数保留在浏览器历史中	参数不会保存在浏览器历史中
对数据长度的限制	当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度IE是 2048 个字符,chrome 最大长度8182个字符）	无限制
对数据类型的限制	只允许 ASCII 字符	没有限制，也允许二进制数据
安全性	与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分	POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中
可见性	数据在 URL 中对所有人都是可见的	数据不会显示在 URL 中

适用场景：

post 一般用于表单提交

get 一般用于简单的数据查询，严格要求不是那么高的场景

19、用正则表达式，写出由字母开头，其余由数字、字母、下 划线组成的 6~30 的字符串

/^[a-zA-Z]\w{5,29}/

20、本地存储（Local Storage ）和 cookies（储存在用户本地终端上的数据）之间的区别是什么

答： Cookies:服务器和客户端都可以访问；大小只有 4KB 左右；有有效期，过期后将会删除；

本地存储：只有本地浏览器端可访问数据，服务器不能访问本地存储直到故意通过 POST 或

者 GET 的通道发送到服务器；每个域 5MB；没有过期数据，它将保留知道用户从浏览器清除

或者使用 Javascript 代码移除

二、上机题（40分）

• 共2题，每题20分

1、自己创建一个json文件，文件名test.json，内容不限，使用ajax请求，获取json文件内的数据（20分）

2、使用js手写一个视频播放器(20分)

打造个性的视频播放器需要用到的属性2-1：

controls : 显示或隐藏用户控制界面
autoplay : 媒体是否自动播放
loop : 媒体是否循环播放
paused : 媒体是否暂停(只读)
ended : 媒体是否播放完毕(只读)

打造个性的视频播放器需要用到的属性2-2

currentTime : 开始播放到现在所用的时间
duration : 媒体总时间(只读)
volume : 0.0-1.0的音量相对值
muted : 是否静音

视频播放器需要用到的方法和事件

play() : 媒体播放
pause() : 媒体暂停

webkitRequestFullScreen():全屏

timeupdate : 时间更新
canplay: 可以播放