【JavaScript總結】JavaScript語法基礎:DOM

->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
獲取節點

  1. 獲取頁面中指定id的節點對象:document.getElementByID("id的字符串“)
  2. 獲取頁面中所有標籤名符合要求的標籤的節點集合: document.getElementsByTagName(“標籤名”); //可以使用“*”
  3. 獲取指定父節點下的所有名字符號要求的節點集合: 父節點.getElementsByTagName("標籤名稱”)
  4. 元素節點的子節點 :
      <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(){};

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章