在一个JavaScript函数中可以对DOM进行的更改数量有限制吗

Is there a limit to how many changes to the DOM that can occur in a single JavaScript function?

本文关键字：DOM 有限制 一个 JavaScript 函数      更新时间：2023-09-26

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

非常感谢您的帮助！

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

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

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

相关文章：