一个JavaScript函数可以对DOM进行多少更改有限制吗？

我正在编写一个JavaScript函数，使用

onclick=function（）

事件隐藏和显示网页上的各种元素，但我正在尝试隐藏/显示许多元素

我尝试过使用

document.getElementByID（）

和

document.getElementByClassName（）

来完成这两种方法，但两种方法都不起作用。虽然似乎正在触发

onclick=“（）”

事件，但似乎没有受到影响。这可能是因为我试图操纵多个元素吗

代码如下：

function p1() 
{
    document.getElementsByClassName("prof").style.display = '' ; 
    document.getElementsByClassName("service").style.display = 'none' ; 
    document.getElementsByClassName("scholar").style.display = 'none' ; 
    document.getElementsByClassName("brother").style.display = 'none' ; 
}

function s1()
{
    document.getElementById('professionalism_section').style.display = 'none' ; 
    document.getElementById('prof_head').style.display = 'none' ; 
    document.getElementById('prof_pic').style.display = 'none' ;
    document.getElementById('prof_image').style.display = 'none' ; 
    document.getElementById('prof_desc').style.display = 'none' ; 

    document.getElementById('service_section').style.display = 'block' ; 
    document.getElementById('service_head').style.display = 'block' ;
    document.getElementById('service_pic').style.display = 'block' ;
    document.getElementById('service_image').style.display = 'block' ; 
    document.getElementById('service_desc').style.display = 'block' ;

    document.getElementById('scholarship_section').style.display = 'none' ;
    document.getElementById('scholarship_head').style.display = 'none' ;
    document.getElementById('scholarship_pic').style.display = 'none' ;
    document.getElementById('scholarship_image').style.display = 'none' ; 
    document.getElementById('scholarship_desc').style.display = 'none' ;

    document.getElementById('brotherhood_section').style.display = 'none' ;
    document.getElementById('brotherhood_head').style.display = 'none' ;
    document.getElementById('brotherhood_pic').style.display = 'none' ;
    document.getElementById('brotherhood_image').style.display = 'none' ; 
    document.getElementById('brotherhood_service_desc').style.display = 'none' ;
}

---

非常感谢您的帮助

第一行行不通，可能会阻止整个脚本运行<代码>文档.getElementsByCassName（“prof”）.style.display=''尝试类似document.getElementsById（“prof”）.style.display='none'

---

你的html不见了。我想知道你为什么要用这种方式隐藏css类。

你可以设置一个计数器var，并在每次更改DOM时递增它，然后，在执行任何dom更改之前，检查计数器的值是否不高于阈值。

将html粘贴到此处函数p1将不起作用，因为您必须迭代元素集合。对不起，我是web设计新手。。。。迭代元素集合是什么意思？我尝试添加document.getElementByID（“prof”）.style.display='block'；但是我没有成功。你有一个例子来说明你的意思吗？不确定它是否有效，但是使用JQuery你可以设置

var x=0

在进行DOM更改之前，如果（x那么在DOM更改之后，执行

x++没问题！请将此标记为已回答，并在有机会时用解决方案更新您的问题