4.16 JS05 DOM

一.节点操作

1. 创建标签:var 参数名称 = document.createElement("标签名称");:返回值为创建好的标签

2. 添加标签:var 参数名称 = document.父标签名称.appendChild(参数名称);:由父标签调用,会将添加的标签添加到父标签的子标签的最后面

3. 插入标签:document.父标签.insertBefore(添加标签名,之后的标签名);把添加的标签放到指定标签前,由父元素调用,如果后面的标签为null,则会添加到父标签的子标签最后

4. 删除标签:document.父标签.removeChild(要删除标签名);

5. 替换标签:document.父标签.replaceChild(新标签,要替换的标签);由父标签调用

6. 克隆标签:要克隆的标签名.cloneNode(bool值);
   true:标签里的子标签也会克隆
   false;只会克隆指定标签,不克隆子标签

7. 获取孩子标签:childNodes,返回值是一个伪数组
   nodeType = 3;文字的nodeType为3
   nodeType = 1;标签的nodeType为1
   下图为使用遍历的方法只获得标签:
   

   遍历方法只显示标签
   children:只输出标签,不输出文字

8. 获取兄弟节点:
   .nextElementSibling;:只返回元素节点之后的兄弟元素节点（不包括文本节点、注释节点）,IE9以上支持
   .nextSibling;:返回元素节点之后的兄弟节点（包括文本节点、注释节点）,IE9以下支持
   兼容写法:.nextElementSibling||.nextSibling
   短路思想:前者为真时不再看后面,并且输出前者的值

9. 获取父亲标签:.parentNode;

10. 通过类名获取标签:.getElementsByClassName("类名");,返回值是一个伪数组,IE9以下不支持
    兼容性写法:
    

    兼容性写法

11. 获取页面中的标签:
    document.head:获取页面中的head标签
    document.title:获取页面中的title标签
    document.body获取页面中的body标签
    document.documentElement获取页面中的html标签

动态创建九宫格:

border-radius:上 右 下 左;设置边角圆角度数

发微博

    var text = document.getElementById("text");
    var btn = document.getElementById("btn");
    var oul = document.getElementById("oul");
    btn.onclick = function () {
        if (text.value == "") {
            alert("请输入内容");
        }
        else {
            var oli = document.createElement("li");
            oli.innerHTML = text.value;
            /* if (oul.length == 0) {
             oul.appendChild(oli);
             }
             else {
             oul.insertBefore(oli, oul.children[0]);
             }*/
            oul.insertBefore(oli, oul.children[0]);
            var a = document.createElement("a");
            a.innerHTML = "删除";
            oli.appendChild(a);
            text.value = "";
            a.onclick = function () {
                oul.removeChild(this.parentNode);
            }
        }
    }

二.日期对象

var date = new Date();返回日期和时间
date.getFullYear();以四位数字返回年份
date.getMonth();返回月份为0-11,需要+1才能照应1-12
date.getDate();返回一个月中的某一天,1-31
date.getDay();返回一周中的某一天,0-6,
date.getHours();返回小时数,0-23
date.getMinutes();返回分钟数,0-59
date.getSeconds();返回秒数,0-59
date.getMilliseconds();返回毫秒数
date.getTime();返回1970年1月1日至今的毫秒数.成为时间戳
date.valueOf();返回date对象的原始值,也是时间戳

自定义时间:
如果括号里面没有写日期,就是代表默认获取当前的时间,如果写了就是自定义的时间
var date = new Date('2018/2/23 10:10:10');
计算代码块执行的时间

var date = new Date();
var mins = date.getTime();
代码块
var nowDate = new Date();
var nowMins = nowDate.getTime();
console.log(mins - nowMins);

日历

<script>
    var op = document.getElementById("op");
    var ospan = document.getElementById("ospan");
    var date = new Date();
    var year = date.getFullYear();
    var month = date.getMonth() + 1;
    var day = date.getDate();
    var weekDay = date.getDay();
    var weekArr = [];
    weekArr = ["星期日", "星期一", "星期二", "星期三", "星期四", "星期五", "星期六"]
//也可通过switch来判断
    op.innerHTML = year + "年" + month + "月" + day + "日" + weekArr[weekDay];
    ospan.innerHTML = day;
</script>

注意:星期的取值为0-6,可将其当作数组的下标表示周日到周六,月份的取值为0-11,记得加1对应1-12月份

钟表

<script>
    var h = document.getElementById("h");
    var m = document.getElementById("m");
    var s = document.getElementById("s");
    function time() {
        var date = new Date();
        var hSeconde = date.getMilliseconds();
        var second = date.getSeconds() + hSeconde / 1000;
        var minute = date.getMinutes() + second / 60;
        var hour = date.getHours() % 12 + minute / 60;
        h.style.transform = "rotate(" + hour * 30 + "deg)";
        m.style.transform = "rotate(" + minute * 6 + "deg)";
        s.style.transform = "rotate(" + second * 6 + "deg)";
    }
    time();
    setInterval(time, 10);
</script>

注意:小时的取值为0-23,对12取余可以正确的将值反映在表盘上,将时间单位精细化,再讲定时间间隔调小可以更完美的实现效果