达内2016前端开发知识点总结--DOM--4天

 

Dom day01

正课:

1. ***查找

   按选择器查找

2. 修改:

 

1. ***查找:

   按选择器查找:

     1. 如果只找一个:

        var elem=parent.querySelector("selector");

     2. 如果找多个:

        var elems=parent.querySelectorAll("selector");

     返回非动态集合(non-live collection):

            实际存储完整数据，反复访问，也不用重新查找DOM树

       优: 不会造成反复查找

 

 鄙视题: getElementsXXXX  vs  querySelector

   1. 返回值:

       getElements返回动态集合:

           优: 首次查找效率高

           缺: 可能造成反复查找DOM树

       querySelector返回非动态集合:

           优: 包含完整属性，无需反复查找DOM树

           缺: 首次查找效率低

    2. 易用性:

       querySelector更灵活, 且更简单

       getElements每次只能查找一种结果，无法设置查找条件

                            更繁琐

    总结: jQuery中:

       如果一次查找就能找到元素时，首选getElements

       如果查找条件复杂时，就用querySelector

 

2. 修改:

   内容:

      1. .innerHTML: 获取或设置元素开始标签到结束标签之间的html代码片段。

      2. .textContent: 获取或设置元素开始标签到结束标签之间的纯文本内容。

           2件事: 1. 去掉了html标签

                      2. 将转义字符转换为正文

          何时: 如果希望去掉内容中的标签，仅获取文本内容时

          .textContent有兼容性问题: IE8不兼容

                 IE8: .innerText

   属性:

   样式:

 

正课:

1. 修改:

    属性:

    样式:

 

1. 属性:

    html标准属性:

       核心DOM: 万能

           1. 获取属性:

               1. 获得属性节点对象: (了解)

                var attrNode=elem.attributes[i/属性名];

                                        elem.getAttributeNode("属性名");

                attrNode.value

               2. 直接获得属性值:

                var value=elem.getAttribute("属性名");

           2. 设置属性:

                elem.setAttribute("属性名",新值);

           3. 判断是否包含指定属性:

                var bool=elem.hasAttribute("属性名")

           4. 移除属性:

                elem.removeAttribute("属性名");

            

       HTML DOM: 仅对部分的简化

            elem.属性名

          强调: html中的class属性和ES中的class属性冲突

                 html中的class要改名为className

 

     特例: disabled    selected   checked

        不能用核心DOM操作！只能用html DOM打点操作

        attribute  vs  property

        attribute指出现在开始标签中的属性

        property保存在内存中的对象中的属性

        核心DOM只能操作出现在页面上的attribute属性

           无法操作未出现在页面上的内存中的property属性

        HTML DOM可访问内存中的property属性

 

   自定义属性:  2种:

     1. 只能用核心DOM访问，不能用html访问

     2. HTML5: ——兼容问题

        所有自定义属性: 属性名必须: data-属性名

        访问时: elem.dataset.属性名

   何时: 1. 在客户端网页中临时缓存部分业务数据

            2. 代替id和class作为查找元素的条件

 

2. 样式:

   内联: elem.style.css属性名

     强调: 所有css属性都要去横线变驼峰

        background-color -> backgroundColor

        list-style-type -> listStyleType

   问题1: 只能获得/设置内联样式

           无法获取最终应用到元素上的完整样式

   解决:

      如果设置一个元素的样式: elem.style.css属性名

          因为: 优先级最高！不影响其他元素

      如果获取一个元素的样式: 不用style

          getComputedStyle(elem).css属性名

   问题2: elem.style.css属性名一句话只能设置一个样式

             如果需要同时设置一个元素的多个css属性，代码繁琐

   解决: 今后只要操作一个元素的样式，都用class属性批量操作

     特例: 精确控制动画效果时，需要操作单个css属性

 

   内部/外部样式表:

 

补: .innerHTML只能获得封闭标签的内容

     表单元素的值只能用.value

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Dom day02

正课:

1. 添加/删除元素

2. ***HTML DOM常用对象

   select/option    table/行分组/tr/td    form

 

1. 添加/删除元素:

  添加: 3步:

     1. 创建新的空元素:

         var a=document.createElement("a");

         相当于:

     2. 设置元素的关键属性:

         a.href="http://tmooc.cn"

         a.innerHTML="go to tmooc";

         相当于: go to tmooc

     3. 将元素添加到DOM树上:

         3种:

         1. 末尾追加: parent.appendChild(a)

         2. 插入在一个现有元素之前:

               parent.insertBefore(a,oldElem)

         3. 替换现有元素: parent.replaceChild(a,oldElem)

 

