DOM 定时器 Date对象

1 DOM

1.1 DOM基本操作

document

document.getElementById 根据ID获取dom元素
document.getElementsByClassName 根据ClassName获取元素集
document.getElementsByTagName  根据标签名称获取元素集
// 这两种获取的不是实时的，不常用
document.querySelector("div span");
document.querySelectorAll("div span");

document.createElement("p"); //创建元素节点
document.createTextNode("OK"); //创建文本节点
document.createComment("This is a comment !"); //创建注释节点
document/element.appendChild(); //添加节点
document/element.insertBefore(targetNode,beforeNode); //指定节点之前添加节点
div.removeChild(span); //移除子节点
address.remove();//移除指定节点
replaceChild(new, origin); //替换节点

appendChild和insertBefore是在Node中封装的
Element

//常用属性
innerHTML：可以写HTML代码
innerText：火狐用textContent IE老版本不兼容
//常用方法
setAttribute()
getAttribute()

1.2 DOM结构树

1.3 封装insertAfter，功能类似insertBefore

在原型链上编程。
思路：若能找到target节点的下一个元素节点，就用insertBefore插入元素到下一个元素节点之前，若不能找到target节点的下一个元素节点，表示，target节点是最后一个元素节点，那么就直接使用appendChild即可

      Element.prototype.insertAfter = function(targetNode, afterNode) {
           var beforeNode = targetNode.nextElementSibling;
           if(beforeNode == null) {
               this.appendChild(afterNode);
           } else {
               this.insertBefore(afterNode, beforeNode);
           }
       }

效果

1.4 遍历节点方法

以下几种方法会把所有节点都遍历一遍，包括文本节点，注释节点，元素节点，属性节点

• parentNode
• childNodes
• firstChild
• lastChild
• nextSibling
• previousSibling

只会遍历元素节点的方法

• parentElement
• Children
• firstElementChild
• lastElementChild
• previousElementSibling
• nextElementSibling

节点的四个属性

• nodeValue
• nodeName
• nodeType
• attributes

hasChildNodes()是否含有子节点，是返回true，否返回false
关于nodeType的值是固定的，如下

• 元素节点 1
• 属性节点 2
• 文本节点 3
• 注释节点 8
• Document 9
• DocumentFragment 11

2 定时器

• setInterval 隔一段时间执行一次
• clearInterval 清除interval
• setTimeout 等待一段时间执行
• clearTimeout 清除timeout
  可以应用到闹钟，定时器等
  三分钟定时器效果：
  
  JS代码可参考

	  var minutes = parseInt(document.getElementsByTagName("input")[0].value);
      var seconds = parseInt(document.getElementsByTagName("input")[1].value);
      var timer = setInterval(function() {
          if(seconds >= 59 && minutes < 3) {
              minutes += 1;
              document.getElementsByTagName("input")[0].value = minutes;
              seconds = 0;
              document.getElementsByTagName("input")[1].value = seconds;
          } else if(minutes >= 3) {
              clearInterval(timer);
          } else {
              seconds += 1;
          }                   
          document.getElementsByTagName("input")[1].value = seconds;

      }, 10);

setTimeout(function() {}, 1000)；和setInterval(funciton() {}, 1000)都会返回一个int类型的数值，从0开始计数。

setTimeout("console.log('Hello World')", 1000);
//两个函数的第一个参数都可以是字符串形式的代码，并可以执行。

3 Date对象

新建date对象var date = new Date();没有参数则表示当前日期，var date1 = new Date("2020-01-01")有参数就可以指定日期。
获取日期的年，getFullYear()至于月，日，周几，时分秒，就是英文单词即可。
**getTime()**这个方法比较常用，返回 1970 年 1 月 1 日至今的毫秒数。

toLocaleString()	根据本地时间格式，把 Date 对象转换为字符串。
toLocaleTimeString()	根据本地时间格式，把 Date 对象的时间部分转换为字符串。
toLocaleDateString()	根据本地时间格式，把 Date 对象的日期部分转换为字符串