JavaScript第11天

1、BOM的常用

        1、hisory对象：保存了当前窗口的历史纪录（过去的url）

                前进：hisory（1）；

                后退：hisory（-1）；

                刷新：hisory（0）；

·        2、location对象：保存了当前窗口的正在打开的url（现在的url）

                1、常识：一个url有机部分组成，分别有什么作用？

                        1、协议：https（加密）/http（未加密）/ftp（传输文件）/ws（直播）—https/http 属于请求--响应模型

                        2、主机号/IP地址/域名：域名需要自己花钱买，主机号/IP地址是免费的

                       3、 端口号：https默认端口443；http默认端口80。默认端口可以省略不写

                        4、文件的相对路径/路由：百度是加密的

                        5、查询字符串/请求消息：前端传输到后端的东西

                2、属性：

                        获取url的5个部分的内容，直接输入location对象查看

                        协议：location.protocal；

                        域名：location.hostname；

                        端口：location.port；

                        路由：location.pathname；

                        请求消息：location.search；

                跳转：location="新url"—替换当前窗口，可以后退

                跳转，禁止后退：location.replace("新url")—替换当前窗口，不可以后退

                刷新：location.reload();

2、DOM：原本DOM可以操作一切结构文档的，升级后为了方便给类程序员将DOM分为三类

        1、查找元素

                1、通过关系找元素

                2、直接找元素

                        1、document.getElementsByxxx();//返回的是动态集合HTMLCollection

                        2、2个：

                                1、var elem=document.queryselector（“任意css选择器”）；//query-查询  selector-选择器   查询css选择器

                                缺点：只能找到单个元素，如果匹配到多个，也只会返回第一个，没找到返回null

                                2、var elem=document.queryselectorAll（“任意css选择器”）；

                                优点：

                                1、找到的是一个集合，没找到是空集合

                                2、复杂查找时，非常简单

                                3、返回的是一个静态集合NodeList

                        问题：document.getxxx和document.queryxxx的区别？

                                1、后者更适合复杂查找

                                2、动态集合和静态集合的区别？

                                        1、动态集合：每一次DOM发生变化，他都会悄悄的再次查找，让页面和数据保持一致，但是效率低—不支持forEach

                                        2、静态集合：每一次DOM发生变化，他不会悄悄地再次查找，让页面和数据没有保持一致，但是效率高—支持forEach

        2、操作样式

                1、内联样式

                2、样式表样式：

                        var sheet=document.styleSheets[i];//获取你想要操作的样式表

                        var rules=sheet.cssRules；//获取此样式表中所有的样式规则

                        var rule=rules[i];//数出你想要操作的那个规则

                        //操作

                        console.log（rule.style.css属性名）；

                        rule.style.css属性名=“css属性值”；

        3、操作属性

                1、获取属性值：

                        核心DOM：elem.setAttribute（“属性名”）；

                        HTML DOM:elem.属性名=“属性值”；

                2、设置属性值：

                        核心DOM：elem.setAttribute（“属性名”，“属性值”）；

                        HTML DOM：elem.属性名=“属性值”；

                3、删除属性：设置属性值为空字符串，某些属性可以算是删除，但是只是删除了属性值，属性名还在；有一些属性只有一个属性名都会有作用。如：href、disabled、readonly

                        核心DOM：elem.removeAttribute（“属性名”）；

                        HTML DOM:elem.属性名=""；—属性节点删除不干净

                4、判断有没有：只能判断有没有，不能判断什么；推荐使用elem.getAttribute（“属性名”）；去获取值，自己在写比较运算

                        核心DOM：elem.hasAttribute（“属性名”）；

                        HTML DOM：elem.属性值！=“”；

                建议：优先使用HTML DOM、HTML DOM实现不了再用核心DOM补充

                        缺点：

                                1、class必须写为className

                                2、自定义的东西都不能操作

        4、操作内容

                1、innerHTML

                2、innerText

                3、value

        5、创建元素和上树

                1、创建空标签：

                        var elem=document.createElement（“标签名”）；

                2、设置必要的属性和事件：

                        elem.属性名=“属性值”；

                        elem.on事件名=function（）{}

                3、上树：3种

                        1、父元素.appendCHilda（elem）；//在父元素末尾追加一个子元素elem

                        2、父元素insertBedore（elem，已有子元素）；//在父元素追加一个子元素elem，是放在已有子元素的前面

                        3、父元素.replaceChild（elem，已有子元素）；//在父元素追加一个子元素，但是会替换掉已有子元素

        6、删除元素：elem.remove（）；

扩展：

        1、创建一个变量：新增一个let关键字：

               let 变量名=值；

                作用：

                        1、解决声明提前

                        2、带来块级作用域，一个{}就是一块，此变量只能在{}里面使用

                        3、如果用let当作下标绑定事件，那么他会记录着你当前元素的下标，不需要自定义下标

        2、类数组转为普通数组：接住（arr）=Array.for（类数组对象）