***页面加载过程:

    html->DOM Tree

                    ↓

                Render Tree->***layout->paint

                    ↑

    css->CSSRules

    结论: 只要修改DOM树的内容，都会导致重新layout

    解决: 优化: 尽量少的操作DOM树

        1. 如果同时添加父元素和子元素

                先再内存中将子元素添加到父元素，再将父元素一次性添加到DOM树

 

 

 

 

 

 

 

 

 

 

 

 

 

正课:

1. 添加/删除元素

2. ***HTML DOM对象

    select/option table/行分组/tr/td  form

 

1. 添加/删除元素

   优: 尽量少的操作DOM树

   如何:

     1. 如果同时添加父元素和子元素时，都要先将子元素添加到父元素，再将父元素整体添加到DOM树一次即可

     2. 如果同时添加多个平级元素时，都要用文档片段

      文档片段: DocumentFragment

         内存中临时存放多个平级元素的虚拟的临时父元素

         何时: 如果同时添加多个平级元素时，都要先将平级元素添加到文档片段中。再将文档片段一次性添加到DOM树

         如何:

           1. 创建文档片段:

              var frag=document.createDocumentFragment();

           2. 将子元素添加到frag中: frag.appendChild(child)

           3. 将frag添加到DOM树: parent.appendChild(frag)

               frag将子元素添加到DOM树后，自动释放。

 

    删除元素: 1. 先找到要删除的元素对象elem

                   2. parent.removeChild(elem)

        elem.parentNode.removeChild(elem);

 

2. ***HTML DOM常用对象:

    Image   Select/Option    Table/...     Form

  1. Image: 代表一个

      唯一的简化: var img=new Image();

  2. Select: 代表一个

      属性:

          .selectedIndex: 获得select中当前选中项的下标

          .options: 获得select中所有的option元素对象

          .options.length: option元素的个数

                                       =0可清除所有option

          其实select.length等效于select.options.length

              最简单的清除所有option的办法: select.length=0;

          .value: 当前select元素选中项的值

               2种情况:

                  1. 如果选中项有value属性，则使用选中项的value属性

                  2. 如果选中项没有value属性，则使用text作为value              

      方法:

         .add(option) => .appendChild

         .remove(i) => select.removeChild(select.options[i])

      事件:

         .onchange: 当选中项发生改变时   

 

      Option: 代表一个

        创建:

            var opt=new Option(text,value)

        属性:

            .index: 当前option在select中的下标

            .value:

            .text => .innerHTML

            selected:   

    

    其实向select中添加一个option的最简单写法:

       sel.add(new Option(text,value));

 

  3. Table: 代表

      table

          .createTHead()=>thead

          .deleteTHead()

          .tHead

              .insertRow(i) => tr //在i位置插入一个新行

                                省略i, 默认表示末尾追加

              .deleteRow(i);//删除i位置的行

              .rows //获得thead中的所有行对象

              .rows[i]=>tr

                属性: .rowIndex 获得当前tr相对于整个table的行下标

                                  .insertCell(i) => td //i位置添加一个新td

                                                   省略i, 默认表示末尾追加

                                  .deleteCell(i)

                                  .cells //获得行中的所有格

                                  .cells[i] => td

              

          .createTBody() tbody

          .tBodies/tBody

          

          .createTFoot() tfoot

          .deleteTFoot()

          .tFoot

 

    删除行:

      2种: 1. 用行分组.deleteRow(i)

                     i : 指的是行在当前分组内的下标位置

             2. 用table.deleteRow(i)

                    i: 指的是行在整个table中的下标位置

                           ——tr.rowIndex

       只要用rowIndex删除行，必须用table.deleteRow(...)

 

补: 三类对话框: 都不用

   alert("警告");  

   var bool=confirm("确认提示");

       点确定->true

       点取消->false

   var input=prompt("输入提示")

          

          

      

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Dom day03

正课:

1. ***HTML DOM常用对象:

   Form

2. BOM

 

1. ***HTML DOM常用对象:

   Form: 代表一个

   获取: var form=document.forms[i/id/name];

   属性: .length: 相当于form.elements.length

   方法: .submit() : 专用于手动提交表单

          问题: 用户可能按回车，自动提交

          解决: 表单提交的最后一关是一个事件

             form.onsubmit(): 当表单正式提交前自动触发

       获取*表单*元素:

              var elem=form.elements[i/id/name];

              更简化: 如果表单元素有name属性:

                               form.name

       方法: .focus() : 让当前表单元素获得焦点

 

 

 

 

 

 

 

   

    正课:

