在前端开发中，我们常常会遇到需要判断两个并列的 DOM 元素是否包含在另一个 DOM 元素内的情况。这一操作在许多场景下都非常关键，比如进行页面布局调整、事件委托以及元素的显示与隐藏控制等。接下来，我们就详细探讨一下实现这一判断的方法。

我们可以利用 JavaScript 的 DOM 操作方法来实现。一种常见的思路是获取目标 DOM 元素以及需要判断的两个并列元素的引用。通过调用 DOM 元素的 contains 方法来进行判断。例如，假设有一个父元素 parentElement，以及两个并列的子元素 childElement1 和 childElement2。我们可以使用如下代码：

const parentElement = document.getElementById('parent');
const childElement1 = document.getElementById('child1');
const childElement2 = document.getElementById('child2');

const isChild1InParent = parentElement.contains(childElement1);
const isChild2InParent = parentElement.contains(childElement2);

if (isChild1InParent && isChild2InParent) {
    console.log('两个元素都包含在父元素内');
} else {
    console.log('至少有一个元素不在父元素内');
}

在这段代码中，contains 方法会返回一个布尔值，表明指定的元素是否是当前元素的后代（包括自身）。通过分别判断两个子元素是否被父元素包含，我们就能得出它们是否都在父元素内。

另外，我们还可以通过比较元素的 offsetParent 属性来实现判断。offsetParent 属性返回一个指向最近的（指包含层级上的最近）包含该元素的定位元素或者最近的 table, td, th 或 body 元素。代码示例如下：

const offsetParent1 = childElement1.offsetParent;
const offsetParent2 = childElement2.offsetParent;

if (offsetParent1 === parentElement && offsetParent2 === parentElement) {
    console.log('两个元素都包含在父元素内');
} else {
    console.log('至少有一个元素不在父元素内');
}

这种方法是基于元素的布局关系来判断的。如果两个子元素的最近定位父元素都是目标父元素，那么就说明它们都包含在该父元素内。

掌握判断两个并列 DOM 元素是否包含在另一个 DOM 元素内的方法，能够让我们在前端开发中更加灵活地处理各种交互和布局需求，提升页面的性能和用户体验。无论是使用 contains 方法还是 offsetParent 属性比较，都能为我们解决这类问题提供有效的途径。