Question

我正在寻找像getElementsAtPosition(x,y)这样的方法，但我想要获得给定区域的所有DOM（可能是一个矩形）而不是位置。所以看起来应该像getAllElementsAtArea(x,y,width,height)。我试过的是http://jsfiddle.net/mantrig/3tqqy0gt/

Answer 1

虽然您没有本地方法，但有很多方法可以做到这一点。可以构建一种使用getElementsAtPosition(x,y)搜索区域的算法。或者您可以获取所有元素，看看它们是否属于特定区域。

请参阅this问题。

Answer 2

希望我能正确理解你。

＆＃13;

//this function gives back the top, left, width and height of chosen html element in body
function count_elements(i, index) {


var count = document.body.childNodes;

	var i;
	var w = count[i].clientWidth;
	var h = count[i].clientHeight;
	var y = count[i].offsetTop;
	var x = count[i].offsetLeft;
	
	//this returns width OR height OR top OR left of concrete element [i]
	if (index == 'w') {
		return w;
	} else if (index == 'h') {
		return h;
	} else if (index == 'x') {
		return x;
	} else if (index == 'y') {
		return y;
	}
	
}

//this function is checking whether html element is in the area
function move_area(event) {

	var area = document.getElementById('area');

	//check the mouse X and Y position while mouse move
	var mouse_y = event.clientY;
	var mouse_x = event.clientX;

	//check the area properties
	var area_w = area.clientWidth;
	var area_h = area.clientHeight;
	var area_y = area.offsetTop;
	var area_x = area.offsetLeft;


		//move the area depending on mouse X and Y position
		area.style.top = mouse_y - area_h/2 + "px";
		area.style.left = mouse_x - area_w/2 + "px";
        area.style.visibility = "visible";

	//check html elements in BODY
	var count = document.body.childNodes;

		//i=2 because first element in body is AREA - you shoud avoid this element in LOOP
		for (i=2; i<count.length-1; i++) {

			//check properties of all HTML elements using above function - count_elements
			var box_w = count_elements(i, 'w');
			var box_h = count_elements(i, 'h');
			var box_y = count_elements(i, 'y');
			var box_x = count_elements(i, 'x');


			//avoid HTML elements without width, height, top and left properties - #text in code outside html tags
			if (box_w != undefined && box_h != undefined && box_y != undefined && box_x != undefined) {
				//check if HTML element is INSIDE area
				if (area_y < box_y && area_x < box_x && (area_y+area_h) > (box_y+box_h) && (area_x+area_w) > (box_x+box_w)) {
						//change BORDER of element which is INSIDE area
						count[i].style.border = "dotted 4px #FF55AA";
					} else {
						//release BORDER of element which is OUTSIDE area
						count[i].style.borderStyle = "none";
						}
			}	
		}
}

＆＃13;

body {
	width:100vw;
	height:100vw;
}

#area {
	width: 500px;
	height:300px;
	border: dotted 1px #000000;
	position:fixed;
    visibility:hidden;
}


.div_samp1 {
	width:200px;
	height: 100px;
	position: absolute;
	top:56px;
	left:26px;
	background-color:#CAF0FC;
	color:#33AAFF;"
}

.p_samp1 {
	position: absolute;
	top:156px;
	left:256px;
	background-color:#FCE3FC;
	color:#33AAFF;"
}

.ul_samp1 {
	position: absolute;
	top:256px;
	left:156px;
	background-color:#C9FFF0;
	color:#33AAFF;"
}

＆＃13;

<body onmousemove="move_area(event)">
<div id="area"></div>


<div class="div_samp1">div</div>
<p class="p_samp1">some example of paragraph</p>

<ul class="ul_samp1">
	<li>value 1</li>
	<li>value 2</li>
	<li>value 3</li>
</ul>

</body>

＆＃13;

jQuery / javascript：覆盖getElementsAtPosition（x，y）以获取区域元素而不是特定位置

2 个答案: