dom contains 包含關系

<!DOCTYPE html>
<html lang="en">
<head>
?? ?<meta charset="UTF-8">
?? ?<title>contains</title>
</head>
<body>
?? ?<div id="p-node">
?? ??? ?<div id="c-node">子節點內容</div>
?? ?</div>
?? ?<script>
?? ?var pNode=document.getElementById('p-node');
?? ?var cNode=document.getElementById('c-node');
?? ?//判斷元素節點pnode是否包含cnode元素節點
?? ?alert(pNode.contains(cNode));
?? ?//判斷cnode元素節點是否包含文本節點
?? ?alert(cNode.contains(cNode.childNodes[0]));
?? ?//判斷pnode元素節點是否包含文本節點
?? ?alert(pNode.contains(cNode.childNodes[0]));
?? ?//***Ie低版本只支持元素節點包含判斷
?? ?/**
?? ? * 兼容判斷包含關系
?? ? * @param? {[type]} a 上層節點
?? ? * @param? {[type]} b 下層節點
?? ? * @return {[type]}?? [description]
?? ? */
?? ?function fixContaion(a,b){
?? ??? ?try{

?? ??? ??? ?while(b=b.parentNode){
?? ??? ??? ??? ?if(b===a){
?? ??? ??? ??? ?//如果b<a(a為父，b為子)循環向上查找b的父節點直到他們是同層關系(a===b)
?? ??? ??? ??? ??? ?return true;
?? ??? ??? ??? ?}
?? ??? ??? ??? ?//如果b>a(如果b為父,a為子),肯定找不到,返回fales
?? ??? ??? ??? ?return false;
?? ??? ??? ?}
?? ??? ?}catch(e){
?? ??? ??? ?//對于游離于dom樹外的節點,返回false.
?? ??? ??? ?return false;
?? ??? ?}
?? ?}
?? ?alert(fixContaion(cNode,pNode)); //false
?? ?
?? ?</script>
</body>
</html>

轉載于:https://www.cnblogs.com/liu-zhao/p/6824894.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/372227.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/372227.shtml
英文地址，請注明出處：http://en.pswp.cn/news/372227.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！