前端从0单排之JS------Day12笔记

JS中的数学函数Math

Math称为数学函数，但是它属于对象类型

typeof Math //=>"object"

之所以叫做数学函数，是因为Math这个对象中提供了很多操作数学的方法

Math中提供的常用方法

** abs ** ：取绝对值
Math.abs(-1) // => 1

** ceil/floor **: 向上或者向下取整
Math.ceil(10) // 10
Math.ceil(10.01) // 11
Math.ceil(-10.01) // -10

Math.floor(10.999) // 10
Math.floor(-10.999) // -11

** round **: 四舍五入

Math.round(10.49) // 10
Math.round(10.5) // 11
Math.round(-10.49) // -10
Math.round(-10.5) // -10
Math.round(-10.51) //-11

** sqrt **: 开平方

Math.sqrt(100) //10

** pow **: 取幂（N的M次方）

Math.pow(2,10) // 1024

** max/min **: 获取最大值和最小值

Math.max(12,23,14,35,24,26,13) // 35

Math.min(12,23,14,35,24,26,13) // 12

** PI ** : 获取圆周率

Math.PI

** random **：获取0-1之间的随机小数

n-m整数
function randomNum(n,m){
return Math.round(Math.random()*(m-n)+n)
}

DOM及常用方法

getElementById

通过元素的ID获取指定的元素对象，使用的时候都是document.getElementById('') 此处的document是限定了获取元素的范围，我们把它称之为上下文(context)

1. getElementById的上下文只能是document

   因为严格意义上，一个页面的ID是不能重复的，浏览器规定在整个文档中既可以获取这个唯一的ID

2. 如果页面中的ID重复了，我们基于这个方法只能获取到第一个元素，后面相同ID元素无法获取

3. 在IE6~7浏览器中，会把表单元素（input）的name属性值当做ID来使用（建议，以后使用表单元素的时候，不要让name和id的值有冲突）

getElementsByTagName

[context].getElementsByTagName 在指定的上下文中，根据标签名获取到一组元素集合(HTMLCollection)

1. 获取的元素集合是一个类数组（不能直接的使用数组中的方法）

2. 它会把当前上下文中，子子孙孙（后代）层级内的标签都获取到（获取的不仅仅是儿子级）

3. 基于这个方法获取到的结果永远都是一个集合（不管里面是否有内容，也不管有几项，它是一个容器或者集合），如果想操作集合中具体的某一项，需要基于索引获取到才可以

getElementsByClassName

[context].getElementsByClassName在指定的上下文中，基于元素的样式类名（class=“xxx”）获取到一组元素集合

1. 真实项目中，我们经常是基于样式类来给元素设置样式，所以在JS中，我们也会经常基于样式类来获取元素，但是此方法在IE6-8下不兼容

来着：https://www.jianshu.com/p/0d756efa17c9

function getElementsByClass(className,context){//className:要获取的样式类名，可能是一个或多个；context:获取元素的上下文，即范围，若不传context参数，默认为document
     context=context||document;

     var flag="getComputedStyle" in window;
     if(flag){//若是标准浏览器直接输出即可
        return listToArray(context.getElementsByClassName(className));
     }

    //IE6-8：
    //把传递进来的样式类名首位空格都去掉，再按照中间的空格把里面每一项拆分成数组
     var classNameAry=className.replace(/^ +| +$/g, "").split(/ +/g);
 
     var ary=[];
   //获取指定上下文中的所有元素标签，循环这些标签， 获取每一个标签的className的字符串
     var nodeList=context.getElementsByTagName("*");   //获取指定上下文中的所有元素标签
     for(var i=0,len=nodeList.length;i<len;i++){
           var curNode=nodeList[i];

    //判断curNode.className是否既包含a1也包含a2，如果两个都包含的话，curNode是想要的，否则不是想要的
           var isOk=true;  //假设curNode中包含了所有的样式
           for(var j=0;j<classNameAry.length;j++){
               var reg=new RegExp("(^| +)"+classNameAry[j]+"( +|$)");
               if(!reg.test(curNode.className)){
                   isOk=false;
                   break;
               }
            }
           if(isOk){  //拿每一个标签和所有样式类名比较后，如果结果还是true，说明当前元素标签包含了所有样式，即我想要的
                ary.push(curNode);
           }
     }
     return ary;
}

getElementsByName

document.getElementsByName() 它的上下文也只能是document，在整个文档中，基于元素的name属性值获取一组节点集合（也是一个类数组）

1. 在IE浏览器中（IE9及以下版本），只对表单元素的name属性起作用（正常来说：我们项目中只会给表单元素设置name，给非表单元素设置name，其实是一个不太符合规范的操作）

querySelector

[context].querySelector() 在指定的上下文中基于选择器（类似于CSS选择器）获取到指定的元素对象（获取的是一个元素，哪怕选择器匹配了多个，我们只获取第一个）

querySelectorAll

在querySelect的基础上，我们获取到选择器匹配到的所有元素，结果是一个元素集合（NodeList）

1. querySelector/querySelectorAll都是不兼容IE6-8浏览器的（不考虑兼容的情况下，我们能用byid或者其他方法获取，也尽量不要用这两个，这两个方法性能消耗较大）

document.head

获取HEAD元素对象

document.body

获取BODY元素对象

document.documentElement

获取HTML元素对象

需求：获取整个浏览器一屏幕的宽度和高度(兼容所有浏览器)

document.documentElement.clientWidth || document.body.clientWidth

document.documentElement.clientHeight || document.body.clientHeight

面试题：获取当前页面中所有ID为HAHA的（兼容所有的浏览器）

首先获取当前文档中所有的HTML标签
依次遍历这些元素标签对象，谁的ID等于HAHA，我们就把谁存储起来即可

function queryAllById(id) {
    //   基于通配符*获取到整个文档中所有的HTML标签
    var nodeList = document.getElementsByTagName('*');

    //遍历集合中的每一项，把元素ID和传递ID相同的这一项存储起来
    var ary = [];
    for(var i = 0;i<nodeList.length;i++){
        var item = nodeList[i];
        item.id === id ? ary.push(item):null
    }
    return ary;
}

queryAllById();