JavaScript基础-5

一：DOM节点操作

• 创建节点
  • var li = document.createElement("li");
• 插入节点、添加
  • 1.appendChild();在最后面添加一个孩子
  • 2.insertBefore(a,b);添加到前面，必须写满两个参数
    参数a：要添加的节点
    参数b：参照的节点（b参数如果为null那么放在最后一个）
• 删除节点（父亲删除孩子）
  • removeChild()
  • 注意点：必须是儿子元素，如果删除孙子及以下，那么会报错
• 克隆节点
  • cloneNode()
    • 参数传true为深复制【里面的元素也复制】
    • 参数传false为潜复制【只复制本节点】
    • 默认为潜复制

二：节点操作（父、子、兄）

• 定义：就是各个节点的相互关系

• 特点：DOM节点不是孤立的

• “掌握”父节点（必须是亲的）【parentNode】

  • 案例：关闭二维码

• 所有子节点（必须是亲的）

  • childNodes（嫡出）选出全部的“亲”孩子
    • 1.它是标准属性，他返回指定元素的子元素集合，包括HTML节点、text节点（空格）
    • 2.火狐、谷歌等高版本会把换行也看做是子节点
    • 3.nodeType == 1时，才是子元素节点（过滤掉空格）【案例】
  • “掌握”children（庶出）：选取所有的孩子（只有元素节点）
    • 1.没有兼容性问题
    • 2.工作中就用它
    • 注意：在ie7、8中有可能包含注释节点[工作中尽量避免即可]

• 子节点：第一个孩子（必须是亲的）

  • firstChild第一个孩子（ie6、7、8认识）
  • firstElementChild第一个孩子（其他浏览器认识）
  • lastChild
  • lastElementChild
  • 第一个孩子的兼容性写法
    • var div = dom.firstElementChild || dom.firstChild;
    • 注意点：用的比较少，因为兼容性差，空格也当做节点

• 兄弟节点（必须是亲的）

  • nextSibling下一个兄弟（只有ie6、7、8认识）
  • nextElementSibling（其他浏览器认识的）
  • previousSibling：上一个兄弟
  • previousElementSibling
  • 兄弟节点兼容写法
    • var div = dom.nextElementsibling || dom.nextSibling
    • 注意点：顺序不能颠倒（先写正常浏览器，在写ie）

总结：只有父亲节点：parentNode和子节点children常用其他作为了解

二：js内置对象之Date对象

• var date = new Date();
• 获取当前年、月、日、周
  • var year = myDate.getFullYear();
  • var month = myDate.getMonth();
    • 获取的月份是从0到11,0对应的是一月
  • var day = myDate.getDate();
  • var weedDay = myDate.getDay();
    • 获取的星期是从0到6,0对应周日
• 案例：
  • 1.简单的日历制作
  • 2.时钟的制作

三：offset家族##

• offset自己的（目的：就是用来获取元素自己的尺寸的）
• 自己的宽、高（和他人无关）
  • offsetHeight【offsetHeight = height + border + padding】
  • offsetWidth【offsetWidth = width + border + padding】
  • 返回距离上级盒子（带有定位：如果所有的父级都没有定位那么已body为准）左边、上边（没有右和下）
    • offsetLeft【边框到边框的距离】
    • offsetTop【边框到边框的距离】
• 注意：
  • 1.直接获取style.width的宽高是空
  • 2.可以获取行内样式的style的宽、高