DOM獲取節點的兄弟,父節點,子節點

2021-06-26 19:23:23 字數 1310 閱讀 6377

先說一下js的獲取方法,其要比jquery的方法麻煩很多,後面以jquery的方法作對比。

js的方法會比jquery麻煩很多,主要則是因為ff瀏覽器,ff瀏覽器會把你的換行也當最dom元素

原生的js獲取id為test的元素下的子元素。可以用:

var a = docuemnt.getelementbyid("test").getelementsbytagname("div"); 這樣是沒有問題的

此時a.length=2;

但是如果我們換另一種方法

var b =document.getelementbyid("test").childnodes;

此時b.length 在ie瀏覽器中沒問題,其依舊等於2,但是在ff瀏覽器中則會使4,是因為ff把換行也當做乙個元素了。

所以,在此,我們就要做處理了,需遍歷這些元素,把元素型別為空格而且是文字都刪除。

function del_ff(elem){

var elem_child = elem.childnodes;

for(var i=0; i

下面介紹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")

jquery獲取父節點 子節點 兄弟節點

test parent expr 找父親節點,可以傳入expr進行過濾,比如 span parent 或者 span parent class test parents expr 類似於jquery.parents expr 但是是查詢所有祖先元素,不限於父元素 test children expr...

JS獲取父節點 子節點 兄弟節點

1 訪問父節點 parentnode node 型別,返回指定節點的父節點,如果指定節點沒有父節點,則返回 null box hello hello world p div var hello document.getelementbyid hello console.log hello.paren...

jquery 獲取元素 父節點,子節點,兄弟節點

test1 parent 父節點 test1 parents 全部父節點 test1 parents mui content 返回class為mui content的父節點 test1 children 全部子節點 test1 children test1 返回id為test1的子節點 test1 ...