1. ***BOM

  window

     打开关闭窗口

     窗口大小和位置

     定时器

 

1. ***BOM:

  什么是: Browser Object Model

      专门操作浏览器窗口的API —— 没有标准

  DHTML对象模型:

   window 2个角色:

        1. 代替global作为全局作用域对象

             所有全局函数和全局变量都是window的成员

        2. 封装所有DOM和BOM的API

   包括:

      history 当前窗口打开后成功访问的历史记录

      location 当前窗口正在打开的URL

      document DOM树的根节点，包含所有网页内容

      screen 当前显示设备的信息

      navigator 浏览器的配置信息(版本，名称，插件，cookie)

      event 定义了浏览器中所有事件

 

  window: 指代当前浏览器窗口对象

    打开和关闭窗口

    打开: open("url","name")

    关闭: close();

  

    打开一个连接，共有几种方式：

    1. 在当前窗口打开, 可后退:

       html:

       js: open("url","_self");

    2. 在当前窗口打开, 禁止后退:

       js: location.replace("url")

           在当前窗口打开新url，用新url替换history中原有url

       原理:

         history: 保存当前窗口打开后成功访问过的url的历史记录栈

    3. 在新窗口打开，可打开多个:

       html:

       js: open("url","_blank");

    4. 在新窗口打开，只能打开一个:

       html:

       js: open("url","name");

     每个窗口都有一个唯一的name属性

     name: 在内存中唯一标识一个窗口的名称

     规定: 同时只能打开一个相同name的窗口

       预定义: _self : 和当前窗口使用相同的name

                   _blank: 不指定自定义name，由浏览器随机分配

 

   窗口大小和窗口位置: (了解)

   窗口大小:

      1. 完整窗口大小:  window.outerWidth/outerHeight

 ***2. 文档显示区大小: window.innerWidth/innerHeight

     调整: 2个机会:

      1. 在打开窗口时，就规定大小:

         var config="left=?,top=?,width=?,height=?";

         open("url","name",config)

      2. 打开窗口后再调整——被禁用

       window.resizeTo(width,height)

       window.resizeBy(width增量,height增量)

   窗口位置: 窗口左上角距屏幕左上角的位置

       window.screenLeft|screenX

       window.screenTop|screenY

     调整:

       moveTo(left,top)

       moveBy(left的增量,top的增量)

 

*****定时器:

  什么是: 让程序按照指定时间执行一项任务

  何时:

     1. 让程序每隔一段时间间隔反复执行一项任务——周期性

     2. 让程序等待一段时间后自动执行一次任务——一次性

  如何:

    周期性定时器: 3件事:

     1. 任务函数task

     2. 启动定时器: 将task放入定时器中，设定时间间隔

         timer=setInterval(task, ms);

        timer是唯一标识一个定时器实例的序号

            强调: task不能加()，因为是传递给定时器去回调执行

     3. 停止定时器:

         clearInterval(timer);

        问题: 定时器往往需要自动停止

        解决: 在*任务函数*中判断临界值

                  如果未达到临界值，继续执行任务

                  否则 停止定时器

 

    一次性定时器:  先等待，再执行一次，然后自动释放

    3件事:

     1. 任务函数task

     2. 启动定时器: 将task放入定时器中，设定等待时间

         timer=setTimeout(task, ms);

     3. 停止定时器: （其实是在执行之前，停止等待）

         clearTimeout(timer);

 

   定时器原理:

     定时器中的回调函数，必须在主程序所有语句执行完最后才能开始执行！

 

 

 

 

 

 

 

 

 

 

 

Dom day04

正课:

1. *****定时器

   动画

2. screen

3. history

4. ***location

5. ***navigator

6. ****event

 

1. *****定时器

   动画:

  练习:

     获取长度属性值时: 获得都是带单位的字符串，不能直接计算

                                  都要先去单位(parseFloat)，再计算

     设置长度属性值时: 在数值结尾拼单位(px)

 

2. screen对象:

   获得屏幕的大小:

       完整大小: screen.width/height

       何时: 用屏幕大小鉴别设备种类: ——鄙视题

          wide desktop  -  lg : 1200+

          pc                    - md: 992+

          pad                  - sm: 768+

          phone              - xs: 480+

    

       可用大小: screen.availWidth/availHeight

           去掉任务栏之后的剩余大小

 

3. history: 保存当前窗口打开后成功访问过的url的历史记录栈

     前进: history.go(1)

     后退: history.go(-1)

     刷新: history.go(0)

 

     其实: history.go(n)

 

