JavaScript基础入门封装DOM 连缀

最新推荐文章于 2019-09-04 00:28:00 发布

csdn_chenli

最新推荐文章于 2019-09-04 00:28:00 发布

阅读量811

点赞数 1

分类专栏： JavaScript基础

本文链接：https://blog.csdn.net/csdn_chenli/article/details/52788760

版权

JavaScript基础专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个简单的JavaScript封装库，用于简化DOM操作。通过该库，开发者可以轻松获取元素节点、设置CSS样式、添加HTML内容及绑定点击事件，适用于前端开发初学者。

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

JavaScript基础入门封装DOM 连缀适合初学者

获取元素节点

获取ID

获取tagName

获取Name

设置

这个只能是设置CSS样式，添加html方法，添加click方法等。

封装的base.js

//前端调用的对象
var $=function(){
       return new Base();
}

function Base(){//创建一个对象也是构造函数

//创建一个数组，来保存获取的节点（ID）和节点数组（name,tagName等）
this.elements=[];

/*获取元素节点*/

//获取ID节点
this.getId=function(id){
    /*push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。*/
     this.elements.push(document.getElementById(id)) ;
     return this;
};

//获取tagName
this.getTagName=function(tag){
    //tagName是一个集合所有要在遍历
    var tag=document.getElementsByTagName(tag);
    for( var i=0;i<tag.length;i++){
    this.elements.push(tag[i]);
}
eturn this;
};

//获取Name
this.getName=function(nmae){
      //tagName是一个集合所有要在遍历
      var names=document.getElementsByName(nmae);
    for( var i=0;i<names.length;i++){
    this.elements.push(names[i]);
      }
   return this;
};

}

/*添加方法*/

//添上CSS方法
Base.prototype.css=function(attr,value){//两个参数属性和值
   for(var i=0;i<this.elements.length;i++){
   this.elements[i].style[attr]=value;
}
return this
};

//添加innerHTML方法
Base.prototype.html=function(str){
    for(var i=0;i<this.elements.length;i++){
    this.elements[i].innerHTML=str;
}
return this;
};

//添加点击事件
Base.prototype.click=function(fn){
for(var i=0;i<this.elements.length;i++){
this.elements[i].οnclick=fn;
}
return this;
};

调用dom.js

window.οnlοad=function(){

   //alert(base.getTagName('p').elements.length);
   $().getId('box').css('color','red').css('backgroundColor','black').click(function(){
       alert($().getId('box').html='这是改变自后的文本哦');
   });
   $().getTagName('p').css('color','green').html('改变之后的文本咯');
   //alert($().getName('sex').elements.length);
   $().getName('sex').click(function(){
       alert('我是男生');
   });
};

html 代码

<head>
       <meta charset="utf-8" />
       <title>博客前端连缀</title>
       <script src="js/base2.js" type="text/javascript" charset="utf-8"></script>
       <script src="js/dome2.js" type="text/javascript" charset="utf-8"></script>
   </head>
   <body>
       
       <div id="box">
           这是测试获取ID的例子
       </div>
       <input type="radio" name="sex" id="sex" value="男" checked="checked"/>男
       <input type="radio" name="sex" id="sex" value="女" />女
       <p>测试获取标签的例子</p>
       <p>测试获取标签的例子</p>
       <p>测试获取标签的例子</p>
       <p>测试获取标签的例子</p>
   </body>

效果图