目錄
1.增加節點
1.1document.write
1.2innerHTML
1.3動態添加??
1.4追加和插入節點
2.刪除、克隆、替換節點
2.1刪除節點
2.2克隆節點
2.3替換節點
3.事件
3.1什么是事件
3.2事件三要素
3.3事件的種類
3.4常見事件名稱（類型）匯總
4.操作元素的屬性
4.1修改和獲取屬性三種方法匯總
4.2常用DOM屬性匯總
4.3改變元素內容
4.4表單元素的屬性操作
4.5樣式屬性操作
1.增加節點
1.1document.write
document.write('?標簽名 ');
document.write('<h3></h3>');1.2innerHTML
節點.innerHTML='?標簽名 ';
這種方式有覆蓋性， 不推薦單獨使用。
1.3動態添加??
var 標記= document.createElement('標簽名')；
添加完節點后需要將節點放到指定位置才能被我們正常使用。因此通常將添加語句和追加語句結合使用。
var b_tr = document.createElement('tr');// 添加trtbody.appendChild(b_tr);// 在tbody里面追加tr1.4追加和插入節點
（1）追加節點 ：?父節點.appendChild(子節點)（向子節點列表的末尾添加新的子節點）
（2）插入節點 父節點.insertBefore(新節點，舊節點)；（會將新節點添加在舊節點后面）
2.刪除、克隆、替換節點
2.1刪除節點
父節點.removeChild(子節點)
2.2克隆節點
var cnode=node.cloneNode(true);
括號里面可以寫true或者false,默認是false,true可以把內容一塊克隆了，false只能克隆標簽。
2.3替換節點
?父節點.replaceChild(新節點，已存在的節點)
3.事件
3.1什么是事件
? ? ? ?JavaScript使我們有能力創建動態頁面，而事件是可以被JavaScript偵測到的行為（就是觸發響應機制）。網頁中的每個元素都可以產生某些可以觸發JavaScript的事件，例如，我們可以在用戶點擊某按鈕時產生一個 事件，然后去執行某些操作。
3.2事件三要素
- 事件源（觸發事件的元素）。
- 事件名稱（類型）
- 事件的處理程序（就是一個函數，函數內部寫入這個事件要做什么）。
3.3事件的種類
（1）傳統事件（簡單但不利于團隊合作,和html沒有完全分離，多次添加重復事件會覆蓋）
? <button onclick="text1()"></button>（2）腳本模型----現代事件 ? ?（利于團隊合作，on+事件名稱）
格式：btn.οnclick=function(){}或者
btn.οnclick=show;(此處函數名后不加括號)
? ? ? ? function show(){
? ? ? ? }
<button id="btn">腳本模型點擊</button><script>function text1() {console.log('單擊事件已被執行');// 此處不建議用document.write('')輸出，頁面會重繪，就不顯示按鈕的存在了}var btn=document.querySelector('#btn');btn.onclick=function(){}// 或者btn.onclick=text1;//注意函數名后不能加括號// 此方法不足的地方，同樣的注冊事件只能添加一次，多次添加會覆蓋</script>? ? ? ? （3）新事件 ? w3c事件（加同樣注冊事件可以注冊多個監聽器，然后按照多個注冊順序依次執行）
| 兼容性 | 注冊（綁定、添加）事件 | 解綁（刪除）事件 |
| ie9+ | ?btn.addEventListenter('click',function(){},false)? 或者 btn.addEventListenter('click',函數名,false)? ?false可以省略，表示冒泡機制 ? ? ? ? | ?btn.removeEventListenter('click',函數名); |
| ie8 | ?btn.attachEvent('onclick',function(){}) | btn.detachEvent('onclick',function(){}); |
| 兼容所有版本 | btn.οnclick=function(){} | ?btn.οnclick=null; |
3.4常見事件名稱（類型）匯總
| 鼠標事件 | 觸發條件 |
| ?onclick | ? 單擊 |
| onmouseover | ? 鼠標經過（有冒泡機制） |
| onmouseout | ? 鼠標離開（有冒泡機制） |
| onmouseenter | ? 鼠標進入 |
| onmouseleave | ? 鼠標離開 |
| ? ? ? ? onmousedown ? | 鼠標按下 |
| ? onmousemove ? ? | 移動鼠標 |
| onmouseup ? | ?釋放鼠標 |
| ? ?onfocus ? ? | 獲取焦點 |
| ?onblur ? ? | 失去焦點 |
4.操作元素的屬性
4.1修改和獲取屬性三種方法匯總
（1）方法一：
? ? ? ? ?修改：節點對象.屬性名=屬性值;
? ? ? ? ?獲取： ?var 變量=?節點對象.屬性名;
（2）方法二：
? ? ? ? ?修改：節點對象[屬性名]=屬性值；
? ? ? ? ?獲取： ?var 變量=節點對象[屬性名];
（3）方法三：自定義屬性
? ? ? ? ? ? ? ? ? ?節點對象.setAttribute(屬性名，屬性值)
? ? ? ? ? ? ? ? ? ? ?var 變量=? 節點對象.getAttribute(屬性名)
4.2常用DOM屬性匯總
| HTML標記的屬性? | ?DOM元素屬性 |
| src、alt、id、style... | src、alt、id、style... |
| class | className |
| for | htmlFor |
4.3改變元素內容
（1）改變內容(文字)
? ? node.innerText='值'
? ? .innerText這個方法沒有解析標記的能力，對原來的內容有覆蓋性，但它去除html標簽,同時去掉空格和換行。
? ? (2)改變內容和標簽
? ? ?node. innerHTML='值'
? ? innerHTML 對原來的內容有覆蓋性，會將標簽內所有內容都打印出來，包括html標簽，同時保留空格和換行。
4.4表單元素的屬性操作
（1）通過value值來操作
? ? ? ? type='text/password/file/submit/reset'?和多行文本框textarea還有選擇框select可以通過取出value的值來進行操作。如果有value就取value中的值，當 value='' " 取出為空，如果沒有就取出輸入框中的值。
(2)通過checked值來操作?
? ?單選鈕和復選框可以通過checked來操作。eg:??radio.checked=true;? 此時，選中時true,未選中是false.
(3)通過disabled(按鈕是否禁用)值來操作
? ? 按鈕可以設置disabled值來完成一些操作。此時， true是按鈕不可用 ?false 是按鈕可用。
4.5樣式屬性操作
? ? ? 我們可以通過.style和.className這兩種方式來修改元素大小、顏色等樣式。其中element. style是 行內樣式操作。element. className 是類名樣式操作，可以用來修改元素的類名。
（1）設置或修改樣式（只有一種方法）
? ?dom節點.style.樣式名=樣式值；（此時設置的樣式都是行內樣式，優先級比較高）注意：在js里面修改的樣式采用駝峰命名法
element.style.textAlign=center（2）獲取樣式（兩種方法）
? ? ? 方法一(只能獲取行內樣式)：var stylev=dom節點.style.樣式名;
? ? ? 方法二（行內和外部都可以渠道，只讀屬性）： window.getComputedStyle(dom節點對象，null).樣式名? （ window.getComputedStyle(dom節點對象，偽類).樣式名可以取到偽類的樣式）
<body><div id="box"></div><script>var box = document.querySelector('#box');box.style.width='200px';box.style.height="200px";box.style.backgroundColor='#333';box.style.margin='auto';var w1=box.style.width;console.log(w1);var h1=window.getComputedStyle(box,null).height;console.log(h1);</script>
</body>
：Microcontroller Driver)
)
