一些JS超级基础的知识梳理（四）

操作DOM

DOM：document object model 文档对象模型，提供一些属性和方法供我们操作页面中的元素

获取DOM元素的方法

• document.getElementById() 指定在文档中，基于元素的 ID 或者这个元素对象
• [context].getElementsByTagName() 在指定上下文(容器)中，通过标签名获取一组元素集合
• [context].getElementsByClassName() 在指定上下文中，通过样式类名获取一组元素集合 （不兼容IE6~8）
• document.getElementsByName() 在整个文档中，通过标签的 NAME 属性值获取一组节点集合 （在 IE 中只有表单元素的 NAME 才能识别，所以我们一般只应用于表单元素的处理）
• document.head / document.body / document.documentElement 获取页面中的 HEAD / BODY / HTML 三个元素
• [context].querySelector([selector]) 在指定上下文中，通过选择器获取到指定的元素对象
• [context].querySelectorAll([selector]) 在指定上下文中，通过选择器获取到指定的元素集合

创建：
document.write (会导致页面重绘的问题)
innerHTML（不使用拼接字符串，用数组拼接的话。效率比createElement高）
由于字符有不可变性，每次字符串拼接都会开辟新的内存，所以会导致效率很低。
createElement
新增：
appendChild
insertBefore
删除：
removeChild
针对于自定义属性：
setAttribute
getAttribute
removeAttribute

 <!-- <div id="haha">哈哈</div> -->
  <div class="box">
    <span>嘻嘻1</span>
  </div>

   let box1 = document.querySelector('.box');
    // 克隆第一份（深克隆）
    let box2 = box1.cloneNode(true);
    box2.querySelector('span').innerText = '嘻嘻2';
    // 克隆第二份（浅克隆）
    let box3 = box1.cloneNode(false);
    box3.innerHTML = "<span>嘻嘻3</span>";

    document.body.appendChild(box2);
    document.body.appendChild(box3);

    //===========
    // 容器.removeChild(元素)
    document.body.removeChild(box2);

// 动态创建一个DIV元素对象，把其赋给BOX
    let box = document.createElement('div');
    box.id = 'boxActive';
    box.style.width = '200px';
    box.style.height = '200px';
    box.className = 'RED';

    // 动态创建一个文本
    let text = document.createTextNode('嘻嘻');

    // 添加：容器.appendChild(元素)
    box.appendChild(text);
    // document.body.appendChild(box);

    // 放到指定元素前：容器.insertBefore([新增元素],[指定元素])
    let haha = document.getElementById('haha');
    // haha.parentNode.insertBefore(...)
    document.body.insertBefore(box, haha); 

节点

JS中的节点和描述节点之间关系的属性
节点 ： Node （页面中所有的东西都是节点）
节点集合：NodeList （getElementsByName / querySelectorAll 获取的都是节点集合）

• 元素节点 （元素标签）
• nodeType：1
• nodeName : 大写的标签名
• nodeValue ：null
• 文本节点
• nodeType：3
• nodeName : ‘#text’
• nodeValue ：文本内容
• 注释节点
• nodeType：8
• nodeName : ‘#commen’
• nodeValue ：注释内容
• 文档节点 document
• nodeType：9
• nodeName : ‘#document’
• nodeValue ：null

描述这些节点之家关系的属性

• childNodes ：获取所有的子节点
• children：获取所有的元素子节点（子元素标签集合）
• parent：获取父亲节点
• firstChild：获取第一个子节点
• lastChild：获取最后一个子节点
• firstElementChild / lastElementChild ：获取第一个和最后一个元素子节点 （不兼容IE6~8）
• previousSibling：获取上一个哥哥节点
• nextSibling：获取下一个弟弟节点
• previousElementSibling / nextElementSibling ：获取哥哥和弟弟元素节点（不兼容IE6~8）

定时器

setTimeout

// 1. setTimeout(function () {}, 时间毫秒数) 等时间到了，执行一次回调函数。返回定时器 ID；
var timerId = setTimeout(function () {
  // 这个回调函数中写你想时间到了做的事情
  console.log('没时间了');
}, 3000);
var timerId2 = setTimeout(function () {
  console.log('timer 2');
}, 4000);

console.log(timerId);
console.log(timerId2);

setInterval

// 2. setInterval(function () {}, 时间间隔毫秒数); 每隔时间间隔都执行一次回调函数；返回值也是定时 器 id；

var timerId3 = setInterval(function () {
  console.log('inteval的时间到了');
}, 1000);
console.log(timerId3);

// 定时器清除：想让定时器停止，就是清除定时器。清除定时器也有两种办法：
// 1. clearTimeout(定时器 ID) 清除 setTimeout() 设置的定时器
  clearTimeout(timerId);

// 2. clearInterval(定时器 id)；清除 setInterval() 设置的定时器
  clearInterval(timerId3);

定时器都是异步编程的

写个倒计时

<style>
    #timeBox {
      margin: 20px auto;
      height: 100px;
      width: 300px;
      line-height: 100px;
      font-size: 25px;
      text-align: center;
    }
  </style>
<div id="timeBox">--:--:--</div>

var timeBox = document.getElementById('timeBox');

function countDown() {
  // 1. 计算当前时间距离目标时间的毫秒时间差
  var curDate = new Date(); // 获取当前时间
  var curStamp = curDate.getTime(); // 获取当前时间的时间戳
  var targetDate = new Date('2019-05-23 14:00:00'); // new Date() 可以把时间格式的字符串转换成标准时间格式对象。因为只有标准时间格式的对象才能调用 getTime()
  var targetStamp = targetDate.getTime(); // 获取目标时间的时间戳
  var spanStamp = targetStamp - curStamp;  // 目标时间减去当前时间的毫秒差

  // spanStamp 小于等于0，表示已经到达或者超过目标时间了，此时应该停止倒计时。
  if (spanStamp <= 0) {
    // 停止倒计时，并且页面中的倒计时更新成 '00:00:00'，终止后面的代码执行
    clearInterval(timerId);
    timeBox.innerHTML = '00:00:00';
    return;
  }

  // 2. 把毫秒差换算成小时、分钟、秒
  // 2.1 小时
  var hours = Math.floor(spanStamp / (60 * 60 * 1000)); // 用毫秒时间差 除以 一个小时的毫秒数

  // 2.2 分钟
  var hMs = hours * 60 * 60 * 1000; // 小时占用的毫秒数
  var mins = Math.floor((spanStamp - hMs) / (1000 * 60)); // 用总毫秒时间差 - 小时占用的毫秒数再除以 一分钟的毫秒数

  // 2.3 秒数
  var minsMs = mins * 1000 * 60; // 计算分钟数占用的毫秒数
  var secs = Math.floor((spanStamp - hMs - minsMs) / 1000);

  // 3 判断时分秒是否是各位数字，如果是个位数就需要补零；
  // hours = hours < 10 ? '0' + hours : hours;
  // mins = mins < 10 ? '0' + mins : mins;
  // secs = secs < 10 ? '0' + secs : secs; 当重复代码过多时，就需要封装成一个函数
  hours = addZero(hours);
  mins = addZero(mins);
  secs = addZero(secs);
  timeBox.innerHTML = `${hours}:${mins}:${secs}`;
  // timeBox.innerHTML =  hours + ':' + mins + ':' + secs;
}
function addZero(num) {
  return num < 10 ? '0' + num : num;
}
countDown();

var timerId = setInterval(countDown, 1000);