js對節點的操作,新增,刪除,獲得父節點,子節點,兄弟節點
阿新 • • 發佈:2019-01-23
<pre name="code" class="javascript">var chils= s.childNodes; //得到s的全部子節點
var par=s.parentNode; //得到s的父節點
var ns=s.nextSbiling; //獲得s的下一個兄弟節點
var ps=s.previousSbiling; //得到s的上一個兄弟節點
var fc=s.firstChild; //獲得s的第一個子節點
var lc=s.lastChile; //獲得s的最後一個子節點
<pre name="code" class="javascript">JQUERY的父,子,兄弟節點查詢方法 jQuery.parent(expr) 找父親節點,可以傳入expr進行過濾,比如$("span").parent()或者$("span").parent(".class") jQuery.parents(expr),類似於jQuery.parents(expr),但是是查詢所有祖先元素,不限於父元素 jQuery.children(expr).返回所有子節點,這個方法只會返回直接的孩子節點,不會返回所有的子孫節點 jQuery.contents(),返回下面的所有內容,包括節點和文字。這個方法和children()的區別就在於,包括空白文字,也會被作為一個 jQuery物件返回,children()則只會返回節點 jQuery.prev(),返回上一個兄弟節點,不是所有的兄弟節點 jQuery.prevAll(),返回所有之前的兄弟節點 jQuery.next(),返回下一個兄弟節點,不是所有的兄弟節點 jQuery.nextAll(),返回所有之後的兄弟節點 jQuery.siblings(),返回兄弟姐妹節點,不分前後 jQuery.find(expr),跟jQuery.filter(expr)完全不一樣。jQuery.filter()是從初始的jQuery物件集合中篩選出一部分,而jQuery.find() 的返回結果,不會有初始集合中的內容,比如$("p"),find("span"),是從<p>元素開始找<span>,等同於$("p span")
1.訪問節點 document.getElementById(id); 返回對擁有指定id的第一個物件進行訪問 document.getElementsByName(name); 返回帶有指定名稱的節點集合 注意:Elements document.getElementsByTagName(tagname); 返回帶有指定標籤名的物件集合 注意:Elements document.getElementsByClassName(classname); 返回帶有指定class名稱的物件集合 注意:Elements 2.生成節點 document.createElement(eName); 建立一個節點 document.createAttribute(attrName); 對某個節點建立屬性 document.createTextNode(text); 建立文字節點 3.新增節點 document.insertBefore(newNode,referenceChild); 在某個節點前插入節點 parentNode.appendChild(newNode); 給某個節點新增子節點 4.複製節點 cloneNode(true | false); 複製某個節點 引數:是否複製原節點的所有屬性 5.刪除節點 parentNode.removeChild(node) 刪除某個節點的子節點 node是要刪除的節點 注意:IE會忽略節點間生成的空白文字節點(例如,換行符號),而Mozilla不會這樣做。在刪除指定節點的時候不會出錯,但是如果要刪除最後一個子結點或者是第一個子結點的時候,就會出現問題。這時候,就需要用一個函式來判斷首個子結點的節點型別。 元素節點的節點型別是 1,因此如果首個子節點不是一個元素節點,它就會移至下一個節點,然後繼續檢查此節點是否為元素節點。整個過程會一直持續到首個元素子節點被找到為止。通過這個方法,我們就可以在 Internet Explorer 和 Mozilla 得到正確的方法。 6.修改文字節點 appendData(data); 將data加到文字節點後面 deleteData(start,length); 將從start處刪除length個字元 insertData(start,data) 在start處插入字元,start的開始值是0; replaceData(start,length,data) 在start處用data替換length個字元 splitData(offset) 在offset處分割文字節點 substringData(start,length) 從start處提取length個字元 7.屬性操作 getAttribute(name) 通過屬性名稱獲取某個節點屬性的值 setAttribute(name,value); 修改某個節點屬性的值 removeAttribute(name) 刪除某個屬性 8.查詢節點 parentObj.firstChild 如果節點為已知節點的第一個子節點就可以使用這個方法。此方法可以遞迴進行使用 parentObj.firstChild.firstChild..... parentObj.lastChild 獲得一個節點的最後一個節點,與firstChild一樣也可以進行遞迴使用 parentObj.lastChild.lastChild..... parentObj.childNodes 獲得節點的所有子節點,然後通過迴圈和索引找到目標節點 9.獲取相鄰的節點 neborNode.previousSibling :獲取已知節點的相鄰的上一個節點 nerbourNode.nextSlbling: 獲取已知節點的下一個節點 10.獲取父節點 childNode.parentNode:得到已知節點的父節點