近日,因工作需要,需要通过点击某个元素后, 动态创建一个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’;
相关推荐
JavaScript-DOM-交互式和动态JavaScript JavaScript DOM的代码存储库-交互式和动态JavaScript,由Packt发布 JavaScript DOM-交互式和动态JavaScript 这是发布的的代码存储库。 它包含从头到尾完成视频课程所需的...
JavaScript和DOM操作 宾夕法尼亚州数据训练营作业14-交互式网页,显示动态的UFO目击数据表,并具有使用JavaScript和D3.js在HTML表单上构建的过滤功能 背景 分配的目的是创建一个HTML页面,该页面根据提供的UFO数据集...
需要通过点击某个元素后, 动态创建一个DOM元素并显示,因此写了一些相关的js函数,在此记录下
12.8.2 如何使用XML DOM--一个利用XML实现多级关联下拉选择框的例子 12.9 总结 第13章 事件处理 13.1 什么是事件 13.1.1 消息与事件响应 13.1.2 浏览器的事件驱动机制 13.2 基本事件处理 ...
通过DOM,JS可创建动态的HTML,可以使网页显示动态效果并实现与用户的交互功能。JS能够改变页面中所有的HTML元素、属性和CSS样式,并对页面中所有事件做出响应。所以学习JS的起点就是处理网页,处理网页就需要使用...
16.4.html 在JavaScript中使用FileSystemObject操作本地文件的方法。 第18章(\c18) 示例描述:学习XMLHttpRequest对象。 18.1.html 使用Ajax获取HTTP头信息。 18.2.html 使用Ajax获取全部响应头信息...
每次在js代码里面想动态的拼个dom,然后append到页面上,都是各种麻烦, 要是可以直接在jsp页面弄个隐藏的model那是很好的,用js方法里面的clone方法也是很好的,还可以给不同部分set值。 为了以后简单点,我就把...
如果 Vue 实例在实例化时没有收到 el 选项,则它处于“未挂载”状态,没有关联的 DOM 元素。可以使用 vm.$mount() 手动地挂载一个未挂载的实例。 如果没有提供 elementOrSelector 参数,模板将被渲染为文档之外的的...
页面置换算法是虚拟存储管理实现的关键,通过本次实验理解内存页面调度的机制,在模拟实现FIFO、LRU等页面置换算法的基础上,比较它们...● 用jQuery+javascript操作DOM对象 ● 动态显示内存状态、缺页率、页面剩余数
目标提供基本 DOM 操作函数和属性的实现能够在服务器和客户端(即 Web 浏览器)上使用相同的 DOM 操作方法优化快速 DOM 生成和序列化以及低开销非目标提供完整的 DOM 和 HTML 标准的实现模拟 CSS 样式表和其他视觉...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
目录 介绍 使用HTML,CSS和Javascript创建基本的登录页面,这些页面会动态更新导航栏菜单,并在从导航栏单击后滚动到相应项目的部分...使用dom操作动态创建导航栏。 向下滚动页面,使用DOM事件突出显示菜单中的部分。
asset.js-用于动态加载javascript和css文件的实用程序。 collection.js-用于存储和使用一组模型的实用程序。 cookie.js-管理浏览器cookie的实用程序。 core.js-多个组件使用的通用帮助程序功能。 date.js-用于...
4.变量:js中的变量不需要提前指定类型,由赋值时动态决定 所有的变量都用var声明 5.数据类型: |--String(字符串类型) |--Number(数字类型) |--Boolean(布尔类型)0、-0、null、""、false/undefined或NaN,则该...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
10-26 4 jquery对象集合遍历的四种形式及练习题讲解 jquery的dom操作 10-27 1课程回顾 10-27 2 jquery的dom操作 内部插入 外部插入 10-27 3 jquery节点操作 10-27 4 练习题讲解 10-27 5 jquery属性操作 获取子元素和...
6、 JS的应用:在你的网站页面尽量多的应用JS,产生一些动态效果,具体如何应用同学们自己确定,但至少包括:主页和扉页有日期和时间显示;有一个单0面(参考新东方站长网页),表单元素中的用户输入的信息要用JS+...