在网页开发中，常常会遇到需要搜索并显示area元素href属性里路径名部分的需求。而JavaScript作为前端开发的强大工具，能够轻松实现这一功能。

我们要明确area元素通常用于图像映射（image map）中，它定义了图像上的可点击区域，并通过href属性指定点击该区域后要跳转的链接。而路径名部分是链接中从域名后的第一个斜杠开始到问号或哈希符号之前的部分。

要获取area元素，可以使用JavaScript的DOM操作方法。例如，使用document.querySelectorAll方法可以获取所有的area元素。假设我们的HTML中有如下代码：

<map name="exampleMap">
  <area shape="rect" coords="0,0,100,100" href="/path/to/somewhere">
  <area shape="circle" coords="150,150,50" href="/another/path">
</map>

在JavaScript中，我们可以这样获取所有area元素：

const areas = document.querySelectorAll('area');

接下来，遍历这些area元素，提取每个元素href属性的路径名部分。可以使用URL对象来简化这一操作。URL对象允许我们方便地解析和操作URL。代码如下：

areas.forEach(area => {
  const url = new URL(area.href);
  const pathname = url.pathname;
  console.log(pathname);
  // 如果要显示在页面上，可以创建一个元素来展示
  const pathElement = document.createElement('p');
  pathElement.textContent = pathname;
  document.body.appendChild(pathElement);
});

上述代码中，我们使用forEach方法遍历每个area元素。对于每个元素，通过new URL(area.href)创建一个URL对象，然后通过url.pathname获取路径名部分。这里我们先将路径名打印到控制台，同时也展示了如何将路径名显示在页面上，即创建一个<p>元素并将路径名设置为其文本内容，最后将该元素添加到页面主体中。

通过以上步骤，利用JavaScript的DOM操作和URL对象，我们就能轻松搜索并显示area元素href属性里的路径名部分，为网页功能的实现和优化提供了有力支持。