js與jquery取得父級元素,子級元素,兄弟元素的實作方法_javascript技巧

先說一下JS的取得方法，其要比JQUERY的方法麻煩很多，後面以JQUERY的方法作對比

JS的方法會比JQUERY麻煩很多，主要則是因為FF瀏覽器，FF瀏覽器會把你的換行也當最DOM元素

原生的JS取得ID為test的元素下的子元素。可用：

例如：

   

   

   

var a = docuemnt.getElementById("dom").getElementsByTagName_r("div"); 這樣是沒有問題的

此時a.length=3;

但是我們現在換個方法取得就是我上章提到的var b = document.getElementByIdx_x("dom").childNodes;如果  這樣alert(b.length)IE瀏覽器上沒問題還是3，但是在FF瀏覽器上會提示是4，這就是因為FF把換行也當作一個元素了。
所以我們必須處理一下才能用JS的那些屬性。處理思想很簡單就是遍歷一下這些元素。把元素類型為空格而且是文字都刪除。處理函數是這樣的

複製程式碼 程式碼如下:

function del_space(elem){

  var elem_child = elem.childNodes;//得到參數元素的所有子元素

  for(var i=0;i         if(elem_child.nodeName == "#text" && !/S/.test(elem_child.nodede) ) {
           elem.removeChild(elem_child)}
          }
節點的節點值是空的。就把他刪除。

nodeNames可以得到一個節點的節點類型，/s/是非空字元在JS裡的正規表示式。前面加！ ,則表示是空白字元

test() 方法用來偵測字串是否符合某個模式.語法是： RegExpObject.test(string)

如果字串 string 中含有與 RegExpObject 相符的文本，則傳回 true，否則傳回 false。

nodeValue表示得到這個節點裡的值。 removeChild則是刪除元素的子元素。

下面就是重點了啊！

複製碼

代碼如下:

         

    

 

<script><BR>   function dom(){      var a = document.getElementByIdx_x_x("dom");<🎜 childNodes;取得a的全部子節點；<P>      var c = a.parentNode;取得a的父親節點；<BR>     previousSbiling;取得a的上一個兄弟節點<BR>      var f = a.firstChild;取得a的第一個子節點<BR>      var g = a.lastChild;取得a的最後一個子節點<BR>}<BR></script>


下面介紹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元素開始找,等同於$("p span")

——————————————2014 1-9————————————————

上面是我從網路所摘的解決js和jquery得到父子元素等的方法，但在解決的時候還是會產生問題：

複製程式碼 程式碼如下:

js取得節點dom操作

接口	nodeType常量	nodeType值	备注
Element	Node.ELEMENT_NODE	1	元素节点
Text	Node.TEXT_NODE	3	文本节点
Document	Node.DOCUMENT_NODE	9	document
Comment	Node.COMMENT_NODE	8	注释的文本
DocumentFragment	Node.DOCUMENT_FRAGMENT_NODE	11	document片断
Attr	Node.ATTRIBUTE_NODE	2	节点属性

介面

方法	描述
createAttribute()	用指定的名字创建新的Attr节点。
createComment()	用指定的字符串创建新的Comment节点。
createElement()	用指定的标记名创建新的Element节点。
createTextNode()	用指定的文本创建新的TextNode节点。
getElementById()	返回文档中具有指定id属性的Element节点。
getElementsByTagName()	返回文档中具有指定标记名的所有Element节点。

属性	描述
attributes	如果该节点是一个Element，则以NamedNodeMap形式返回该元素的属性。
childNodes	以Node[]的形式存放当前节点的子节点。如果没有子节点，则返回空数组。
firstChild	以Node的形式返回当前节点的第一个子节点。如果没有子节点，则为null。
lastChild	以Node的形式返回当前节点的最后一个子节点。如果没有子节点，则为null。
nextSibling	以Node的形式返回当前节点的兄弟下一个节点。如果没有这样的节点，则返回null。下一个兄弟节点
nodeName	节点的名字，Element节点则代表Element的标记名称。
nodeType	代表节点的类型。
parentNode	以Node的形式返回当前节点的父节点。如果没有父节点，则为null。
previousSibling	以Node的形式返回紧挨当前节点、位于它之前的兄弟节点。如果没有这样的节点，则返回null。上一个兄弟节点

nodeType常數 nodeType值 備註 元素 節點.ELEMENT_NODE 1 元素節點 文字 Node.TEXT_NODE 3 文字節點 文件 節點.DOCUMENT_NODE 9 文件 評論 Node.COMMENT_NODE 8 註解的文字 文件片段 Node.DOCUMENT_FRAGMENT_NODE 11 文檔片段 屬性 節點.ATTRIBUTE_NODE 2 節點屬性 方法 描述 createAttribute() 用指定的名字建立新的Attr節點。 createComment() 用指定的字串建立新的註解節點。 createElement() 用指定的標記名建立新的元素節點。 createTextNode() 用指定的文字建立新的TextNode節點。 getElementById() 傳回文件中具有指定id屬性的元素節點。 getElementsByTagName() 傳回文件中具有指定標記名的所有元素節點。 屬性 描述 屬性 如果該節點是一個元素，則以NamedNodeMap的形式傳回該元素的屬性。 子節點 以Node[]的形式存放目前節點的子節點。如果沒有子節點，則傳回空隊列。 第一個孩子 以Node的形式傳回目前節點的第一個子節點。如果沒有子節點，則為null。 最後一個孩子 以Node的形式傳回目前節點的最後一個子節點。如果沒有子節點，則為null。 下一個兄弟姊妹 以Node的形式傳回目前節點的兄弟下一個節點。如果沒有這樣的節點，則傳回null。 下一個兄弟節點 節點名稱 節點的名字，元素節點則代表元素的標記名稱。 節點類型 代表節點的型別。 父節點 以Node的形式傳回目前節點的父節點。如果沒有父節點，則為null。 上一個兄弟姊妹 以Node的形式傳回緊鄰目前節點、位於它之前的兄弟節點。如果沒有這樣的節點，則傳回null。 上一個兄弟節點 TR>