获取浏览器当前页面可见元素

function isElementVisible(element) {
	const style = window.getComputedStyle(element);

	// 元素本身的可见性判断
	const isDisplayVisible = style.display !== "none";
	const isVisibilityVisible = style.visibility !== "hidden";
	const isOpacityVisible = style.opacity !== "0";

	// 检查元素是否在视口内
	const rect = element.getBoundingClientRect();
	const isInViewport =
		rect.top >= 0 &&
		rect.left >= 0 &&
		rect.bottom <= (window.innerHeight || document.documentElement.clientHeight) &&
		rect.right <= (window.innerWidth || document.documentElement.clientWidth);

	return isDisplayVisible && isVisibilityVisible && isOpacityVisible && isInViewport;
}

// 检查父元素的可见性
function isParentVisible(element) {
	let parent = element.parentElement;

	// 递归检查父元素是否可见
	while (parent) {
		const style = window.getComputedStyle(parent);

		// 如果父元素的 display、visibility 或 opacity 使其不可见，返回 false
		if (style.display === "none" || style.visibility === "hidden" || style.opacity === "0") {
			return false;
		}

		parent = parent.parentElement;
	}

	return true;
}

// 获取所有页面上可见的元素，忽略父元素不可见的子元素
function getVisibleElements() {
	const elements = document.querySelectorAll("*"); // 获取所有元素
	const visibleElements = [];

	elements.forEach((element) => {
		// 如果父元素可见且元素本身可见，则加入可见元素列表
		if (isParentVisible(element) && isElementVisible(element)) {
			visibleElements.push(element);
		}
	});

	return visibleElements;
}

// 获取所有可见的元素
const visibleElements = getVisibleElements();
console.log(visibleElements);