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
總結
以上是生活随笔為你收集整理的dom contains 包含关系的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript 相关小的知识点集合
- 下一篇： MarkDownPad2 注册码