1. DOM Document Object Model(文本對象模型)
2. 節點及其類型
element node、attribute node、text node;
text node是element node的子節點;
3. JS寫在什麼地方
1).HTML代碼和JS代碼耦合在一起
缺點:不利於代碼維護
<button οnclick="alert('hello..')">ClickMe</button>
2).放在html文檔的最後
缺點:不符合JS代碼的習慣
3).放在title標籤後
缺點:爲加載完文檔就已經執行
應對方案:使用window.onload = funtion(){代碼塊}
4.獲取節點
對象.getElementsByTagName();
對象.getElementById();
對象.getElementsByName();
返回對應對象下的元素
5.若HTML元素自身沒有定義name屬性,使用getElementsByName()對IE無效。
6.讀寫屬性
獲得元素節點,通過節點.屬性直接獲取屬性,
通過節點.屬性=屬性值;實現屬性的賦值。
var nameNode = document.getElementById("name");
alert(nameNode.value);
nameNode.value="你好";
7.獲取元素節點的所有子節點
1).獲取元素節點。
2).利用元素節點的childNodes方法獲取子節點
var cityNode = document.getElementById("city");
alert(cityNode.childNodes.length);//不同瀏覽器結果可能不同
8.獲取元素節點的指定子節點
元素.getElementsByTagName();
9.獲取第一個和最後一個子節點
元素.firstChild;獲取第一個子節點
元素.lastChild;獲取最後一個子節點
10.獲取文本節點
1).獲取文本元素所在節點
2).通過firstChild獲取文本節點 //因爲文本節點是唯一的
3).獲取文本節點的nodeValue屬性來獲取文本節點的值
var bjNode = document.getElementById("bj");
var bjTextNode = bjNode.firstChild;
var bjValue = bjTextNode.nodeValue;
4).可以更改文本信息
bjTextNode.nodeValue="hello";
11.添加事件時,方法中若還用到當前節點,使用this,不使用節點的引用。
12. /g表示全局標誌
13.字符串.replace(reg, str); 將字符串中符合reg的替換成str
14.正則表達式.test(var str);返回boolean 表示是否符合表達式
15.節點的屬性
nodeName只讀
nodeType只讀
nodeValue可讀可寫
16.創建元素節點
var liNode = docuemnt.createElement("節點名");
創建文本節點
var xmText = document.createTextNode("文本值");
添加元素節點
節點.appendChild(節點名);//添加到節點的最後一個
17.查看radio類型是否被選中使用checked屬性
type[1].checked;若被選中,返回true,否則返回false
18.button的監聽事件時,若最後返回false,則不會提交。
19.替換節點
a.找到所要替換的節點i,j
b.找到被替換節點的父節點i.partenNode
c.使用replaceChild(新節點,舊節點);
20.刪除節點,同時刪除子節點
父節點.removeChild();
21.comfirm()彈出確認對話框,返回一個boolean類型。
22.插入節點insertBefore(新節點,位置節點);
父節點.insertBefore();
23.innerHtml屬性 表示節點內的所有內容
24.使用for(){}時,若刪除節點nodes[i],每次刪除完之後會刷新,可能出現數組越界,應使用node[0];每次刪除第一個元素,直到刪除完。
25.克隆節點
cloneNode(true);表示克隆的同時也包含其子節點
cloneNode();克隆節點,不包含子節點
2. 節點及其類型
element node、attribute node、text node;
text node是element node的子節點;
3. JS寫在什麼地方
1).HTML代碼和JS代碼耦合在一起
缺點:不利於代碼維護
<button οnclick="alert('hello..')">ClickMe</button>
2).放在html文檔的最後
缺點:不符合JS代碼的習慣
3).放在title標籤後
缺點:爲加載完文檔就已經執行
應對方案:使用window.onload = funtion(){代碼塊}
4.獲取節點
對象.getElementsByTagName();
對象.getElementById();
對象.getElementsByName();
返回對應對象下的元素
5.若HTML元素自身沒有定義name屬性,使用getElementsByName()對IE無效。
6.讀寫屬性
獲得元素節點,通過節點.屬性直接獲取屬性,
通過節點.屬性=屬性值;實現屬性的賦值。
var nameNode = document.getElementById("name");
alert(nameNode.value);
nameNode.value="你好";
7.獲取元素節點的所有子節點
1).獲取元素節點。
2).利用元素節點的childNodes方法獲取子節點
var cityNode = document.getElementById("city");
alert(cityNode.childNodes.length);//不同瀏覽器結果可能不同
8.獲取元素節點的指定子節點
元素.getElementsByTagName();
9.獲取第一個和最後一個子節點
元素.firstChild;獲取第一個子節點
元素.lastChild;獲取最後一個子節點
10.獲取文本節點
1).獲取文本元素所在節點
2).通過firstChild獲取文本節點 //因爲文本節點是唯一的
3).獲取文本節點的nodeValue屬性來獲取文本節點的值
var bjNode = document.getElementById("bj");
var bjTextNode = bjNode.firstChild;
var bjValue = bjTextNode.nodeValue;
4).可以更改文本信息
bjTextNode.nodeValue="hello";
11.添加事件時,方法中若還用到當前節點,使用this,不使用節點的引用。
12. /g表示全局標誌
13.字符串.replace(reg, str); 將字符串中符合reg的替換成str
14.正則表達式.test(var str);返回boolean 表示是否符合表達式
15.節點的屬性
nodeName只讀
nodeType只讀
nodeValue可讀可寫
16.創建元素節點
var liNode = docuemnt.createElement("節點名");
創建文本節點
var xmText = document.createTextNode("文本值");
添加元素節點
節點.appendChild(節點名);//添加到節點的最後一個
17.查看radio類型是否被選中使用checked屬性
type[1].checked;若被選中,返回true,否則返回false
18.button的監聽事件時,若最後返回false,則不會提交。
19.替換節點
a.找到所要替換的節點i,j
b.找到被替換節點的父節點i.partenNode
c.使用replaceChild(新節點,舊節點);
20.刪除節點,同時刪除子節點
父節點.removeChild();
21.comfirm()彈出確認對話框,返回一個boolean類型。
22.插入節點insertBefore(新節點,位置節點);
父節點.insertBefore();
23.innerHtml屬性 表示節點內的所有內容
24.使用for(){}時,若刪除節點nodes[i],每次刪除完之後會刷新,可能出現數組越界,應使用node[0];每次刪除第一個元素,直到刪除完。
25.克隆節點
cloneNode(true);表示克隆的同時也包含其子節點
cloneNode();克隆節點,不包含子節點