美文网首页
JavaSprict基础-节点、date

JavaSprict基础-节点、date

作者: MGd | 来源:发表于2017-03-20 13:55 被阅读10次

    节点的创建以及添加

    • 创建节点:
      一般创建一个节点我们通过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:
    <div id="box">
        <button id="btn1"></button>
        <button></button>
        <button></button>
    </div>
    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:
    <div class="box" id="box">
        <p id="oP">dasfdsa</p>
        <span id="oSpan">dasf</span>
    </div>
    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;
    

    相关文章

      网友评论

          本文标题:JavaSprict基础-节点、date

          本文链接:https://www.haomeiwen.com/subject/kaybnttx.html