前端webApi知识点总结

                                                                 前端webApi知识点总结

1.获取元素

  获取1个：document.querySelector('选择器')
  获取多个：document.querySelectorAll('选择器')，是一个伪数组

2.操作属性

    1.获取类名    classNmae    // JS给类名做了加工：因为class是一个关键字（JS中就有），加工成className

                         类名可以用classList拿：classList也是一个对象   

   2.添加类，移出类    

  // 建议使用classList：提供了两个API

        // add()：添加类

        // remove()：移出类

   3.获取页面的内容          元素.innerText

3.元素属性 

     // JS要操作元素属性：必须通过style属性来操作
        let box = document.querySelector('.box');
        console.log(box);

        // 获取元素属性：元素.style
        console.log(box.style);     // 只包含来height属性：width没有拿到值

        // 元素.style 永远只能操作（读和写）行内样式

        // 深入获取：元素.style.具体样式即可
        console.log(box.style.height);      // 带单位

4.事件

  事件三要素

            1. 事件源：给哪个元素添加事件

            2. 事件类型：让用户如何触发   onclick单击，onmouseover鼠标移入，onmouseout鼠标移出，ondblclick双击

            3. 事件处理：要绑定的代码是什么（做效果）

            * 只有一种办法可以保存代码暂时不执行：函数

            元素.事件类型 = function(){

                事件处理

            }

5.  innerText和innerHTML的区别

        相同点：都是用来获取或者操作双标签之间的内容

        区别：innerText只操作文本，innerHTML可识别标签

6.获取元素的方式

 1.  根据ID的值获取元素：获取1个：getElementById('id的值')     这个需要掌握以下，其余的了解

2.根据标签名获取元素：获取多个       document.getElementsByTagName('标签名');

3.  通过类名获取：获取多个 getElementsByClassName（'类名'）;

4.通过name属性值获取元素：表单元素，getElementsByName

7.自定义属性操作 attribute

     attribute属性操作：专门用来操作元素的属性的

            attributes：获取所有属性，是一个对象（一般不用）                         getAttribute('属性名')：根据属性名获取值

            setAttribute('属性名',属性值)：设置或者修改属性的值                       removeAttribute('属性名')：删除指定的属性

8.节点   网页一切皆节点  重点掌握元素节点

1.子节点（子代元素）

 1.获取所有子节点：childNodes（没有实际的价值：一般是操作元素）

      // 获取所有子元素（子元素节点）：children
        let children2 = ul.children;
        console.log(children2);
        // children属性获取的子元素：属于HTMLCollection ，不能使用forEach()

                 第一个孩子元素：firstElementChild（使用）                                                              第一个孩子节点：firstChild（不用）

                 最后一个元素：lastElementChild（使用）                                                              最后一个节点：lastChild（不用）

2.兄弟节点  

          前一个兄弟节点：previousSibling     前一个兄弟元素：previousElementSibling

            后一个兄弟节点：nextSibling         后一个兄弟元素：nextElementSibling

3.父节点

  元素. parentNode：父节点                                  元素. parentElement：父元素

9.节点操作

  1.创建节点       document.createElement('表签名')

  2. 追加元素：将元素放到某个父元素的孩子最后（最后一个孩子）

         父元素.appendChild(子元素) 

3.插入元素：父元素.insertBefore(新元素,已有的兄弟元素)

 4.替换元素：拿新的覆盖旧的

        父元素.replaceChild(新元素,旧元素)

4.删除元素

 1. 父元素删除子元素：父元素.removeChild(子元素)  

 2. 自己删除自己：自己.remove()

5.克隆节点

浅克隆：只克隆元素自己的结构（所有子节点都不克隆） 元素.cloneNode(false)

深克隆：克隆全部，元素.cloneNode(true)

