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

1、訪問父節點

parentnode : node 型別，返回指定節點的父節點,如果指定節點沒有父節點，則返回 null

"box"

>
"hello"
>hello world!
<
/p>
<
/div>
var hello=document.
getelementbyid
("hello");
console.
log(hello.parentnode.nodename)
;//div
<
/script>

childnodes： nodelist 型別，返回指定節點的所有子節點，可以看作是類陣列物件，可以使用 length 屬性來確定子節點的數量

"box"

>
hello world!
<
/p>
today is sunday.
<
/p>
<
/div>
var box=document.
getelementbyid
("box");
console.
log(box.childnodes.length)
;//5
<
/script>

firstchild：node 型別，返回指定節點的第乙個子節點，注意空白文字節點

"box"

>
"hello"
>hello world!
<
/p>
today is sunday.
<
/p>
<
/div>
var box=document.
getelementbyid
("box");
console.
log(box.firstchild.nodename)
;//#text
var firstchild=
getfirstchildnode
(box)
; console.
log(firstchild.nodename)
;//p
//通過判斷nodetype的值是否為1,如果是則為元素節點,否則跳過。
//獲取當前元素節點的第乙個子節點,過濾空白文字節點
function
getfirstchildnode
(box)
else
}<
/script>

lastchild：node 型別，返回指定節點的最後乙個子節點，注意空白文字節點

"box"

>
"hello"
>hello world!
<
/p>
today is sunday.
<
/p>
<
/div>
var box=document.
getelementbyid
("box");
console.
log(box.lastchild.nodename)
;//#text
var lastchild=
getlastchildnode
(box)
; console.
log(lastchild.nodename)
;//p
//獲取當前元素節點的最後乙個子節點,過濾空白文字節點
function
getlastchildnode
(box)
else
}<
/script>

6、訪問前乙個兄弟節點

previoussibling：node 型別，返回指定節點的前乙個節點，如果沒有 previoussibling 節點，則返回值為 null。

7，獲取所有兄弟節點

function

siblings
(elm)
}return a;
}var sibling =
siblings
(div)
;for
(var j =
0; j < sibling.length; j++
)

1、parentelement獲取父元素節點

var box=document.getelementbyid(「box」).parentelement;

parentelement返回指定元素的上級元素節點，如果沒有上級元素返回null。

2、children獲取所有子元素節點

var childs=document.getelementbyid(「box」).children;

返回乙個陣列，children ie6-8支援但返回元素節點和注釋節點，ie9以上版本返回元素節點，其他瀏覽器支援

3、firstelementchild獲取第乙個子元素節點

var first=document.getelementbyid(「box」).firstelementchild;

返回父元素的第乙個子元素節點，如果沒有則返回null。ie9以上版本支援

4、lastelementchild獲取最後乙個子元素節點

var last=document.getelementbyid(「box」).lastelementchild;

返回父元素的最後乙個子元素節點，如果沒有則返回null。ie9以上版本支援

5、nextelementsibling獲取下乙個兄弟元素節點

var next=document.getelementbyid(「box」).nextelementsibling;

返回當前元素緊跟著的元素節點，如果沒有則返回null。ie9以上版本支援

6、previouselementsibling獲取前乙個兄弟節點

var prev=document.getelementbyid(「box」).previouselementsibling;

返回當前元素的前乙個元素節點，如果沒有則返回null。ie9以上版本支援

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

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

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

先說一下js的獲取方法，其要比jquery的方法麻煩很多，後面以jquery的方法作對比。js的方法會比jquery麻煩很多，主要則是因為ff瀏覽器，ff瀏覽器會把你的換行也當最dom元素 原生的js獲取id為test的元素下的子元素。可以用 var a docuemnt.getelementbyi...

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

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