一：DOM節(jié)點(diǎn)操作

• 創(chuàng)建節(jié)點(diǎn)
  • var li = document.createElement("li");
• 插入節(jié)點(diǎn)、添加
  • 1.appendChild();在最后面添加一個(gè)孩子
  • 2.insertBefore(a,b);添加到前面，必須寫(xiě)滿兩個(gè)參數(shù)
    參數(shù)a：要添加的節(jié)點(diǎn)
    參數(shù)b：參照的節(jié)點(diǎn)（b參數(shù)如果為null那么放在最后一個(gè)）
• 刪除節(jié)點(diǎn)（父親刪除孩子）
  • removeChild()
  • 注意點(diǎn)：必須是兒子元素，如果刪除孫子及以下，那么會(huì)報(bào)錯(cuò)
• 克隆節(jié)點(diǎn)
  • cloneNode()
    • 參數(shù)傳true為深復(fù)制【里面的元素也復(fù)制】
    • 參數(shù)傳false為潛復(fù)制【只復(fù)制本節(jié)點(diǎn)】
    • 默認(rèn)為潛復(fù)制

二：節(jié)點(diǎn)操作（父、子、兄）

• 定義：就是各個(gè)節(jié)點(diǎn)的相互關(guān)系

• 特點(diǎn)：DOM節(jié)點(diǎn)不是孤立的

• “掌握”父節(jié)點(diǎn)（必須是親的）【parentNode】

  • 案例：關(guān)閉二維碼

• 所有子節(jié)點(diǎn)（必須是親的）

  • childNodes（嫡出）選出全部的“親”孩子
    • 1.它是標(biāo)準(zhǔn)屬性，他返回指定元素的子元素集合，包括HTML節(jié)點(diǎn)、text節(jié)點(diǎn)（空格）
    • 2.火狐、谷歌等高版本會(huì)把換行也看做是子節(jié)點(diǎn)
    • 3.nodeType == 1時(shí)，才是子元素節(jié)點(diǎn)（過(guò)濾掉空格）【案例】
  • “掌握”children（庶出）：選取所有的孩子（只有元素節(jié)點(diǎn)）
    • 1.沒(méi)有兼容性問(wèn)題
    • 2.工作中就用它
    • 注意：在ie7、8中有可能包含注釋節(jié)點(diǎn)[工作中盡量避免即可]

• 子節(jié)點(diǎn)：第一個(gè)孩子（必須是親的）

  • firstChild第一個(gè)孩子（ie6、7、8認(rèn)識(shí)）
  • firstElementChild第一個(gè)孩子（其他瀏覽器認(rèn)識(shí)）
  • lastChild
  • lastElementChild
  • 第一個(gè)孩子的兼容性寫(xiě)法
    • var div = dom.firstElementChild || dom.firstChild;
    • 注意點(diǎn)：用的比較少，因?yàn)榧嫒菪圆?，空格也?dāng)做節(jié)點(diǎn)

• 兄弟節(jié)點(diǎn)（必須是親的）

  • nextSibling下一個(gè)兄弟（只有ie6、7、8認(rèn)識(shí)）
  • nextElementSibling（其他瀏覽器認(rèn)識(shí)的）
  • previousSibling：上一個(gè)兄弟
  • previousElementSibling
  • 兄弟節(jié)點(diǎn)兼容寫(xiě)法
    • var div = dom.nextElementsibling || dom.nextSibling
    • 注意點(diǎn)：順序不能顛倒（先寫(xiě)正常瀏覽器，在寫(xiě)ie）

總結(jié)：只有父親節(jié)點(diǎn)：parentNode和子節(jié)點(diǎn)children常用其他作為了解

二：js內(nèi)置對(duì)象之Date對(duì)象

• var date = new Date();
• 獲取當(dāng)前年、月、日、周
  • var year = myDate.getFullYear();
  • var month = myDate.getMonth();
    • 獲取的月份是從0到11,0對(duì)應(yīng)的是一月
  • var day = myDate.getDate();
  • var weedDay = myDate.getDay();
    • 獲取的星期是從0到6,0對(duì)應(yīng)周日
• 案例：
  • 1.簡(jiǎn)單的日歷制作
  • 2.時(shí)鐘的制作

三：offset家族##

• offset自己的（目的：就是用來(lái)獲取元素自己的尺寸的）
• 自己的寬、高（和他人無(wú)關(guān)）
  • offsetHeight【offsetHeight = height + border + padding】
  • offsetWidth【offsetWidth = width + border + padding】
  • 返回距離上級(jí)盒子（帶有定位：如果所有的父級(jí)都沒(méi)有定位那么已body為準(zhǔn)）左邊、上邊（沒(méi)有右和下）
    • offsetLeft【邊框到邊框的距離】
    • offsetTop【邊框到邊框的距離】
• 注意：
  • 1.直接獲取style.width的寬高是空
  • 2.可以獲取行內(nèi)樣式的style的寬、高