第四周第三天笔记

1.复习昨天的知识

• 创建数组的两种方式
  • var ary=[1,2,3];字面量方式创建；
  • var ary2=new Array(1,2,3);实例创建；
• 给数组末尾增加一项
  • push();
  • ary[ary.length]==xxx;
  • ary.splice(ary.length,0,xxx);
• 删除数组最后一项
  • pop()
  • ary.length--; ary.length-=1; ary.length=ary.length-1;
  • ary.splice(ary.length-1,1);
• 如何实现克隆
  • ary.slice();或是ary.slice(0);
  • ary.concat();不添加参数；
  • ary.splice(0);注：如果用splice()进行克隆，0不能省略；
  • for循环也可以实现，但for循环是循环，不是方法；
• n++与++n的区别：

2.日期对象

• 通过日期对象获得的值是数字类型；
• 日期对象的定义：var odate=new Date();指：获得当前电脑系统的时间；
• 日期对象的方法：
  • get/setFullYear():返回/设置年，四位数；
  • get/setYear():返回/设置年，两位数；
  • get/setMonth():返回/设置月；
  • get/setDate():返回/设置日；
  • getDay():返回星期数，是0-6；0指星期日，6值星期六，配合数组运用；
  • get/setHours():返回/设置小时；
  • get/setMinutes():返回/设置分钟；
  • get/setSeconds():返回/设置秒钟；
  • get/setTime():返回/设置毫秒数，距离1970年1月1日0时0分0秒的毫秒数；
• 方法阐述：
  • 获得当前电脑系统的时间：var odate=new Date();即定义即获取时间；
  • 设置未来的年月日时分秒格式：var odate1=new Date("2018/9/30 18:22:03");或var odate1=new Date(2018,9,30,18,22,3);
  • 设置当前电脑系统的年/月/日：

   var odate=new Date();
    odate.setMonth(odate.getMonth()+1);//改变系统的月份；
    console.log(odate.getMonth());
  

  • getDay():返回星期数，是0-6之间的数字；0指星期日，6值星期六，配合数组运用；
  • get/setTime():返回/设置毫秒数，距离1970年1月1日0时0分0秒(格林尼治时间)的毫秒数；
    • 例：使当前时间推迟2小时；推迟n个小时，即加上n*60*60*1000;

• 实例1：制作一个时钟，封装一个函数，将1-9变成01-09；
  • 知识点：解决setInterval开始执行时的延迟问题，可以在执行setInterval前，执行一次函数；

• 实例2：制作一个距离未来指定时间倒计时时钟，知识点：格林尼治时间；

距离玩耍时间还有: 00天  00:00:00

3.DOM基本知识

• DOM树，由一大堆的元素和标签组成；所以，DOM就是用来操作页面中的标签的；

• DOM节点：

  • 元素节点：HTML中各元素，如body,head,p,span,ul,li等元素；
  • 文本节点：文本，如p元素中的文本；
  • 注释节点：注释文本；
  • 文档节点：document节点；

• DOM节点属性：

  • nodeName属性：节点的名称，只读；
  • nodeValue属性：节点的值，可修改；
  • nodeType属性：节点类型，只读；
  • 节点类型的属性：

  节点类型	nodeName	nodeValue	nodeType
  元素节点	大写的标签名	null	1
  文本节点	#text	文本内容	3
  注释节点	#comment	注释内容	8
  文档节点	#document	null	9

• DOM中的元素节点的获取方式有以下几种：

  • id:document.getElementById("id");
  • tagname:document.getElementsByTagName("标签名");
  • classname:document.getElementsByClassName("class名");
  • name:document.getElementsByName("name");
  • querySelector(实参):获取一个元素； 实参可以是：div,.div1,#div1，用于移动端；兼容性不好，IE7不支持；
  • querySelectorAll():获取一数组元素，兼容性不好；

