javascript - 在单个 JavaScript 函数中可以对 DOM 进行多少次更改是否有限制？

Question

我正在编写一个 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' ;
}

非常感谢任何帮助!

Answer 1

第一行不起作用，它会阻止整个脚本运行。 document.getElementsByClassName("prof").style.display = '' ; 试试 document.getElementsById("prof").style.display = 'none' ;

您的 html 丢失了。我想知道您为什么要以这种方式隐藏 CSS 类。