這篇文章主要介紹了JS實(shí)現(xiàn)隱藏同級(jí)元素后只顯示JS文件內(nèi)容的方法,可實(shí)現(xiàn)將與js文件的同級(jí)元素全部隱藏,只顯示js文件內(nèi)容的功能,涉及javascript針對(duì)頁(yè)面元素的遍歷與屬性修改相關(guān)技巧,需要的朋友可以參考下

本文實(shí)例講述了JS實(shí)現(xiàn)隱藏同級(jí)元素后只顯示JS文件內(nèi)容的方法。分享給大家供大家參考，具體如下：

這里的demo.html文件在打開(kāi)后會(huì)短暫顯示與js文件同級(jí)的元素后馬上隱藏這些元素，并顯示同級(jí)的demo.js文件內(nèi)容。具體代碼如下：

demo.html：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<p>頭部信息</p>
<div>
 <p>閱誰(shuí)問(wèn)君誦水落</p>
 <p>閱誰(shuí)問(wèn)君<p>閱誰(shuí)問(wèn)君誦水落</p>
 <p>閱誰(shuí)問(wèn)君誦水落</p><p>閱誰(shuí)問(wèn)君誦水落誦水落</p>
 <p>閱誰(shuí)問(wèn)君<p>閱誰(shuí)問(wèn)君誦水落</p><p>閱誰(shuí)問(wèn)君誦水落</p><p>閱誰(shuí)問(wèn)君誦水落</p><p>誦水落</p>
 <p>閱誰(shuí)問(wèn)君誦水落</p>
 <p>閱誰(shuí)問(wèn)君誦水落<p>閱誰(shuí)問(wèn)君誦水落</p><p>閱誰(shuí)問(wèn)君誦水落</p>
 <script type="text/javascript" src="demo.js"></script>
 <p>閱誰(shuí)問(wèn)君誦水落</p>
 <p>閱誰(shuí)問(wèn)君誦水落</p>
 <p>閱誰(shuí)問(wèn)君誦水落</p>
 <p>閱誰(shuí)問(wèn)君誦水落</p>
 <p>閱誰(shuí)問(wèn)君誦水落<p>閱誰(shuí)問(wèn)君誦水落</p><p>閱誰(shuí)問(wèn)君誦水落</p>
</div>
<p>備案信息</p>
</body>
</html>

demo.js：

document.writeln("<div id=\"contSonOnly\">");
document.writeln("<p>內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容內(nèi)容</p>");
document.writeln("</div>");
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";
  }
 }
}

效果圖如下：