10. 本地储存

           1.localStorage：永久存储，只要用户不清理浏览器数据，数据就会一直存在

           2. sessionStorage：会话存储，只要用户关闭页面，数据立马自动清理

            两种存储，格式和操作都一样，只是数据存储的生命周期不同

            扩展：越是重要的安全的内容，存储的时间越短

 3. localStorage和sessionStorage：共用一套相同的API（他们两个的API函数和使用方式：一模一样）

            getItem('名字')：根据名字获取值

             sessionStorage.getItem()

            setItem('名字','值')：将值存储倒对应的名字下

            removeItem('名字')：删除单个名字对应的本地存（名字 和 值 一起干掉）

            clear()：清除当前网站在浏览器中存储的所有数据

11. offset家族：专门用来获取元素的真实数据   

            真实宽度：元素宽高组成  border + padding + content

            元素.offsetWidth：高度，数字

            元素.offsetHeight：高度，数字

            真实偏移量：定位 + margin

            元素.offsetLeft：左偏移量

            元素.offsetTop：上偏移量  数字

            定位父级：拥有定位属性的父元素（一直找到body为止：body是顶级定位父级）

            元素.offsetParent：元素对象

12.定时器 ：是JS内部提供的一种机制，允许开发者将代码放到某个容器中，系统会自动按时调用这段代码

            根据定时器的效果，将定时器分为两种

            定时器：setInterval(回调函数,间隔周期)：以毫秒为单位定时执行回调函数(重复执行多次)

            延时器：setTimeout(回调函数,间隔时间)：以毫秒为单位间隔指定时间后调用回调函数（仅执行1次）

 // 需求：让盒子自动的变化宽度：每隔1秒钟（1000ms），自动变化10px
        setInterval(function () {
            let box = document.getElementById('box');

            box.style.width = box.offsetWidth + 10 + 'px';
        }, 1000);

   13.清除定时器        

       定时器是可以被清理的：一个页面中可能同时出现很多个定时器，如何区分清理定时器呢？

        1. 只要使用一次setInterval()就会得到一个返回值：定时器 句柄handler（代表：代表当前定时器）是一个数字

        2. 如果要清理定时器：必须指定定时器的句柄，要清理哪一个

        // clearInterval(句柄)：清除指定的定时器

        // clearInterval(timeId);

        // 定时器setInterval和延时器setTimeout本质是同一个东西

        // 定时器setInterval的清除：clearInterval

        // 延时器setTImeout的清除：clearTimeout

14.BOM对象

   BOM：浏览器对象模型，专门用来操作浏览器的系统API

            BOM对象一共就5个

            window对象：所有对象的顶级对象（document）

            location对象：url管理对象（Uniform Resource Locator，网络上的绝对定位）

            history对象：历史浏览器记录对象

            navigator对象：浏览器信息对象（JS通过这个对象获取浏览器信息）

            screen对象：获取屏幕大小

15.window对象（js顶级对象）   

     1.所有没有归属的内容都是window对象的

           1.var声明的全局变量                 2.没有关键字的变量       3.全局函数

   2.所有的回调函数里面的this都是window对象

  3.窗口控制

         open()新开窗口        close()关闭窗口

  4.window事件

            onload：加载事件，允许js代码写到结构的前面（比较重要）

            onbeforeunload：销毁前事件（DOM对象需要被销毁：刷新、关闭、重新加载）

            onunload：销毁事件（DOM被销毁触发）

16. location对象专门管理URL（Uniform Resource Locator）统一资源定位

1.  完整url： http://    www.baidu.com:80     /file/index.html

                协议        主机地址（IP) 端口    URI（Identifier）

 2.  BOM有一个对象：location获取url相关信息