• 遍历节点树：

  • elementNode.childNodes: 返回一个数组，这个数组由给定元素节点的子节点构成；若不存在子节点则返回NodeList[];
  • elementNode.children:可以拿到当前元素下的所有子元素节点，但是在IE8下，如果有注释，则作为元素节点返回，不兼容性；只有IE8不兼容，其他的都兼容；
  • elementNode.firstChild: 返回元素节点下的第一个子节点； 若不存在,则返回null;
  • elementNode.lastChild: 返回元素节点下的最后一个子节点； 若不存在,则返回null;
  • nodeObject.parentNode: 返回一个给定子节点的父节点； 若不存在,则返回null;
  • nodeObject.nextSibling: 返回给定子节点的下一个弟弟子节点； 若不存在,则返回null;
  • nodeObject.previousSibling返回给定子节点的上一个哥哥子节点； 若不存在,则返回null;

• 节点树：

  • childNodes: 获取元素节点的所有子节点
    • 语法：elementNode.childNodes
    • 返回值：元素节点的所有子节点构成的数组集合；
    • 若选定元素无子节点，则返回NodeList[];
    • 兼容性不好，如下代码中ul的子节点长度在不同浏览器中不同，其中在IE7，IE8浏览器中子节点长度为3，不存在空白节点；而在firefox/chrome/opera/safari浏览器中长度为7；会存在空白节点；

         
    (空白节点）
           
    meihao
    (空白节点）
           
    tiankong
    （空白节点）
          
    yuer
    （空白节点）
        
    

    • 封装一个去除空白节点的函数，使所有浏览器均支持；

  • nodeObject.previousSibling返回给定子节点的上一个哥哥子节点(包括空白节点，注释节点等)； 若不存在,则返回null;
  • nodeObject.previousElementSibling: 返回给定子节点的上一个哥哥元素子节点，兼容性不好，IE浏览器不支持；
  • 封装一个函数，获取当前元素节点的上一个哥哥元素节点。其中判断循环条件为 pre && pre.nodeType!==1;

  
  内容1
  内容2
  内容3
  内容4
  内容5
  
  

• 判断属性是否存在的方法：

  • in : "属性名" in 对象； 如果存在该属性，则返回true;如果不存在，则返回false;
  • "." : 对象.属性名； 如果存在该属性，则返回该属性值，如果不存在，则返回undefined；

   var aa=document.getElementsByTagName("a")[0];
     console.log("href" in aa);//打印出true;
     alert(aa.mass);//返回值为undefined;
  

• 可视区域的宽高

  • 浏览器可视区域的宽高的兼容处理:不包括滚动条；默认17px滚动条；
    • 可视区域的宽度：document.documentElement.clientWidth || document.body.clientWidth;
    • 可视区域的高度：document.documentElement.clientHeight || document.body.cilentHeight;
    • 兼容性问题分析：
      • document.documentElement.clientWidth/Height：除了IE5浏览器不支持，其他的都支持；
      • document.body.clientWidth/Heigth：在IE5浏览器中作为浏览器的可视区域宽高获取；
      • document.body.clientWidth
        • 在IE8以上浏览器中，与document.documentElement.clientWidth差16px，即body元素默认的margin值(8px);
        • 在IE7浏览器中，与document.documentElement.clientWidth差20px,即body元素默认的margin值(10px);
        • 在IE5浏览器中作为浏览器的可视区域宽度获取；document.documentElement.clientWidth失效；
      • document.body.clientHeight
        • 在IE7及以上浏览器中，用于获取body标签的高度；
        • 在IE5浏览器中，作为浏览器的可视区域高度获取；
  • HTML中body标签的可视区域宽高
    • body标签的可视区域宽度：document.body.clientWidth;指body标签的宽度；
    • body标签的可视区域高度：document.body.clientHeight;除IE5以外，均指body标签的高度；
  • window.innerWidth/Height
    • 作用：IE9及以上浏览器支持；与document.documentElement.Width/Height的唯一区别是，它包含滚动条，若页面生成滚动条，则包含滚动条的默认17px，而document.documentElement.Width不包含滚动条；