->DOM的理解:文檔對應dom樹
->有了DOM能做什麼:DOM的操作
html文檔做爲DOM樹模型,DOM樹的節點就是對象。對象會觸發事件來執行一些事件代碼。
C#中的事件是一個委託變量,JavaScript事件就是方法,瀏覽器的底層也會有很多觸發函數的機制。
事件要做什麼就寫什麼。例如:a標籤添加點擊事件
if(a.onclick!=null){
var res=a.onclick();
if(res===true){
break; //默認的正常跳轉就不做了,返回了FALSE表示這個事件默認處理忽略不做
}
}
標準DOM中定義了12中節點類型:
元素節點–1
文本節點–3
屬性節點–2
獲得方式:<node>.nodeType
獲取節點
- 獲取頁面中指定id的節點對象:document.getElementByID("id的字符串“)
- 獲取頁面中所有標籤名符合要求的標籤的節點集合: document.getElementsByTagName(“標籤名”); //可以使用“*”
- 獲取指定父節點下的所有名字符號要求的節點集合: 父節點.getElementsByTagName("標籤名稱”)
- 元素節點的子節點 :
<node>.childNodes
<node>.childNodes[0]
<node>.firstChild
<node>.lastChild
<node>.childNodes[<node>.childNodes.length-1]
修改節點:修改節點的屬性和包含的文本內容
標準修改方法:
<node>.setAttribute("屬性名”,“值”)
<node>.getAttrubute("屬性名”);
DOM-html方法
<node>.屬性名=值
var v=<node>.屬性名
添加節點
創建節點
-->元素節點:var node=document.createElement("標籤名”);
-->文本節點:
var textNode=document.createTextNode(“文本”);
<節點>.innerHTML=“文本”;//這裏可以使用html
<節點>.innerText=“文本”;//非標準
-->屬性節點:<節點>.setAttribute(…,…);
追加節點
-->追加到尾部
父節點.appendChild(子節點);
-->插入到中間(插入到某個元素的前面)
父節點.insertBefore(新元素 ,舊元素);
刪除節點
父節點.removeChild(子節點);
爲節點添加事件對象
<node>.οnclick=function(){};