JavaSprict基础-节点、date

节点的创建以及添加

• 创建节点：
  一般创建一个节点我们通过document.createElement()。
• 添加节点：
  一般是这个被创建标签的父亲节点来添加我们创建的节点，通过appendChild()。

1.创建一个div盒子
var box = document.createElement('div');
2.利用div的父节点来添加div
            obody.appendChild(box);

• 删除节点：
  删除节点的相关的操作，一般通过父节点来操作，通过removeChild()。

var oBody = document.getElementById('obody');
        oBody.removeChild(box);

• 插入节点：
  插入节点，也是通过父节点来操作，通过insertBefore（）。
  有两个参数，第一个参数表示要插入的节点，第二个被插入的节点。

var box1 = document.createElement('div');
oBody.insertBefore(box1,box);
把叫做box1的div插入到box之前。

克隆节点

• cloneNode():
• 如果不传入参数，默认为false,那么只是克隆节点本身，不会克隆子节点
• 如果传入true,会克隆节点本身和子节点

获取子节点

• childNodes是获取文本节点。
• 我们一般通过children获取标签子节点。
• 例子：

HTML:

    
    
    

JS:
 var box = document.getElementById('box');
var myChildren = box.children;

获取兄弟节点

• nextElementSibling：获取标签元素，但是只有一般浏览器可以实现对应的效果ie浏览器不能有对应的效果。
• nextSibling：可以在ie获取标签元素
• 兼容写法：

  var brotherSym =  btn1.nextElementSibling||btn1.nextSibling;

获取父亲节点

• 通过parentNode。

var btn1 = document.getElementById('btn1');
   var parentSym = btn1.parentNode;

date对象的认识

• var myDate = new Date()：
  创建时间对象,表示的是当前的时间。
• myDate.getTime()：
  当前时间的时间戳，获取的是当前时间到1970一月一号开始的毫秒数。

时间对象的相关的属性和方法

• 1.创建时间对象

    var myDate = new Date();

• 2获取当前的年份

* 3.获取月份,月份的时间是0-11
  ```  var month = myDate.getMonth()+1;
获取的月份时间是0-11，所以我们要加上1才能显示正确的月份

• 4.获取日期

* 5.获取星期,注意0表示周日，其余一样
    ```var weekDay = myDate.getDay();

• 6.获取小时

* 7.获取分钟
    ```var minute = myDate.getMinutes();

• 8.获取秒

* 9.获取毫秒
    ```
var minS = myDate.getMilliseconds();

简单日历的制作

HTML:

    
dasfdsa
    dasf

JS:
var oP = document.getElementById('oP');
    var oSpan = document.getElementById('oSpan');
    /*2.回去当前的时间设置内容*/
    var myDate = new Date();
    /*2.1获取年月日星期*/
    var year = myDate.getFullYear();
    var month = myDate.getMonth()+1;
    var day = myDate.getDate();
    var weekDay = myDate.getDay();
    /*2.2显示对应的日期*/
    /*2.2设置一个星期数组，用来设置星期*/
    var weekDayS = ['星期日','星期一','星期二','星期三','星期四','星期五','星期六'];
    oP.innerHTML = year+'年'+month +'月'+day +'日'+ weekDayS[weekDay];
    /*2.3设置对应的日期*/
    oSpan.innerHTML = day;