JS实现隐藏同级元素后只显示JS文件内容的方法

本文介绍了一种使用JavaScript隐藏同级元素并仅显示JS文件内容的方法。此方法特别适用于处理含有多个元素且与JS文件同级的HTML页面。接下来，让我们详细了解如何实现这一过程。

一、HTML结构简述

在提供的demo.html文件中，页面加载时会短暂显示所有同级元素，随后通过JS代码隐藏它们，并展示JS文件内容。HTML结构如下：

```html

```

二、JS实现过程

在demo.js文件中，代码首先创建了一个带有特定ID的div元素，该元素包含将要显示的内容。当页面加载完成后，JS将遍历该div的所有子元素，并将除了刚刚创建的div以外的所有元素隐藏。代码如下：

```javascript

document.writeln("

window.onload = function() { // 页面加载完成后执行以下操作

var contSonOnly = document.getElementById("contSonOnly"); // 获取需要显示的元素

var contParent = contSonOnly.parentNode; // 获取该元素的父级节点（包含所有同级元素的容器）

var contSonList = contParent.children; // 获取父级节点的所有子元素列表

for(var i = 0; i < contSonList.length; i++){ // 遍历所有子元素

if(contSonList[i] != contSonOnly){ // 如果是非目标元素则隐藏它

contSonList[i].style.display = "none";

}

}

};

```

这样，当页面加载完成后，除了demo.js文件中指定的div内容外，其他所有同级元素都会被隐藏。通过这种方式，可以实现仅展示JS文件内容的功能。

三、附加信息及相关资源推荐

对于对JavaScript感兴趣的读者，我们推荐查看本站的专题文章，包括《JavaScript基础教程》、《JavaScript进阶实战》等。希望本文所述内容能对大家的JavaScript程序设计有所帮助。如有疑问或需要进一步的帮助，请查阅相关资源或与我们联系。

（注：配图略）