ryuone/compareDocumentPosition.html

## compareDocumentPosition.html
<!DOCTYPE html>
<html>
  <head>
    <title>mouseenter/mouseleave</title>
    <script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js'></script>
	<script>
	  $(function(){
	  // withinElementでは無く、deleteを呼び出すようになるため、#dv31/#div32に移動した際にもイベントが発生する。
	  //$('#dv2').bind('mouseenter', {selector: $("#dv31").get(0)}, function(e){console.log('mouseenter dv2')});
	  //$('#dv2').bind('mouseleave', {selector: $("#dv32").get(0)}, function(e){console.log('mouseleave dv2')});

	  // #div31/#div32上ではイベントは発生しない。
	  $('#dv2').bind('mouseenter', function(e){console.log('mouseenter dv2')});
	  $('#dv2').bind('mouseleave', function(e){console.log('mouseleave dv2')});
	  var dv2  = $("#dv2").get(0);
	  var dv31 = $("#dv31").get(0);
	  var dv32 = $("#dv32").get(0);
	  var noAttachDiv = document.createElement("div");

	  // Firefox / Chrome
	  // Node.DOCUMENT_POSITION_CONTAINED_BY            : 16(0x10)
	  // Node.DOCUMENT_POSITION_CONTAINS                :  8(0x08)
	  // Node.DOCUMENT_POSITION_DISCONNECTED            :  1(0x01)
	  // Node.DOCUMENT_POSITION_FOLLOWING               :  4(0x04)
	  // Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC : 32(0x20)
	  // Node.DOCUMENT_POSITION_PRECEDING               :  2(0x02)

	  console.log(dv2.compareDocumentPosition(dv31))         // 20(0x14 : 0x10 + 0x04)  dv2の子孫にdv31を持つ
	  console.log(dv31.compareDocumentPosition(dv2))         // 10(0x0A : 0x08 + 0x02)  dv31の祖先にdv2を持つ
	  console.log(dv31.compareDocumentPosition(dv32))        // 4(0x04 : 0x04)          dv31はdv32の兄
	  console.log(dv32.compareDocumentPosition(dv31))        // 2(0x2  : 0x02)          dv32はdv31の弟
	  console.log(dv32.compareDocumentPosition(dv32))        // 0(0x00)                 同じノード
	  console.log(document.body.compareDocumentPosition(noAttachDiv))
                                                             // 37(0x25 : 0x20 + 0x04 + 0x01) 同じツリー上に存在しない
	                                                         // 1bit目が立っているのでDISCONNECTを判断することが可能
	  console.log(noAttachDiv.compareDocumentPosition(document.body))
                                                             // 35(0x23 : 0x20 + 0x02 + 0x01) 同じツリー上に存在しない
	                                                         // 1bit目が立っているのでDISCONNECTを判断することが可能
	  console.log($.contains($("#dv2").get(0), $("#dv31").get(0)))   // true
	  console.log($.contains($("#dv2").get(0), $("#dv32").get(0)))   // true
	  console.log($.contains($("#dv31").get(0), $("#dv2").get(0)))   // false
	  console.log($.contains($("#dv31").get(0), $("#dv32").get(0)))  // false
	  // Sizzle.jsのcontainsで行っている内容
	  console.log(!!($("#dv2").get(0).compareDocumentPosition($("#dv31").get(0)) & Node.DOCUMENT_POSITION_CONTAINED_BY))
	  });
    </script>
  </head>
  <body>
	<div id="dv1" style='border:1px solid #0ff; background-color:#0ff; padding:10px;'>
	  <label>AAA</label>
	  <div id="dv2" style='border:1px solid #ff0; background-color:#ff0; padding:10px;'>
		<label>BBB</label>
		<div id="dv31" style='border:1px solid #f0f; background-color:#f0f; padding:10px;'>
		  <label>CCC-1</label>
		</div>
		<div id="dv32" style='border:1px solid #f0f; background-color:#f8f; padding:10px;'>
		  <label>CCC-2</label>
		</div>
	  </div>
	</div>
  </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>mouseenter/mouseleave</title>
	<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.js'></script>
	<script>
	$(function(){
	// withinElementでは無く、deleteを呼び出すようになるため、#dv31/#div32に移動した際にもイベントが発生する。
	//$('#dv2').bind('mouseenter', {selector: $("#dv31").get(0)}, function(e){console.log('mouseenter dv2')});
	//$('#dv2').bind('mouseleave', {selector: $("#dv32").get(0)}, function(e){console.log('mouseleave dv2')});

	// #div31/#div32上ではイベントは発生しない。
	$('#dv2').bind('mouseenter', function(e){console.log('mouseenter dv2')});
	$('#dv2').bind('mouseleave', function(e){console.log('mouseleave dv2')});
	var dv2 = $("#dv2").get(0);
	var dv31 = $("#dv31").get(0);
	var dv32 = $("#dv32").get(0);
	var noAttachDiv = document.createElement("div");

	// Firefox / Chrome
	// Node.DOCUMENT_POSITION_CONTAINED_BY : 16(0x10)
	// Node.DOCUMENT_POSITION_CONTAINS : 8(0x08)
	// Node.DOCUMENT_POSITION_DISCONNECTED : 1(0x01)
	// Node.DOCUMENT_POSITION_FOLLOWING : 4(0x04)
	// Node.DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC : 32(0x20)
	// Node.DOCUMENT_POSITION_PRECEDING : 2(0x02)

	console.log(dv2.compareDocumentPosition(dv31)) // 20(0x14 : 0x10 + 0x04) dv2の子孫にdv31を持つ
	console.log(dv31.compareDocumentPosition(dv2)) // 10(0x0A : 0x08 + 0x02) dv31の祖先にdv2を持つ
	console.log(dv31.compareDocumentPosition(dv32)) // 4(0x04 : 0x04) dv31はdv32の兄
	console.log(dv32.compareDocumentPosition(dv31)) // 2(0x2 : 0x02) dv32はdv31の弟
	console.log(dv32.compareDocumentPosition(dv32)) // 0(0x00) 同じノード
	console.log(document.body.compareDocumentPosition(noAttachDiv))
	// 37(0x25 : 0x20 + 0x04 + 0x01) 同じツリー上に存在しない
	// 1bit目が立っているのでDISCONNECTを判断することが可能
	console.log(noAttachDiv.compareDocumentPosition(document.body))
	// 35(0x23 : 0x20 + 0x02 + 0x01) 同じツリー上に存在しない
	// 1bit目が立っているのでDISCONNECTを判断することが可能
	console.log($.contains($("#dv2").get(0), $("#dv31").get(0))) // true
	console.log($.contains($("#dv2").get(0), $("#dv32").get(0))) // true
	console.log($.contains($("#dv31").get(0), $("#dv2").get(0))) // false
	console.log($.contains($("#dv31").get(0), $("#dv32").get(0))) // false
	// Sizzle.jsのcontainsで行っている内容
	console.log(!!($("#dv2").get(0).compareDocumentPosition($("#dv31").get(0)) & Node.DOCUMENT_POSITION_CONTAINED_BY))
	});
	</script>
	</head>
	<body>
	<div id="dv1" style='border:1px solid #0ff; background-color:#0ff; padding:10px;'>
	<label>AAA</label>
	<div id="dv2" style='border:1px solid #ff0; background-color:#ff0; padding:10px;'>
	<label>BBB</label>
	<div id="dv31" style='border:1px solid #f0f; background-color:#f0f; padding:10px;'>
	<label>CCC-1</label>
	</div>
	<div id="dv32" style='border:1px solid #f0f; background-color:#f8f; padding:10px;'>
	<label>CCC-2</label>
	</div>
	</div>
	</div>
	</body>
	</html>