由於筆記比較雜，本身學習程度並不理想，所以暫時沒有整理這些繁雜的筆記。
ps:博客園markdown用起來和看起來都舒服太多了，這才是我瞭解的那個markdown，又回來了！

筆記

DOM對象 document object model

DOM 中節點種類一共有三種

註：在JS中所有的節點都是對象
<div title="屬性節點">文本內容</div>

<div></div> => 元素節點 
title => 屬性節點
文本內容 => 文本節點

查找元素節點方法

1. document.getElementById(id);//通過當前元素節點的id，獲取對應元素節點
   

• 元素節點對象：
  通過這個節點對象(note)，訪問它的一系列屬性，以下就是對象名稱：
  1. note.tagname 獲取元素節點的標簽名
     
  2. note.innerHTML 獲取元素節點標簽間的內容
     
  3. note.id
  4. note.className
  5. note.title
  6. note.style等
• HTML屬性的屬性（對應元素節點的對象）：
  id  
  title  
  style  
  innerHTML  
  className
  元素節點.屬性
  元素節點[屬性]
  

    document.getElementsByTagName()
    node.getElementsByTagName();

• 從node節點開始，找出符合的標簽節點
  參數：標簽名；
  功能：獲取當前頁面上所有符合改標簽的元素節點
  返回值：一個裝有符合條件的元素節點的數組

• document.getElementsByName(); 只能從document調用 ps：許多的name可以一樣
  參數：name的值
  返回值：裝有符合條件的元素節點的數組

• document.getElementsByClassName() ps：可以從某一個元素節點去查找
  參數：class
  返回值：所有符合條件的元素節點組合的數組。
  在第版本的ie瀏覽器中是不支持的 處理辦法
  獲取父節點的所有元素，然後進行一一判斷，符合className等於參數class就可以加入數組中。

封裝函數·setAttribute·childNotes·Attributes·parentNode

• id document.getElementById()
• class document.getElementsByClassName();
• name document.getElementsByName();
• tagName note.getElementsByTagName();

通過封裝函數，簡化上述操作。

css選擇器

• #id //通過id獲取元素節點
• .class //通過className獲取元素節點
• tagName //通過tagName獲取元素節點
• name=xxx //通過name獲取元素節點

詳情看$()方法 //通過封裝css選擇器的方法，來快速的獲取對應的標簽

作用：操作當前元素的某一個屬性的

get/setAttribute() 獲取元素屬性的兩種方法

removeAttribute()

1. 和點出來的class屬性範圍區別：點操作是通過元素節點點出className參數，
   而set/get是通過傳入class參數來獲取 例如：Obtn.className == Obtn.getAttribute("class")
2. 用戶自定義屬性的支持。自定義xxx="yyyy" Obtn.setAttribute("xxx","yyy")
document.getElementsById("btn").getAttribute("id")

childNotes(); 獲取當前節點的所有子節點，包括三種節點類型 nodeName,nodeType,nodeValue

DOM節點類型
元素節點 屬性節點 文本節點
作用:
(1)刪除子節點中的空白節點
方法：使用正則表達式進行刪除。/^\s+$/.test() 判斷是否value為空
刪除空白節點的時候必須是倒序刪除，原因自己想，想不到撞死，提示：他是一個數組類型

(2)不知道

ownerDocument 結果一般是document
parentNode 父親節點 previousSibling 同級別的上一個節點 nextSibling 同級別的下一個元素節點

attributes 返回該節點的屬性節點,[集合]
集合特點:1.不重覆;2.無序
其中一種訪問方法：node.attributes.getNamedItem("id");

dom創建帶文本的元素節點

• document.write() //寫入
• document.createElement("div") 插入標簽
• note.appendChild()
• parent.replaceChild(newNode,oldNode)
• note.cloneNode() 參數：true則將文本內容傳入，否則預設只克隆標簽
  ps:系統沒有提供同時插入文本和標簽的方法

    var note = document.createElement("span")
    var Ntext = document.createTextNode("文本內容") 插入文本內容
    note.appendChild(Ntext)
    odiv.appendChild(note)

事件

1. 事件基礎

訪問web界面的用戶引起的一系列操作
滑鼠事件，鍵盤事件，HTML事件
函數：on+事件名稱

2. 事件流

事件：捕獲，目標，冒泡
阻止冒泡：

    evt.cancelBubble = true //對主流瀏覽器和ie生效
    evt.stopPropagation() //只對主流瀏覽器生效

事件委托：利用事件冒泡原理，把本應添加在元素上的事件委托給他的父級（外層）
多個重覆的事件，可以把這個事件委托到父級來實現。更加簡潔

阻止預設事件
比如<a></a>href跳轉標簽

1. onclick 方法裡面,return false
2. evt.preventDefault();
3. evt.returnValue = false;

3. DOM2級事件

