一些常用的函数封装

最新推荐文章于 2021-07-24 21:51:49 发布

swanhung

最新推荐文章于 2021-07-24 21:51:49 发布

阅读量383

点赞数

文章标签： function

本文链接：https://blog.youkuaiyun.com/swanhung/article/details/7658602

版权

本文详细介绍了JavaScript如何通过addLoadEvent、insertAfter、addClass、removeClass等函数实现页面元素的动态加载与样式修改，并通过getElementsByClassName函数进行元素查找。重点突出DOM操作在网页交互与动态效果实现中的应用。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

//addLoadEvent函数页面加载完毕时执行函数,代码清单如下
function addLoadEvent(func)
{
var oldοnlοad=window.onload;
if(typeof window.onload !='function')
{
window.οnlοad=func;
}
else
{
window.οnlοad=function()
{
oldonload();
func();
}
}

}

///利用insertBefore()编写一个insertAtfer()函数,
function insertAfter(newElement,targetElement)
{
var parent=targetElement.parentNode;
if(parent.lastChild == targetElement)
{
parent.appendChild(newElement);
}
else
{
parent.insertBefore(newElement,targetElement.nextSibling);//竟然写错了insertBefore这个单词，找了我两天的时间，谨记啊
}
}

//编写addClass()函数
function addClass(element,value)
{
if(!element.className)
{
element.className=value;
}
else
{
newClassName=element.className;
newClassName+="";
newClassName+=value;
element.className=newClassName;
}
}

//编写removeClass()函数
function removeClass(element,className) {
if (!element, className)
{
var reg = new RegExp('(\\s|^)'+className+'(\\s|$)');
element.className = element.className.replace(reg,'');
}
}

//编写getElementsByClassName函数
function getElementsByClassName(n)
{
var classElements=[];//申明一个数组,用来装对象的className;
var allElements=document.getElementsByTagName("*")//获取页面所以对象
for(var i=0;i<allElements.length;i++)
{
if(allElements[i].className == n)
{
classElements[classElements.length]=allElements[i];
}
}
return classElements;
}