`
huoquan
  • 浏览: 27085 次
  • 性别: Icon_minigender_2
  • 来自: 北京
文章分类
社区版块
存档分类

通过JS动态显示html-DOM操作

阅读更多

近日,因工作需要,需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的JS函数,在此记录,以作备忘: 可以500%提高开发效率的前端UI框架!

/**//*
    动态创建DOM元素的相关函数支持
     www.jcodecraeer.com
*/
/**//*
  获取以某个元素的DOM对象
  @obj  该元素的ID字符串
*/
function getElement(obj)
{
  return typeof obj=='string'?document.getElementById(obj):obj;
}
/**//*
  获取某个元素的位置
  @obj 该元素的DOM对象,或该元素的ID
*/
function getObjectPosition(obj)
{
  obj=typeof obj==='string'?getElement(obj):obj;
  if(!obj)
  {
    return;
  }  
  var position='';
  if(obj.getBoundingClientRect) //For IEs
  {
    position=obj.getBoundingClientRect();
    return {x:position.left,y:position.top};
  }
  else if(document.getBoxObjectFor)
  {
    position=document.getBoxObjectFor(obj);
    return {x:position.x,y:position.y};
  }
  else
  {
    position={x:obj.offsetLeft,y:obj.offsetTop};
    var parent=obj.offsetParent;
    while(parent)
    {
       position.x+=obj.offsetLeft;
       position.y+=obj.offsetTop;
       parent=obj.offsetParent;
    }
    return position;
  }
}
/**//*
  为某个DOM对象动态绑定事件
  @oTarget 被绑定事件的DOM对象
  @sEventType 被绑定的事件名,注意,不加on的事件名,如 'click'
  @fnHandler 被绑定的事件处理函数
*/
function addEventHandler(oTarget, sEventType, fnHandler)
{
    if (oTarget.addEventListener) 
    {
        oTarget.addEventListener(sEventType, fnHandler, false);
    } 
    else if (oTarget.attachEvent)  //for IEs
    {
        oTarget.attachEvent("on" + sEventType, fnHandler);
    } 
    else
    {
        oTarget["on" + sEventType] = fnHandler;
    }
  }
/**//*
  从某个DOM对象中去除某个事件
  @oTarget 被绑定事件的DOM对象
  @sEventType 被绑定的事件名,注意,不加on的事件名,如 'click'
  @fnHandler 被绑定的事件处理函数
*/
function removeEventHandler(oTarget,sEventType,fnHandler)
{
    if(oTarget.removeEventListener) 
    {
       oTarget.removeEventListener(sEventType,fnHandler,false)
    }
    else if(oTarget.detachEvent)  //for IEs
    {
       oTarget.detachEvent(sEventType,fnHandler);
    }
    else
    {
       oTarget['on'+sEventType]=undefined;
    }
  }
    
/**//*
  创建动态的DOM对象
  @domParams是被创建对象的属性的JSON表达,它具有如下属性:
  @parentNode 被创建对象所属的父级元素(可为元素ID,也可为DOM对象)
  @domId 被创建对象的ID
  @domTag 被创建对象的tag名称,支持常用的布局元素,如div span等,但不支持input\form等特别的元素  
  @content 被创建的对象内容 
  @otherAttributes 为被创建的对象添加除函数必需的属性外其它属性,如[{attrName:'style.color',attrValue:'red'}]
  @eventRegisters 为被创建的对象添加事件,类似[{eventType:'click',eventHandler:adsfasdf}]的数组
  -经过组合后,该参数具有如下形式:
  {parentNode:document.body,domTag:'div',content:'这是测试的',otherAttributes:[{attrName:'style.color',attrValue:'red'}],eventRegisters:[{eventType:'click',eventHandler:fnHandler}]}
*/
function dynCreateDomObject(domParams)
{ 
   if(getElement(domParams.domId))
   {
     childNodeAction('remove',domParams.parentNode,domParams.domId);
   }
           
   var dynObj=document.createElement(domParams.domTag);
    
   with(dynObj)
   {    
   //id也可以通过otherAttributes传入,但是出于ID的特殊性,此处仍然采用
   //JSON对象传入,并以DOM ID属性附件
     id=domParams.domId;
     innerHTML=domParams.content; //innerHTML是DOM属性,而id等是元素属性,注意区别
   }
   /**//*添加属性*/
   if(null!=domParams.otherAttributes)
   {
      for(var i=0;i<domParams.otherAttributes.length;i++)
      {       
        var otherAttribute =domParams.otherAttributes[i];
        dynObj.setAttribute(otherAttribute.attrName,otherAttribute.attrValue);
      }
   }
   /**//*end 添加属性*/
   /**//*添加相关事件*/
   if(null!=domParams.eventRegisters)
   {
      for(var i=0;i<domParams.eventRegisters.length;i++)
      {
        var eventRegister =domParams.eventRegisters[i];        
        addEventHandler(dynObj,eventRegister.eventType,eventRegister.eventHandler);
      }
   }
   /**//*end 添加相关事件*/ 
   try
   {     
       childNodeAction('append',domParams.parentNode,dynObj);
   }
   catch($e)
   {
        
   } 
          
   return dynObj;
}
/**//*
  从父结点中删除子结点
  @actionType 默认为append,输入字符串 append | remove
  @parentNode 父结点的DOM对象,或者父结点的ID
  @childNode 被删除子结点的DOM对象 或者被删除子结点的ID
*/
function childNodeAction(actionType,parentNode,childNode)
{
  if(!parentNode)
  {return; }
       
     
  parentNode=typeof parentNode==='string'?getElement(parentNode):parentNode;
  childNode=typeof childNode==='string'?getElement(childNode):childNode;
  if(!parentNode || !childNode)
  {return;}
      
  var action=actionType.toLowerCase();
  if( null==actionType || action.length<=0 || action=='append')
  {
    action='parentNode.appendChild';
  }
  else
  {
    action='parentNode.removeChild';
  }
     
  try
  {
    eval(action)(childNode);
  }
  catch($e)
  {
    alert($e.message);    
  }
}

 

 

使用示例: 可以500%提高开发效率的前端UI框架!

  var  htmlAttributes= 
    [
   
    {attrName:'class',attrValue:’样式名称’} //for IEs
   
    ,
   
    {attrName:'className',attrValue: ’样式名称’} //for ff
   
    ]   
   
    var  domParams={domTag:'div',  content:’动态div的innerHTML’,  otherAttributes:htmlAttributes};
   
    var  newHtmlDom=dynCreateDomObject(domParams);
   
    //通过setAttribute('style','position:absolute.....................')
   
    //的形式来指定style没有效果,只能通过如下形式,jiong
   
    newHtmlDom.style.zIndex='8888';
   
    newHtmlDom.style.position='absolute';
   
    newHtmlDom.style.left=’100px’;
   
    newHtmlDom.style.top=’200px’;

 

 

 

 

 

0
0
分享到:
评论

相关推荐

    JS原生系列-DOM篇.pdf

    通过DOM,JavaScript可以访问和更改HTML文档的内容、结构以及样式。本文将深入探讨JavaScript中DOM的操作。 首先,了解DOM的基础结构非常关键。文档中的每个元素、文本节点甚至属性都可以被视为节点。文档本身可以...

    js表格操作,DOM实现数据动态增删查改

    在本主题"js表格操作,DOM实现数据动态增删查改"中,我们将深入探讨如何使用原生JavaScript通过DOM操作来实现数据在表格中的动态管理。 1. **创建表格**:首先,我们需要在HTML中创建一个基础的表格结构。这通常...

    xml--DOM技术

    在实际应用中,DOM技术常用于动态网页和Web应用程序,例如AJAX(Asynchronous JavaScript and XML)中,XML数据被请求并解析成DOM树,然后用JavaScript更新页面内容。此外,XMLHttpRequest对象也经常与DOM结合,用于...

    javascript_DOM操作

    JavaScript DOM(Document Object Model)是Web开发中的一个关键概念,它允许我们通过JavaScript与HTML或XML文档进行交互。DOM是一个树形结构,将网页内容表示为节点和对象,每个元素、属性、文本甚至注释都是一个...

    第三章:javascript-DOM对象模型-补充课件.ppt

    JavaScript DOM对象模型是Web开发中不可或缺的一部分,它允许开发者通过编程方式操纵网页的结构、内容和样式。在JavaScript中,DOM被用作一种接口,使我们能够读取、修改、添加或删除HTML、XML文档的各个部分。DOM将...

    07-DOM高级应用.pptx

    JavaScript DOM(Document Object Model)是Web开发中的一个关键概念,它允许我们通过编程方式操作HTML和XML文档。在“07-DOM高级应用.pptx”这个教程中,主要涵盖了DOM操作、表格应用以及表单应用等多个方面,下面...

    JavaScript-DOM---Interactive-and-Dynamic-[removed]JavaScript DOM的代码存储库-交互式和动态JavaScript,由Packt发布

    JavaScript-DOM-交互式和动态JavaScript JavaScript DOM的代码存储库-交互式和动态JavaScript,由Packt发布 JavaScript DOM-交互式和动态JavaScript 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的...

    Web APIs-Dom获取&属性操作(理论+实战篇)-获取随机图片案例资料

    在Web开发中,DOM(Document Object Model)是一个关键的概念,它是HTML或XML文档的结构化表示,允许我们通过JavaScript或其他编程语言与网页内容进行交互。本资料主要关注DOM的获取和属性操作,以及如何通过这些...

    根据DOM将html转为canvas图片格式

    HTML5引入的Canvas元素提供了一个二维图形绘制接口,通过JavaScript可以进行动态渲染和图形操作。我们可以将HTML元素逐个复制到Canvas上,形成一个图像副本。 3. HTML2Canvas库: 实现HTML到Canvas转换的一个常见...

    05-DOM基础.pptx

    总的来说,DOM基础是JavaScript中进行动态网页开发的关键技能,通过熟练掌握DOM节点的操作和元素属性的控制,开发者可以实现丰富的交互效果和动态内容更新,提升用户体验。对于想要深入学习JavaScript和Web开发的人...

    domtoimage使用HTML5canvas从DOM节点生成图像

    4. **图片处理**:在JavaScript开发中,处理图片可能涉及读取、修改、显示、上传等操作。domtoimage将DOM转换为图片的过程就是一种图片处理方式。 5. **JavaScript事件处理**:在生成图像后,可能会结合JavaScript...

    JS-3-DOM-Ejercicio

    通过这个"JS-3-DOM-Ejercicio"项目,开发者可以深入理解JavaScript与DOM的结合,提升网页动态效果的实现能力,并进一步熟悉现代JavaScript开发实践。实际操作这些练习,将有助于巩固理论知识并提升实际编程技能。

    calculatrice-with-dom-html-js:用dom html js计算

    标题中的"calculatrice-with-dom-html-js"是一个项目名称,它表明我们要探讨的是一个使用DOM(文档对象模型)、HTML(超文本标记语言)和JavaScript来构建的计算器应用。这个项目主要展示了如何利用前端技术进行交互...

    javaScript 生成DOM 对象(html标签).rar

    JavaScript是Web开发中不可或缺的一部分,尤其在操作网页的动态效果和交互方面,它与HTML文档对象模型(DOM)紧密相连。DOM是HTML和XML文档的一种结构化表示,它允许我们通过编程方式访问和修改文档内容。本教程将...

    HTML-API-AUDIO-DOM-y-JS:实践:我们将JS转换为生殖者

    这个项目名为"HTML-API-AUDIO-DOM-y-JS:实践:我们将JS转换为生殖者",暗示我们将利用JavaScript来创建和操控音频元素。以下是关于这些主题的详细讲解。 首先,HTML(超文本标记语言)是网页的基础,用于定义页面...

    js操作dom_js_

    JavaScript(简称JS)是一种广泛用于Web开发的轻量级编程语言,主要负责处理网页的动态...通过熟练掌握DOM操作,开发者可以轻松实现页面的动态效果和用户交互。通过深入理解JQuery,你可以编写出更加简洁、高效的代码。

    HtmlDom.rar_HTML dom_PHP HTMLdom

    HTML DOM(Document Object Model)是HTML和XML文档的树型结构表示,它为网页提供了一种标准的编程接口,使得开发者可以通过JavaScript或PHP等语言来操作网页中的元素,实现动态更新、添加、删除以及修改页面内容。...

    Practice-a-JavaScript-DOM-Exercise-to-Build-a-Bird-Flying-Game:Packt发行的用于实践JavaScript DOM练习以构建飞鸟游戏的代码存储库

    在本项目"Practice-a-JavaScript-DOM-Exercise-to-Build-a-Bird-Flying-Game"中,我们主要关注的是使用JavaScript与DOM(Document Object Model)进行交互,以创建一个有趣的飞鸟游戏。这个项目由Packt出版商提供,...

Global site tag (gtag.js) - Google Analytics