16-0909-pm day 03
- 添加和刪除:
- ***HTML DOM常用對象:
Image Select Table Form Option
1. 添加和刪除:
1.1添加: 3步:
- 創(chuàng)建空元素對象:
var a=document.createElement("a");
相當于: <a></a>
- 設置元素的關(guān)鍵屬性:
a.
a.innerHTML="go to tmooc";
- 將元素掛到指定父元素下:
末尾追加: parent.appendChild(a); //此方法用的最多
插入: parent.insertBefore(a,old);
替換: parent.replaceChild(a,old);
***優(yōu)化: 盡量少的操作DOM樹:
html->DOM Tree
↓
Render Tree->layout->paint
↑
css->cssRules
如何:
- 如果同時添加父元素和子元素奏纪，要在內(nèi)存中先將所以子元素添加到父元素下棠赛，將父元素一次性加入DOM樹
- 如果同時添加多個平級子元素榔袋，要先將平級子元素加入文檔片段丑念，再將文檔片段整體加到頁面让蕾。
練習: select元素: onchange事件: 選中項發(fā)生改變時觸發(fā)
selectedIndex屬性: 當前選中項的下標
文檔片段: 內(nèi)存中臨時存儲多個平級子元素的虛擬父元素
何時: 添加多個平級元素時浪规，都要先將子元素追加到文檔片段中緩存，再將文檔片段一次性添加到頁面的父元素下
如何: 3步:
- 創(chuàng)建文檔片段： var frag=document.createDocumentFragment();
- 將平級子元素探孝，先追加到frag下: 用法同普通父元素
- 將文檔片段笋婿，整體添加到頁面
1.2 刪除節(jié)點:
parent.removeChild(child);
child.parentNode.removeChild(child);
2. HTML DOM常用對象:
2.1 Image: <img />
創(chuàng)建: var img=new Image();
2.2 Select: <select>
屬性:
selectedIndex: 當前選中項的下標
options: 獲得select下所有option元素的集合
Option:<option>
創(chuàng)建: var opt=new Option(text,value);
相當于: var opt= document.createElement("option");
opt.innerHTML=text;
opt.value=value;
屬性: index、text顿颅、value缸濒、selected
value: 如果選中項有value，則select的value等于選中項的value粱腻，如果選中項沒有value庇配，則select的value等于選中項的內(nèi)容
方法:
add(option): 向select下追加一個option對象 appendChild(option)
remove(i): 移除select下i位置的option
事件: onchange: 當選中項發(fā)生改變時觸發(fā)
day04
2.3 Table
tHead:
var thead=table.createThead();
table.deleteThead();
rows:
var tr=thead.insertRow(i);
//省略i，表示末尾追加
thead.deleteRow(i);
//i不能省略
cells:
var td=tr.insertCell(i);
//省略i绍些，表示末尾追加
tr.deleteCell(i)
tBodies
tBody:
var tbody=table.createTBody();
//沒有table.deleteTBody!
tFoot:
同tHead
Table.rows:
table.insertRow(i);
table.deleteRow(i);
row.rowIndex: 標識row在整個表中的下標位置
table.deleteRow(row.rowIndex)
強調(diào): 所有creatxxx/insertxxx方法都會自動將新元素添加到父元素下捞慌，不需要appendChild
練習: 確認框: confirm 兩個按鈕
點確認，就返回true遇革，否則返回false
2.4Form
獲取: var form=document.forms[i/id/name];
屬性:
length: 表單中卿闹，表單元素的個數(shù)
elements[i/id/name]
獲得表單中的元素:
form.name => form.elements["name"]
方法: submit(); 手動提交表單
事件:
每個表單元素都有兩個方法:
elem.focus(); //讓elem獲得焦點
elem.blur(); //讓elem失去焦點