DOM2級事件處理程式
添加事件監聽器：addEventListener(事件名，處理函數，布爾值)
移除事件監聽器：removeEventListener(事件名，處理函數)
IE下的事件監聽器：attachEvent(事件名，處理函數) detachEvent(事件名，處理函數)

ps:普通事件中點擊事件會被後一個點擊事件給覆蓋，而二級事件不會被其他事件所覆蓋。可以重覆添加
布爾值為false的時候，為正常的冒泡事件，true為捕獲（從外往內）

cookie

• http協議
• cookie的概念
• cookie的基本操作
• cookie的封裝

http：超文本傳輸協議，用於從web伺服器傳輸超文本到本地瀏覽器的傳輸協議，是一個無狀態的協議
cookie：緩存存在本地瀏覽器中的數據，包括增刪改查的四個部分

document.cookie = "userName=paikle";
//這種方式添加的cookie會隨著瀏覽器的關閉而消失，要設置時間限制的cookie需要在後面添加date限制

設置時間來讓cookie過期，從而達到刪除的效果。

var oDate = new Date(); //創建時間
oDate.setDate(oDate.getDate()+3) //將時間設置為三天之後
document.cookie = "user = paikle;expires="+oDate; //將cookie過期時間設置為三天後

cookie的封裝

setcookie(name,value,day) //設置cookie
getcookie() //獲取cookie
removecookie() //移除cookie

正則表達式

正則表達式是由普通字元和特殊字元組成的對字元串進行過濾的邏輯公式

修飾符 g i

g 表示會全部搜索，返回符合的數字,i 表示忽略大小寫

 var reg = /abc/g;
 var str = 'abcabc';

1.test方法

正則表達式方法，檢測字元串是否又符合規則的字串，有返回true，無為false

//兩種構造方法
var rge = /abc/;
var reg = new RegExp("abc");

var str = "ab";

var flag = reg.test(str)

2.match方法 字元串方法

console.log(str.match(reg))

3.search方法 字元串的方法 用於查找符合規則的字串的位置，只返回第一個匹配的位置

var rg = /bc/
console.log(str.search(rg))

4.split方法

5.replace方法

var tmd = /tmd/gi
var str = "abc tmd tmd TMd sabi";
console.log(str.replace(tmd,"*"));

6.exec 正則表達式的方法 將匹配成功的內容放到數組內，沒有匹配成功返回null

和match差不多的用法，不過在配置全局匹配的時候不能一次出來

ES6

• let的使用
• 解構賦值
• 模板字元串
• 箭頭函數
• set結構和map結構
• 生成器函數
• 類class

1.let的使用

用來聲明變數。用法類似於var ，但是所聲明的變數，只在let命令所在的代碼塊有效。
存在塊級作用域 {}
不存在聲明提升
不允許重覆聲明(包括普通變數和函數參數)
const使用 用來聲明常量，不要試圖改變常量的值，其他語法參照let

2.解構賦值

    //預設賦值
    let [a,b,c] = [1,2,3]
    [a,b=2] = [3] // a = 3,b = 2
    let c ; //undifined;
    [a=1] = [c] //a = 1
    //對象
    let {a,b} = {a:'100',b:'200'} // a = 100 , b = 200
    let {a:b} = {a:111} // b = 111;
    let {a,b = 4} = {a:1} //a = 1;b = 4

3.箭頭函數

1. 只有一個表達式
2. 含有多條語句
3. this的指向問題
   在箭頭函數內的this指向定義時的作用域，而不是執行時的作用域。

var name = "作用域1"
    var obj = {
        'name':'jonson',
        'syHello':()=>{
            this.name;//this指向定義的作用域，則返回：作用域1
        }
    }
//ps
var obj = {
    'name':"joson",
    "syHello":function(){
        this.name;//joson
    }
}

3.set結構 & map結構

set

set的值是不能重覆的，相當於集合
var set = new Set([1,3,2,2,34,1,3])
var arr = [...set] 擴展運算符，將類數組對象轉換以逗號分割的序列，set轉換為數組的方式
arr 為數組形式
使用for of 遍歷set or 數組

for(let et of set){ //et直接代表元素
    console.log(et)
}

set.size 長度 set.add() 添加一個 set.delete() 刪除某一個 set.has() 是否包含某一個 set.clear() 清空
keys() 返回鍵名
values() 返回鍵值
entries() 返回鍵值對

forEach()

map

let map = new Map([['name':'john'],['age':'30']])
map.set(key,value) 添加元素
map.set(key,value) map.get(key) map.delete() map.has(key) map.clear();

keys() 返回鍵名
values() 返回鍵值
entries() 返回鍵值對
forEach() map.forEarch((value,key) => console.log(value*2))

4.生成器函數

5.class

    class Person{
        constructor(name){
            this.name = name;
        }
    }

JS動畫 （7.1記）