百度一面

1.统计页面中出现的标签，并找出次数前三的标签
2.实现log方法封装console.log()方法
3.获取url的query部分，并输出为对象{}
4.平时使用的跨域，并简述其实现的原理
5.更改单选框和复选框的样式
6.linux／mac中常用的命令
7.做项目时考虑的浏览器兼容方面
8.实现一下两列布局

---

querySelector() 方法返回文档中匹配指定 CSS 选择器的第一个元素。(参数为一个css选择器)
querySelectorAll()方法返回文档中匹配指定 CSS 选择器的所有元素。(参数为一个css选择器)

getElementsByTagName("*")和querySelectorAll("*")对比
getElementsByTagName返回的是一个动态的NodeList(HTMLCollection)而querySelectorAll返回的是一个静态的NodeList
动态的Nodelist因为不需要获取节点的具体信息而比静态的NodeList快,并且注意动态的意义

    var list1 = document.getELementsByTagName("*");
    var arr = []; //存放所有出现标签数组含重复的
    var result = [];  //存放结果数组，即本题中出现最多的三个标签
    for(var i=0;i<list1.length;i++){
        arr.push(list1[i].tagName);
    }
    var obj = {}; //存放对象：属性为标签名，值为出现的次数
    for(var j=0;j<arr.length;j++){
        if(!obj[arr[j]]){ //如果对象不含该标签名则初始为1
            obj[arr[j]] = 1;
        }
        else{ //如果对象已存在该标签则计数+1
            obj[arr[j]]++;
        }
    }
    //console.log(obj);
    for(var k=0;k<3;k++) {  本题需要取出前三的标签
        var max = 0;
        var which;
        for (var key in obj) {
            //console.log(key+" "+max);
            if (obj[key]> max){ //找到出现次数最多的用max记录次数，which记录标签名
                max = obj[key];
                which = key;
            }
        }
        var nobj = {}; //创建新对象存放被找出的标签及次数
        nobj[which] = max;
        result.push(nobj); 将新对象放进结果数组
        delete obj[which]; 删除原对象中该标签属性
    }
    console.log(result);

//因为call方法中第二个参数需要一个个传递，所以不能使用
var log1 = function () { //使用bind方法
    return console.log.bind(console,arguments)(); //不在bind中传入arguments，传入数组或字符串时均正常输出。
}
var log2 = function () { //使用apply方法
    return console.log.apply(console,arguments);
}
log1("aaa","bbb");   // { '0': 'aaa', '1': 'bbb' }
log2("aaa","bbb");   // aaa bbb  此方法与console.log一致

3

实现跨域的方式

JSONP工作原理
<script src="xxxx?callback=func"></script>
<script>
function func(){}
</script>

CORS
请求头Origin
响应头Access-Control-Allow-Origin

---

9.附加：实现三角形

.tr{
    width: 0px;
    height: 0px;
    border-top: 100px solid red;
    border-bottom: 100px solid green;
    border-right: 100px solid yellow;
    border-left: 100px solid blue;
}
.tr-up{
    width: 0;
    height: 0;
    border-bottom: 100px solid green;
    border-left: 100px solid transparent;
    border-right: 100px solid transparent;
}

屏幕快照 2017-09-18 下午12.26.14.png