前言:
html為document搭建了一棵DOM樹,這棵樹就是有一系列Node節點所構成的。他為我們定義了文檔的結構。
Node類型:
Node.ELEMENT_NODE(1); //元素節點較常用
Node.ATTRIBUTE_NODE(2); //屬性節點較常用
Node.TEXT_NODE(3); //文本節點較常用
Node.CDATA_SECTION_NODE(4);
Node.ENTITY_REFERENCE_NODE(5);
Node.ENTITY_NODE(6);
Node.PROCESSING_INSTRUCTION_NODE(7);
Node.COMMENT_NODE(8);
Node.DOCUMENT_NODE(9); //文檔節點較常用
Node.DOCUMENT_TYPE_NODE(10);
Node.DOCUMENT_FRAGMENT_NODE(11);
Node.NOTATION_NODE(12);
相關函數:
1、取得節點:
document.getElementById('element');
document.getElementsByTagName('element'); 返回類數組對象
document.getElementsByName('element'); 返回類數組對象
document.getElementsByClassName('className') 返回類數組對象,IE7及以下並不支持;
document.querySelectorAll('class' | 'element') 返回類數組對象
2、遍歷節點
查找子節點:element.childNodes 返回類數組對象
查找第一個子節點:element.firstChild
查找最後一個子節點:element.lastChild
查找父元素:element.parentNode
查找前一個兄弟元素: element.previousSibling
查找後一個兄弟元素: element.nextSibling
3、獲取節點信息
獲取元素或者屬性節點的標簽名稱:elementNode.nodeName
獲取文本節點的內容: textNode.nodeValue;
獲取並設置元素節點的內容(可能會包含HTML標簽): elementNode.innerHTML
獲取並設置元素節點的純文本內容:element.innerText(IE) | element.textContent(FF)
獲取屬性節點的值: attrNode.getAttribute(AttrName);
設置屬性節點的值: attrNode.setAttribute(AttrName,AttrValue);
獲取節點的類型: node.nodeType;
元素節點: 1;
屬性節點: 2;
文本節點: 3;
文檔節點: 9;
注釋節點: 8;
4、操作節點
創建元素節點: document.createElement('element');
創建文本節點: document.createTextNode('text');
創建屬性節點: document.createAttribute('attribute');
刪除節點: node.remove();
刪除子節點: parentNode.removeChild(childNode);
插入節點: parentNode.appendChild(childNode); //插入到父節點的尾部
parentNode.insertBefore(newNode,existingNode) //插入到已存在節點的前面;
克隆節點: node.cloneNode([true]) //傳入true為深度復制
替換節點: parentNode.replaceChild(newNode,oldNode);
相關拓展:
1、由於IE低版本浏覽器和其他浏覽器在處理DOM中存在不兼容,因此要做一些簡單的封裝處理。
//================= function getElementChildren(element) { var children = [], oldChildNodes = element.childNodes; for(var i=0, len=oldChildNodes.length; i<len; i+=1) { if(oldChildNodes[i].nodeType == 1) { children.push(oldChildNodes[i]); } } return children; } //================== function getElementNext(element) { var next = element.nextSibling || null; if(next) { if(next.nodeType == 1) { return next; } else { return arguments.callee(next); } } else { throw new Error("下一個兄弟元素不存在!"); } } //====================== function getElementPrev(element) { var prev = element.previousSibling || null; if(prev) { if(prev.nodeType == 1) { return prev; } else { return arguments.callee(prev); } } else { throw new Error("上一個兄弟元素不存在!"); } }
2、操作DOM元素的樣式
//========================= function getElementStyle(element,styleName) { if(typeof getComputedStyle != 'undefined') { return getComputedStyle(element,null)[styleName]; } else { return element.currentStyle[styleName]; } } //========================== function addClass(element,className) { element.className += className; } //========================== function removeClass(element,removeClassName) { var classStr = element.className; element.className = classStr.replace(removeClassName,'').split(/\s+/).join(' ').replace(/^\s+/,'').replace(/\s+$/,''); }
以上所述就是本文的全部內容了,希望大家能夠喜歡。