DOM

DOM（Document Object Model）：
    結點的概念：整個文檔就是由層次不一樣的多個節點組成，能夠說結點表明了所有內容。
    結點類型
        1.元素結點
        2.屬性結點
        3.文本結點
    
    結點的注意點：
        1.文本節點和屬性結點都看做元素結點的子結點
        2.咱們通常所說的結點指的就是元素結點，將html標籤看做是一個對象，並用「結點」稱呼它
        3.結點的關係有：父子關係、兄弟關係

1.獲取元素結點
    1)直接獲取
                 ① document.getElementById()
                 ② document.getElementsByName()
                 ③ document.getElementsByTagName()
         2)間接獲取
                父子關係
                    firstChild   lastChild   childNodes
                子父關係
                    parentNode
                兄弟關係
                    nextSibling   previousSibling

2.操做屬性結點
    1)經過對象「.」屬性，來操做屬性
                    優：能夠動態獲取用戶修改的屬性值
                    缺：不能獲取自定義屬性的值
        2)getAttribute("key")  setAttribute("key","value")  removeAttribute("key")
                    優：能夠獲取自定義屬性的值
                    缺：不能動態獲取用戶修改的屬性值

3.處理文本結點
    1) 經過對象.innerText 獲取標籤內部的文本信息
        2) 經過對象.innerHTML 獲取標籤內部的HTML代碼

4.動態改變DOM結構
     1)建立一個結點對象
               document.createElement("標籤名")
         2)（父結點）追加子結點對象
               fatherNode.appendChild(子結點對象)
         3)（父結點）在指定結點前添加子結點
               fatherNode.insertBefore(新結點對象，參考結點對象)
         4)（父結點）替換舊的子結點對象
               fatherNode.replaceChild(新結點對象，舊結點對象)
         5)（父結點）刪除舊子結點對象
               fahterNode.removeChild(舊結點對象)

5.動態改變元素的CSS樣式（不重要）
    1)咱們經過對象.style屬性操做對象的css樣式：樣式名稱中有「-」將「-」去掉，並將「-」後一個字母改成大寫來做爲樣式的新名稱
        2)咱們但願經過class爲一個對象添加一個class樣式，添加屬性名是className，而並不是class（class是js的關鍵字，並能做爲屬性名存在）

6.表單操做
    1)表單獲取方式
1.document.getElementById()
2.document.forms[index];
3.document.forms[form_name]
4.document.form_name
2)表單對象的屬性
    id
    name
    action
    method
get方式和post方式的區別
1.get方式會將提交的數據以（?name1=value1&name2=value2...）放在url後面
  post方式會將數據以（name1=value1&name2=value2...）放在「請求實體」中
2.get將數據放在url後，因爲url是有長度的，且url是可見，因此get方式不適合發送一些敏感數據
  post方式將數據放在「請求實體」中，理論上是無限制，post方式適合發送一些敏感數據
3.get方式請求會有緩存
  post方式請求不會有緩存
        enctype
1.application/x-www-form-urlencoded（默認、且經常使用）
    不管post方式仍是get方式提交，表單數據均以(name1=value1&name2=value2...)組織數據
2.multipart/form-data（表單上傳文件時）
    1)get方式，表單以(name1=value1&name2=value2...)組織數據
    2)post方式，表單數據會放在相似於「------WebKitFormBoundaryGSF0lHBAvwWyAcuV」字符串中間
3.text/plain
    1)get方式，表單以(name1=value1&name2=value2...)組織數據
    2)post方式，表單數據會以name1=value2，name2=value2，數據之間沒有鏈接符號
    3)表單對象的方法
        submit()
        reset()
    4)表單對象的事件
1.對於表單中設置的提交、重置按鈕，會觸發onsubmit事件、onreset事件
2.在表單外部經過submit()提交表單不會觸發onsubmit事件
3.在表單外部經過reset()重置表單會觸發onreset事件
4.咱們將onsubmit事件、onreset事件返回一個false就能夠阻止事件的執行

7.表單域操做
    1)獲取表單域對象
1.document.getElementById()
2.formObj.elements[index]
3.formObj.elements[formarea_name]
4.formObj.formarea_name
    2)表單域對象的屬性
1.readonly
    1)input對象 設置了readonly="readonly"，則該表單域只讀（用戶不能修改其value屬性），可是能夠提交
    2)經過js爲input對象添加「只讀」屬性，應經過「對象.readOnly = true」添加
    3)readonly="readonly" 只能使用在<input type='text'> 及 <textaread>標籤中
2.disabled
    1)input對象 設置了disabled="disabled"，則該表單域不可用（用戶不能修改其value屬性）且不能提交
    2)經過js爲input對象添加「不可用」屬性，應經過「對象.disabled = true」添加
    3)disabled="disabled"能夠將全部的表單域失效
3.name
    1)用於獲取該表單域
    2)只有設置了name屬性的表單域才能夠提交
4.value
    1)用戶輸入的內容就是value，表單會提交該屬性的值
    2)select標籤的value值就是當前選中的option的value值
    3)textarea沒有value屬性，提交時提交標籤中間的文本值
5.form
    用於獲取表單域所在的表單對象
6.type
    瀏覽會根據type的值不一樣，顯示錶單域也不一樣
7.checked
    1)對於<input type="radio"> 和 <input type="checkbox">來說,checked="checked"表示默認選中該選項
    2)<input type="radio"> 只能給同組的一個添加 checked="checked"
    3)<input type="checkbox"> 能夠給同組的全部添加 checked="checked"
    4)經過js爲對象添加「默認選中」屬性，應經過「對象.checked = true」添加
8.select標籤的屬性
    1)selectedIndex表示當前選中的option的索引
    2)options表示全部option標籤對象的一個數組
    3)length表示右多少個下拉列表項
9.option標籤的屬性
    1)value 就是選項的值，提交時會提交該屬性的值
    2)text 就是option標籤中間文本值，相似於innerText
    3)selected="selected" 表示頁面加載時默認的選項
    3)表單域對象的方法
        onfocus()
        onblur()
    4)表單域對象的事件
        不一樣表單域對象經常使用的事件不一樣，參考js事件