4. ***location: 封装当前窗口正在打开的url对象

    属性:

      .href: 获取或设置当前网页打开的url

          何时: 在当前页面打开新链接时

             简写: location.href=url  ->  location=url

      .protocol: 协议

      .host: 主机名+端口号

      .hostname: 主机名

      .port: 端口号

      .pathname: 网页的相对路径

      .hash: #锚点

      .search: ?查询字符串

        鄙视: .search -> 参数组成的对象:

            ?uname=zhangdong&upwd=123456

            ["uname=zhangdong", "upwd=123456"]

            {uname:zhangdong, upwd:123456}

 

 

 

 

 

 

 

正课:

1. ***location

2. ***navigator

3. ****event

 

1. ***location:

   属性:

   方法:

    location.assign("url") => location.href="url"

                                              location="url"

    location.reload(false/true): 重新从服务器加载url

                                 force

         默认false: 优先从服务器端缓存中获取文件

         如果改成true, 强制从服务器硬盘获取新文件

    location.replace(url): 在当前窗口打开新url，禁止后退

 

2. ***navigator: 封装浏览器配置信息的对象

    navigator.cookieEnabled: 是否启用cookie

      cookie: 在客户端本地持久存储一个数据的文件

          如果禁用无法保存搜索关键词，或记住密码

 

    navigator.plugins: 封装所有插件对象的集合

      

    判断浏览器的名称和版本:

    navigator.userAgent: 保存浏览器内核，名称，版本号的字符串

 

3. ****event

   事件: 浏览器自己触发的或用户手动触发的页面(元素)状态的改变。

   浏览器在事件发生时，都会自动调用事件处理函数

   事件处理函数: 当节点发生事件时，自动调用的函数

                          其实就是节点的onxxx属性

      事件处理函数的值，都是一个函数对象

      事件发生时: 节点对象.onxxx();

         事件处理函数中的this: .前的节点对象

 

   何时: 只要希望一个元素/节点，能够响应某个事件时

               在发生某个事件时，能自动执行事件处理函数

   如何: 3种方式:

      1. 在html元素开始标签中:

        html:

        js: function 函数(ANY){ ... }

        问题: 1. 无法为动态生成的元素绑定事件

                 2. 事件绑定分散在页面各个角落，不便于维护

      2. 在js中绑定事件: 2种方式:

        1. ANY.on事件名=function(){

                 this->ANY

            }

            事件发生时，自动执行: ANY.onXXX();

           问题: 每个ANY的一个事件处理函数，只能绑定一个函数对象。

           解决:

        2. ANY.addEventListener("事件名",fn)

              ANY.removeEventListener("事件名",fn)

           如果只是添加事件监听，可用匿名函数

           如果可能移除某个处理函数，就必须用有名的函数绑定

           IE8: ANY.attachEvent("on事件名",fn)

 

           其实: addEventListener("事件名",fn,capture)

               capture: 是否在捕获阶段就提前触发     

                   默认false: 所有事件处理函数都在冒泡阶段反向触发

                   true: 该事件会在捕获阶段就提前触发！

 

***事件周期:

   DOM标准: 3阶段

      1. 捕获(capture): 由外向内依次记录各级元素绑定的相同事件处理函数

      2. 目标出发: 执行实际触发事件的元素上的处理函数

      3. 冒泡: 由目标元素向外，出发各级父元素上绑定的相同事件处理函数

        目标元素(target): 实际触发事件的元素     

 

   IE8: 2个阶段: 没有捕获阶段   

 

   事件对象: event: 在事件发生时，自动创建的封装所有事件信息的对象

       event对象提供了操控事件的方法: 阻止事件, 取消冒泡....

   何时: 1. 为了获得事件相关的数据

            2. 操控事件

   如何:

      获取: DOM标准: 事件对象，默认作为事件处理函数的第一个参数传入:

               IE8: 事件对象自动保存在全局变量event中

         兼容: function eventHandler(e){

     e=e||window.event;

                  }

      

   取消冒泡: e.stopPropagation();

   利用冒泡:

   优化: 尽量少的添加EventListener

       为什么: 每个EventListener都是一个对象

          浏览器触发事件时，会轮询每个EventListener对象

          添加的EventListener越多，页面响应速度越低

   解决: 当多个平级子元素绑定相同的事件处理函数时

           其实，只要在父元素绑定一次，所有子元素共用即可！

   难题: 1. 如何获得目标元素:

              this->父元素 X

              DOM: e.target ->目标元素

              IE8: e.srcElement

                  兼容: var target=e.target||e.srcElement;

            2. 鉴别目标元素是否想要:

              判断元素的名称或属性