commonJS — DOM操作（for DOM）
2024-06-05 16:29:57
for DOM
github: https://github.com/laixiangran/commonJS/blob/master/src/forDOM.js
代码
/*** Created by laixiangran on 2016/1/24* homepage：http://www.cnblogs.com/laixiangran/* for DOM*/(function(undefined) {var com = window.COM = window.COM || {};com.$D = {// 根据id查找byId: function(id, context) {var ctx = context || document;return ctx.getElementById(id);},// 根据类名查找byClassName: function(className, context) {var ctx = context || document;return ctx.getElementsByClassName(className);},// 根据标签名查找byTagName: function(tagName, context) {var ctx = context || document;return ctx.getElementsByTagName(tagName);},// 在文档中添加样式addSheet: function() {var doc, cssCode;if (arguments.length == 1) {doc = document;cssCode = arguments[0];}else if (arguments.length == 2) {doc = arguments[0];cssCode = arguments[1];}else {alert("addSheet函数最多接受两个参数!");}var headElement = doc.getElementsByTagName("head")[0];var styleElements = headElement.getElementsByTagName("style");if(styleElements.length == 0){ // 如果不存在style元素则创建if (! "\v1") { // iedoc.createStyleSheet();}else {var tempStyleElement = doc.createElement("style"); //w3ctempStyleElement.setAttribute("type", "text/css");headElement.appendChild(tempStyleElement);}}var styleElement = styleElements[0];var media = styleElement.getAttribute("media");if (media != null && !/screen/.test(media.toLowerCase())) {styleElement.setAttribute("media", "screen");}if (! "\v1") { // iestyleElement.styleSheet.cssText = cssCode;}else if (/a/[-1] == "a") {styleElement.innerHTML = cssCode; // 火狐支持直接innerHTML添加样式表字串}else{styleElement.appendChild(doc.createTextNode(cssCode))}},/** iframe高度自适应* @param id iframe的id* @param endTime 计算的时间* */adjustIframe: function(id, endTime) {var iframe = this.byId(id),time = 0,end = endTime || 30,intervalID;if (iframe) {function callback() {time = time 1;if (time == end) {clearInterval(intervalID)}var idoc = iframe.contentWindow && iframe.contentWindow.document || iframe.contentDocument;var iheight = Math.max(idoc.body.scrollHeight, idoc.documentElement.scrollHeight);iframe.style.height = iheight "px";}intervalID = setInterval(callback, 50)}},/** 拖拽元素* @param elem 拖拽的元素* @param callback 拖拽结束之后的回调函数* */drag: function(elem, callback) {callback = callback || function() {};var $D = this;var params = {left: 0,top: 0,currentX: 0,currentY: 0,flag: false};if ($D.getStyle(elem, "left") !== "auto") {params.left = $D.getStyle(elem, "left");}if ($D.getStyle(elem, "top") !== "auto") {params.top = $D.getStyle(elem, "top");}elem.onmousedown = function(event) {params.flag = true;event = event || window.event;params.currentX = event.clientX;params.currentY = event.clientY;};document.onmousemove = function(event) {event = event || window.event;if (params.flag) {var nowX = event.clientX,nowY = event.clientY;var disX = nowX - params.currentX,disY = nowY - params.currentY;elem.style.left = parseInt(params.left) disX "px";elem.style.top = parseInt(params.top) disY "px";}};document.onmouseup = function() {params.flag = false;if ($D.getStyle(elem, "left") !== "auto") {params.left = $D.getStyle(elem, "left");}if ($D.getStyle(elem, "top") !== "auto") {params.top = $D.getStyle(elem, "top");}callback(elem);};},// 获取元素被窗口卷去的上部分高度getScrollTop: function(elem) {var doc = elem ? elem.ownerDocument : document;return doc.documentElement.scrollTop || doc.body.scrollTop;},// 获取元素被窗口卷去的左部分宽度getScrollLeft: function(elem) {var doc = elem ? elem.ownerDocument : document;return doc.documentElement.scrollLeft || doc.body.scrollLeft;},// 获取元素的左偏移量getElementLeft: function(elem) {var actualLeft = elem.offsetLeft;var current = elem.offsetParent;while (current !== null) {actualLeft = current.offsetLeft;current = current.offsetParent;}return actualLeft;},// 获取元素的上偏移量getElementTop: function(elem) {var actualTop = elem.offsetTop;var current = elem.offsetParent;while (current !== null) {actualTop = current. offsetTop;current = current.offsetParent;}return actualTop;},// 获取元素的范围（包括窗口不可见的部分）rect: function(elem) {var left = 0,top = 0,right = 0,bottom = 0;if (!elem.getBoundingClientRect) {left = this.getElementLeft(elem);top = this.getElementTop(elem);right = left elem.offsetWidth;bottom = top elem.offsetHeight;} else {var rect = elem.getBoundingClientRect();left = right = this.getScrollLeft(elem);top = bottom = this.getScrollTop(elem);left = rect.left;right = rect.right;top = rect.top;bottom = rect.bottom;}return {"left": left,"top": top,"right": right,"bottom": bottom};},// 获取元素在窗口可见的范围clientRect: function(elem) {var rect = this.rect(elem),sLeft = this.getScrollLeft(elem),sTop = this.getScrollTop(elem);rect.left -= sLeft;rect.right -= sLeft;rect.top -= sTop;rect.bottom -= sTop;return rect;},// 获取浏览器视口大小getViewport: function() {if (document.compatMode == "BackCompat") { // 判断是否运行在混杂模式return {"width": document.body.clientWidth,"height": document.body.clientHeight};} else {return {"width": document.documentElement.clientWidth,"height": document.documentElement.clientHeight};}},/** 元素是否包含某元素* @parma elemA 包含元素* @param elemB 被包含元素* */contains: function(elemA, elemB) {if (typeof elemA.contains == "function" && (!COM.$B.engine.webkit || COM.$B.engine.webkit >= 522)) {return elemA.contains(elemB);} else if (typeof elemA.compareDocumentPosition == "function") {return !!(elemA.compareDocumentPosition(elemB) & 16);} else {var node = elemB.parentNode;do {if (node === elemA) {return true;} else {node = node.parentNode;}} while (node !== null);return false;}},// 获取所有css属性curStyle: function(elem) {if (document.defaultView && typeof document.defaultView.getComputedStyle == "function") {return document.defaultView.getComputedStyle(elem, null);} else {return elem.currentStyle;}},/** 获取元素指定的css属性的值* @param elem 当前元素* @parma name css属性名* */getStyle: function(elem, name) {var style = null;if (document.defaultView && typeof document.defaultView.getComputedStyle == "function") {style = document.defaultView.getComputedStyle(elem, null);return name in style ? style[name] : style.getPropertyValue(name);} else {var curStyle = elem.currentStyle;style = elem.style;if (name == "opacity") {if (/alpha\(opacity=(.*)\)/i.test(curStyle.filter)) {var opacity = parseFloat(RegExp.$1);return opacity ? opacity / 100 : 0;}return 1;}if (name == "float") {name = "styleFloat";}var ret = curStyle[name] || curStyle[com.$S.camelize(name)];// 单位转换if (!/^-?\d (?:px)?$/i.test(ret) && /^\-?\d/.test(ret)) {var left = style.left,rtStyle = elem.runtimeStyle,rsLeft = rtStyle.left;rtStyle.left = curStyle.left;style.left = ret || 0;ret = style.pixelLeft "px";style.left = left;rtStyle.left = rsLeft;}return ret;}},/** 设置元素指定的css属性的值* @param elem 当前元素* @parma style css属性名* @param value css属性的指* */setStyle: function(elems, style, value) {if (!elems.length) {elems = [elems];}if (typeof style == "string") {var s = style;style = {};style[s] = value;}com.$A.forEach(elems, function(elem) {for (var name in style) {if (style.hasOwnProperty(name)) {var value = style[name];if (name == "opacity" && com.$B.browser.ie) {elem.style.filter = (elem.currentStyle && elem.currentStyle.filter || "").replace( /alpha\([^)]*\)/, "" ) " alpha(opacity=" (value * 100 | 0) ")";} else if (name == "float") {elem.style[com.$B.browser.ie ? "styleFloat" : "cssFloat" ] = value;} else {elem.style[com.$S.camelize(name)] = value;}}}});},// 获取元素大小getSize: function(elem) {var width = elem.offsetWidth,height = elem.offsetHeight;if (!width && !height) {var repair = this.contains(document.body, elem),parent;if (!repair) { // 元素不在body上parent = elem.parentNode;document.body.insertBefore(elem, document.body.childNodes[0]);}var style = elem.style,cssShow = {position: "absolute",visibility: "hidden",display: "block",left: "-9999px",top: "-9999px"},cssBack = {position: style.position,visibility: style.visibility,display: style.display,left: style.left,top: style.top};this.setStyle(elem, cssShow);width = elem.offsetWidth;height = elem.offsetHeight;this.setStyle(elem, cssBack);if (!repair) {parent ? parent.appendChild(elem) : document.body.removeChild(elem);}}return {"width": width,"height": height};}};
}());参考
http://www.cnblogs.com/cloudgamer/
更多专业前端知识，请上 【猿2048】www.mk2048.com
commonJS — DOM操作（for DOM）相关推荐
- dojo 的DOM操作 dojo/dom
对dom的使用,需要引用包dojo/dom. 1.获取节点, dom.byId byId中既可以传递一个字符串,也可以传递一个节点对象 require(["dojo/dom", & ...
- 为什么DOM操作很慢
转自:http://kb.cnblogs.com/page/534571/ 一直都听说DOM很慢,要尽量少的去操作DOM,于是就想进一步去探究下为什么大家都会这样说,在网上学习了一些资料,这边整理出来 ...
- 第三章（jQuery中的DOM操作）
3.1 DOM 操作分类 ①DOM Core 包括(getElementById() , getElementsByTagName() , getAttribute() , setAttribute( ...
- DOM操作（增删改查）详解
一.DOM操作 1.DOM概念 当网页被加载时,浏览器会创建页面的文档对象模型DOM DOM:Document Object Model 注:DOM说明 在DOM中,每个东西都是节点: 文档本身就是一 ...
- 常见的DOM操作有哪些
这里是修真院前端小课堂,本篇分析的主题是 [常见的DOM操作有哪些] 这里是修真院前端小课堂,每篇分享文从 [背景介绍][知识剖析][常见问题][解决方案][编码实战][扩展思考][更多讨论][参考文 ...
- 【Virtual DOM】虚拟 DOM 和 Snabbdom 库
前言 笔记来源:拉勾教育 大前端高薪训练营 阅读建议:建议通过左侧导航栏进行阅读 Virtual DOM 基本介绍 什么是 Virtual DOM Virtual DOM(虚拟 DOM),是由普通的的 ...
- DOM操作词典大全——今日词条：事件基础
欢迎加入前端技术营!如果你也是前端学习者或者对前端有学习的想法,那就跟着我一起从零开始进击前端. 致力于尽可能详细且简洁的介绍前端知识.自己的捷径,也是学习路上的记录.欢迎探讨 文章目录 一 ...
- js里的document对象大全（DOM操作）
什么是DOM document object model 的简称,意思为文档对象模型.主要用来对文档中的html节点进行操作. Dom的操作简单示例: <div id="t1" ...
- jQuery 学习笔记一(认识jQuery jQuery选择器 jQuery中的DOM操作)
第一章 认识jQuery jQuery代码风格 $(document).ready(function(){ //... }); 简化 $(function(){ //... }); jQuery对象转 ...
- 03-老马jQuery教程-DOM操作(上）
jQuery DOM操作 在没有jQuery之前,DOM的操作相对来说有点麻烦,尤其是DOM节点的搜索.目前我们已经学习了jQuery的选择器,接下带大家一块学习jQuery的DOM操作,jQuery ...
最新文章
- 购物中心定位分析、调整方案及租金建议
- # 对象json互相转换_推荐一款 Java 对象映射神器
- 配置CITRIX XML 服务与IIS 7.x共享端口
- Android O 前期预研之二：HIDL相关介绍
- TypeScript 的 Object Types
- app canvas渲染后图片黑色_H5 基于 canvas 实现电子签名并生成PDF文档
- css3 filter url,CSS3 filter(滤镜) 属性
- canvas笔记-使用canvas画圆及点阵的使用
- Python3基础3——List列表的增删改和内建函数的用法
- c语言 prototype_(创建型模式)Prototype——原型模式
- 指定locale为en_US
- java static关键字_Java基础：static关键字作用总结
- 【paper and code】StarGAN
- 学生管理系统IPO图_图书管理系统开发背景和意义
- 关于周志华老师的几篇深度森林论文的介绍
- php xml 修改节点值,.NET_XML文件修改节点属性值(多种方法)，xml 文件内容: 复制代码 代码如 - phpStudy...
- macbook macOS苹果电脑到底需不需要清理系统垃圾？
- 基于点锐度的清晰度算法 EAV
- 详谈双亲委派机制（面试常问）
- java服务报错连接超时