关于DOM的一些总结（未完待续......）

Posted 2020-08-13 无量那哥天尊

DOM

   实例1:购物车实例(数量,小计和总计的变化)

这里主要是如何获取页面元素的节点:

   document.getElementById("...")

   cocument.querySelector("选择器");

通过所需的元素节点,得到我们想要的数据做运算.

   实例2:伸缩二级菜单

这里主要是逻辑判断,不同的逻辑给不同的className来控制样式.

需求是:一级菜单可以都关闭,但最多只有一个能打开.(思路是,每次都将所有的一级菜单关闭,然后仅打开当前点击的元素,并且点击同一个还会实现开/关 的来回切换)

DOM

   实例1:在备选框中选择国家添加到已选国家框中.(要求实现单选,多选,并且要求两个框中的数据都要进行排序)

这里主要是根据选择,动态的更新两个select中的数据.select有一个onchange事件,专门用于检测被选中的元素,通过sel.selectedIndex返回备选中的option的下标.这帮助我们获得到了我们想要的元素.

要想对页面中的元素排序,只能间接的通过数组的sort方法才能排序.所以要将select中的元素放进数组里.(将select的innerhtml掐头去尾,用</option><option>切割,即可返回一个我们想要的数组,并且根据返回的option下标可知对应数组里的元素,进行相应的操作)最后将对应的数组中的元素更新(就是将数组的元素用join("</option><option>"),再加上头尾即可)到页面上.而且只要是对应数组里有元素,都要排序后在更新到页面上.

在遍历数组的过程中,要反向遍历才可以这样能保证select中option的顺序和对应数组中的数组顺序一致.

   实例2:使用自定义属性实现摇号排名

要求:摇号(指定个数并不重复),排序,自定义属性.

   生成指定范围内的随机整数,并且不重复.然后将生成的随机数添加到对应页面元素上,然后根据自定义的属性排序,使用sort方法.

   实例3:表单元素的验证.

首先表单元素都有两个事件,onfocus和onblur.分别是获得焦点和失去焦点.

根据class来控制不同元素的样式.主要是onblur时对用户输入的内容做验证.

一般分为两步,新建一个正则表达式对象.然后调用test方法验证用户输入的内容是否符合要求.

   实例4:在表盘上显示当前时间  =>  Date相关属性和方法

   新建时间对象的三种方式:

      新建指定是时间的对象 var t=nwe Date("yyyy/MM/dd hh:mm:ss");

      新建当前是时间的对象 var now=now Date();

   Date的常用方法:

      getTime();  获得当前对象的毫秒数(1970.01.01)

      getHours();  获得...的小时数值

      getMinutes()  获得...的分钟数值

      getSeconds()  获得...的秒数值

笔记总结:获取元素节点是什么元素?---->Node.nodeName;

      查找页面元素时,我们一般建议使用"选择器"查找.

      document.querySelector("选择器");

      document.querySelectorAll("选择器");

DOM

   实例1:

笔记总结:增加节点:3步

1.创建一个空元素对象

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

2.添加关键属性

  a.href="http://tmooc.com";

3.将新元素添加到指定父元素下

  追加:parent.appendChild(a);

  插入:parent.insertBefore(a,旧元素);

  删除:parent.replaceChild(a,旧元素);

在挂载子元素到DOM树上时,要遵循最少次数的操作DOM树.

有父子元素的关系时最好,没有父子关系时,就建立一个虚拟的fragment虚拟父元素.

frag=document.DocumentFragment();

删除节点:

parent.removeChild(child);

child.parentNode.removeChild(child);

 

HTML DOM常用对象:

   select对象:

   属性:

     selectedIndex:获得当前选中项的下标--配合onchange属性

     options:获得select下所有的option元素;

     value:有值,就返回值,没有值就返回内容;

   方法:

     add(opt);将opt添加到select元素上

     remove(i);移除i位置的选项

   事件:

     onchange

   option对象:

     创建:var opt=new Option(text,value);

     属性:

       index:选项在select中的下标

       text:代替innerHTML,访问option的内容

  

   From对象:

      获取form对象:

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

      属性:

        elements:仅包含所有表单元素的集合.

        length:就是是element的个数

      方法:

        submit();

        reset();

      获取form中的元素?

        form.elements[i/id/name]

        form.id/name

      表单元素:

        elem.focus(); 让elem获得焦点

        elem.blur ();  让elem失去焦点

 

 

 

***定时器的使用***

这是首次使用面向对象的编程思路来进行编程的.

     首先,定义一个我们要操做的对象,然后定义在实现过程中所需要的属性和方法.

     在本例中,做的是一个广告的上滑,下滑和自动上滑的效果.对于这种复杂的问题,思路就是做最简单的事,然后从其中找规律,将这些简单的事情拼接成我们所要的功能,最后在做代码的优化和重构.

     补充:做动画一定要明确三个量,总距离,总时间,总步数-相关的两个量->步长,步频

     首先做上滑,确定三个量.通过步长和步频来控制定时器(周期性).

     对应做下滑,最好让代码的结构便于优化.

     然后考虑在什么样的情况下,启动一次性的定时器,用于自动向上移动(广告出来),

     再考虑动画叠加带来的影响和如何消除动画叠加

       

DOM

   鄙视题: "?username=zhangdong&pwd=123456"-->使用location的search的属性来解析浏览器提交的内容

   思路分析:首先使用location.search获得浏览器提交的内容,然后截取出第一个字符(?)外的所有字符.再使用&切割字符串,并保存在数组中,然后对数组中的每个元素再使用"="切割,得到最终的数组.

   注意:为对象添加属性时要注意,如果属性值是一个固定的字符串时,可以使用.来添加,如果添加的属性是变量时,则,只能使用obj.[变量]=值的方式来添加.

事件处理:

   事件:用户和web页面的交互

   event对象:事件发生时,自动创建,封装事件信息的对象.   

   事件处理函数:事件发生时自动调用执行的函数.

      事件处理函数的本质:其实就是节点的一种特殊的属性.只不过赋值为function.

   绑定事件处理函数的3种方法:

      绑定在元素上,  onclick="function";

      直接给元素的事件处理函数属性赋值.

 

 

未完待续。。。。。。