JavaScriptDOM的節點操作筆記
阿新 • • 發佈:2018-06-24
att ren element true body () inner 繼續 獲取 這兩天再學佟剛的JavaScriptDOM節點操作,先把其筆記記錄於此,加深自己對該知識的印象,也便於後期的查看。
1.節點及其類型:
1)元素節點
2)屬性節點:元素的屬性,可以直接通過屬性的方式來操作
3)文本節點:是元素節點的子節點,其內容是文本
2.一般地,不能在body節點之前來直接獲取body內的節點,因為此時html文檔樹沒有完全加載,所以獲取不到指定的節點,需要使用window.onload事件來操作
獲取節點****
1.獲取元素節點: document.getElementById :根據id屬性來獲取對應的單個節點 document.getElementsByTagName:根據標簽名獲取指定的節點名字的數組,length是其數組的長度 document.getElementsByName:根據節點的name屬性來獲取符合條件的節點數組 (ie不支持) 2.獲取屬性節點: 可以直接通過cityCode.id這樣的方式來獲取和設置屬性節點的值;通過元素節點的getAttributeNode方法來獲取屬性節點,然後通過nodeValue來讀寫屬性值 3.獲取元素節點的子節點(**只有元素節點存在子節點): .firstChild 屬性獲取第一個子節點 .lastChild 屬性獲取最後一個子節點 4.獲取文本節點: 先獲取元素節點的子節點,如果元素節點的子節點只有一個子節點,可以先獲取到指定的元素節點,然後利用.firstChild.nodeValue的方法來讀寫其文本節點的值 5.節點的屬性: nodeName :代表當前節點的名字,只讀屬性 **如果給定的節點是文本節點,那麽,nodeName屬性將返回內容為#text的字符串 nodeType:給定節點的類型 1--元素節點 ;2--屬性節點 ;3--文本節點 nodeValue:返回給定節點的當前值(字符串) 1--元素節點返回null ;2--屬性節點返回這個屬性的值 ;3 --文本節點返回這個文本節點的內容 6.創建元素節點: createElement():按照指定的標簽名來創建一個新的元素節點,方法只有一個參數:就是被創建的元素節點的名字,是一個字符串;方法的返回值是一個指向新建節點的引用指針,返回值是一個元素節點,所以其nodeType=1 7.創建一個文本節點: createTextNode()創建一個包含著指定文本的新文本節點,這個方法的返回值是一個指向新建文本節點的引用指針(當前被創建的文本節點),他是一個文本節點,所以其nodeType=3,方法只有一個參數,就是當前被創建的文本節點中所包含的文本字符串。 8.為元素節點添加一個子節點:appendChild(),就是當前該元素節點的最後一個子節點,返回返回值是一個指向新增子節點的引用指針
9.節點的替換:
replaceChild():把一個給定的父元素中一個子節點替換為另一個子節點,返回值是新替換後的那個子節點的引用指針;除了替換還有移動功能,
****互換功能:(自定義方法)
/**
- 互換 aNode 和 bNode
- @param {Object} aNode
-
@param {Object} bNode
*/
function replaceEach(aNode, bNode){if(aNode == bNode){ return; } var aParentNode = aNode.parentNode; //若 aNode 有父節點 if(aParentNode){ var bParentNode = bNode.parentNode; //若 bNode 有父節點 if(bParentNode){ var tempNode = aNode.cloneNode(true); bParentNode.replaceChild(tempNode, bNode); aParentNode.replaceChild(bNode, aNode); } } }
10.插入節點:
insertBefore():把一個給定節點插入到一個給定元素節點的給定子節點的前面 /** 自定義insertAfter()方法 **/ /** * 將 newChild 插入到 refChild 的後邊 * @param {Object} newChild * @param {Object} refChild */ function insertAfter(newChild, refChild){ var refParentNode = refChild.parentNode; //判斷 refChild 是否存在父節點 if(refParentNode){ //判斷 refChild 節點是否為其父節點的最後一個子節點 if(refChild == refParentNode.lastChild){ refParentNode.appendChild(newChild); }else{ refParentNode.insertBefore(newChild, refChild.nextSibling); } } }
11.刪除節點:
removeChild() :從一個給定的元素中刪除一個子節點
其返回值是一個指向已經被刪除的子節點的引用指針;如果某個節點被刪除後,其下面的所有子節點將全部同時被刪除
12.innerHTML屬性:表示元素的html的內容
-----------後續會繼續補充-----
有錯誤的地方希望各位大神斧正!!!!謝謝各位。
JavaScriptDOM的節點操作筆記