08 DOM 新增和刪除元素、HTML DOM常用物件
正課: 1. 新增/刪除元素 2. ***HTML DOM常用物件 select/option table/行分組/tr/td form
1. 新增/刪除元素: 新增: 3步: 1. 建立新的空元素: var a=document.createElement("a"); 相當於: <a></a> 2. 設定元素的關鍵屬性: a.href="http://tmooc.cn" a.innerHTML="go to tmooc"; 相當於: <a href="http://tmooc.cn">go to tmooc</a> 3. 將元素新增到DOM樹上: 3種: 1. 末尾追加: parent.appendChild(a) 2. 插入在一個現有元素之前: parent.insertBefore(a,oldElem) 3. 替換現有元素: parent.replaceChild(a,oldElem)
***頁面載入過程: html->DOM Tree ↓ Render Tree->***layout->paint ↑ css->CSSRules 結論: 只要修改DOM樹的內容，都會導致重新layout,layout特別耗時 解決: 優化: 儘量少的操作DOM樹 1. 如果同時新增父元素和子元素 先再記憶體中將子元素新增到父元素，再將父元素一次性新增到DOM樹
1. 新增/刪除元素 優: 儘量少的操作DOM樹 如何: 1. 如果同時新增父元素和子元素時，都要先將子元素新增到父元素，再將父元素整體新增到DOM樹一次即可 2. 如果同時新增多個平級元素時，都要用文件片段 文件片段: DocumentFragment 記憶體中臨時存放多個平級元素的虛擬的臨時父元素 何時: 如果同時新增多個平級元素時，都要先將平級元素新增到文件片段中。再將文件片段一次性新增到DOM樹 如何: 1. 建立文件片段: var frag=document.createDocumentFragment(); 2. 將子元素新增到frag中: frag.appendChild(child) 3. 將frag新增到DOM樹: parent.appendChild(frag) frag將子元素新增到DOM樹後，自動釋放。
正課: 1. 新增/刪除元素 2. ***HTML DOM物件 select/option table/行分組/tr/td form
刪除元素: 1. 先找到要刪除的元素物件elem 2. parent.removeChild(elem) elem.parentNode.removeChild(elem);
2. ***HTML DOM常用物件:
Image Select/Option Table/... Form
1. Image: 代表一個<img元素
唯一的簡化: var img=new Image();
2. Select:
Option: 代表一個<option元素 建立: var opt=new Option(text,value) 屬性: .index: 當前option在select中的下標 .value: .text => .innerHTML selected: 其實向select中新增一個option的最簡單寫法: sel.add(new Option(text,value));(記住：專屬於select喲)
3. Table: 代表<table元素
建立行分組， 刪除行分組， 獲取行分組
createXXX() deleteXXX() .行分組
行分組（thead，tbody，tfoot）
比如：var thead=table.createTHead(); //建立一個行分組，同時新增到table中
返回行分組的目的是，可以繼續向行分組中新增tr
刪除行分組：table.deleteTHead();
獲取行分組：table.tHead();
特例：tBody:一個table中可以包含多個tbody
獲得tbody：table.tBodies[i]
刪除：沒有table.deleteTBody() table 不能刪除tbody
行分組：建立、刪除、獲取行
.insertRow(i) .deleteRow(i) .rows
比如：var tr=thead.insertRow();
返回tr的目的是，可以繼續向tr中新增td
刪除tr:thead.deleteRow(i)
獲取thead中所有行：var trs=thead.rows
行：新增、刪除、獲取格
insertCell(i) deleteCell(i) .cells
強調：insertCell只能新增td，不能新增th
比如：在tr中新增一個格:var td=tr.insertCell();
刪除行: 2種: 1. 用行分組.deleteRow(i) i : 指的是行在當前分組內的下標位置 2. 用table.deleteRow(i) i: 指的是行在整個table中的下標位置 ——tr.rowIndex 只要用rowIndex刪除行，必須用table.deleteRow(tr.rowIndex)
table .createTHead()=>thead .deleteTHead() .tHead .insertRow(i) => tr //在i位置插入一個新行 省略i, 預設表示末尾追加 .deleteRow(i);//刪除i位置的行 .rows //獲得thead中的所有行物件 .rows[i]=>tr 屬性: .rowIndex 獲得當前tr相對於整個table的行下標 .insertCell(i) => td //i位置新增一個新td 省略i, 預設表示末尾追加 .deleteCell(i) .cells //獲得行中的所有格 .cells[i] => td .createTBody() tbody .tBodies/tBody .createTFoot() tfoot .deleteTFoot() .tFoot
補: 三類對話方塊: 都不用 alert("警告"); var bool=confirm("確認提示"); 點確定->true 點取消->false var input=prompt("輸入提示")
4、Form: 代表網頁上的一個form元素 獲取: var form=document.forms[i/id/name]; 屬性: .length: 相當於form.elements.length 方法: .submit() : 專用於手動提交表單 問題: 使用者可能按回車，自動提交 解決: 表單提交的最後一關是一個事件 form.onsubmit(): 當表單正式提交前自動觸發 獲取*表單*元素: var elem=form.elements[i/id/name]; 更簡化: 如果表單元素有name屬性: form.name 方法: .focus() : 讓當前表單元素獲得焦點