3. location有一批API，允许管理url

   // 1. 重新开启新的url：assign
            // location.assign('http://www.baidu.com');
            // 会产生历史记录
            // location.assign('http://www.baidu.com', '_blank');   // 无效

            // 2. 重新加载：reload
            // location.reload();

            // 3. 替换url：replace与assign对比：没有历史记录
            // location.replace('http://www.baidu.com');

    17. navigator对象

  // navigator对象是用来获取浏览器信息的
        console.log(navigator);

        // 实际开发的时候时候一般都是统计浏览器和操作系统信息
        console.log(navigator.userAgent);

        // 需求：用我网站的人到底是什么操作系统
        if (navigator.userAgent.indexOf('Win64') != -1 || navigator.userAgent.indexOf('WOW64') != -1) {
            document.body.innerHTML = '您使用的是windows64位操作系统';
        }

18.history：管理历史记录

history对象：主要用它的API实现目标效果

            back()：回退1步

            forward()：前进1步（先有回退，才会产生前进）

            go()：可前进也可以后退：数字参数，依次可以回顾历史多步

                正数：前进  forward

                负数：后退  back

      19.获取元素所有样式

1.   jS提供了一个API，可以获取一个元素的全部样式：getComputedStyle(元素)：这个方法是window对象

2.   getComputedStyle()：功能与名字一样：只能获取，不能修改（如果要修改：通过元素.style.具体样式 = 值    

         20.scroll滚动家族

  1.想要看滚动：得有滚动事件：onscroll

      document.querySelector('.box').onscroll = function () {}

   2.  获取内容的真实宽高：scrollWidth/scrollHeight

   3.  滚出去的距离：scrollTop/scrollLeft

  4.页面滚动：一般都是给window或者document绑定滚动事件

  5.获取页面的滚动距离：不建议使用scrollTop和scrollLeft

            JS额外做了处理（class - className）

             pageXOffset === scrollLeft   pageYOffset === scrollTop

21.可视client家族

1.可视区域大小   padding + content

2.resize事件

元素resize   元素.clientWidth     元素.clientHeight

页面resize    innerWidth    innerHeight

22.事件对象

  // 点击事件
        document.querySelector('.box').onmouseover = function (e) {

            // 事件函数：是系统在调用：系统判定用户的操作，落在了当前绑定了事件代码的元素区域的时候：系统来调用 事件处理函数
            // console.log(e);

            // 事件对象：给元素添加事件函数的时候，传入一个形参即可：系统调用的时候，会传入实参：事件对象
            // IE8，事件对象不是通过 事件函数传入：保存在window的event属性中
            // console.log(window.event);

            // 兼容处理
            e = e || window.event;
            console.log(e);
        };
    </script>

23.事件对象：三大坐标系

 1. 页面坐标系：page系列：X和Y

 2. 可视坐标系：client系列：X和Y

 3. 屏幕坐标系：screen系列：X和Y

24. 阻止a链接跳转：希望应用a链接默认的效果，但是不要跳转

  阻止a链接跳转的方式有两大类

        1. 阻止点击事件：让点击事件不要跳转

        实现方式：onclick = function(){ return false;} ，return false直接给onclick

        * 行内JS：οnclick="return false";

        * 行外js：但是需要额外的绑定onclick事件：return false：覆盖了原来onclick的效果

     2. 直接修改href的值：不让跳转（线下体验店）

        * href="javascript:;"

        * href="javascript:void(0);"

25.  注册事件 addEventListener()       删除事件removeEventListener() 

    1.addEventListener('事件类型：没有on',回调函数,布尔值:触发阶段)

                事件类型：没有on

                回调函数：就是原来的onclick后面的function

                布尔值：触发阶段（默认冒泡）

2. 删除事件只能删除有名函数

26.事件冒泡（一定存在，子元素发生的事件，父元素只要有同名的就会被后续触发）

1.冒泡价值：事件委托

 给父元素绑定事件    利用事件对象.target获取目标子元素         减少元素绑定次数：提升效率

2.阻止事件冒泡   e.stopPropagation();

27.事件捕获：父子元素拥有相同事件，子元素触发前，父元素会先触发

  e.stopPropagation()   同样适用

28.事件发生三大阶段

1.捕获阶段

2.目标阶段

3.冒泡阶段