JS Code block 代码块–dom
星期二, 2023-04-18 | Author: Lee | computer, 前端 | 1,071 views
dom
获取一级子节点
获取兄弟节点
获取元素相对于视口的位置信息
判定节点里是否有class
添加class
删除class
替换class
dom对象转换成字符串
给页面添加js和css
禁用浏览器的默认行为
获取当前元素,或窗口的滚动位置
判断一个对象是否为Dom对象
获取HTML里的文字内容
字符串的转义
字符串的反转义
将文本插入到文本区域的光标位置
浏览器全屏
退出全屏
是否是Element
/** * 获取一级子节点 * @param obj 父节点 * @return {Array} */ getChildren (obj) { let objChild = [] ; let objs = obj.getElementsByTagName('*'); for (let i = 0, j = objs.length; i < j; ++i) { if (objs[i].nodeType !== 1) { alert(objs[i].nodeType) continue } let temp = objs[i].parentNode; if (temp.nodeType == 1) { if (temp == obj) { objChild[objChild.length] = objs[i] } } else if (temp.parentNode == obj) { objChild[objChild.length] = objs[i] } } return objChild } /** * 获取兄弟节点 */ function siblings (element) { let chid = element.parentNode.children, eleMatch = []; for(let i = 0, len = chid.length; i < len; i ++){ if(chid[i] != element){ eleMatch.push(chid[i]); } } return eleMatch; } /** * 获取元素相对于视口的位置信息 * * @param {Element} ele */ const getOffsetRect = (ele) => { const box = ele.getBoundingClientRect(); const body = document.body; const docElem = document.documentElement; // 获取页面的scrollTop,scrollLeft(兼容性写法) const scrollTop = window.pageYOffset || docElem.scrollTop || body.scrollTop; const scrollLeft = window.pageXOffset || docElem.scrollLeft || body.scrollLeft; const clientTop = docElem.clientTop || body.clientTop; const clientLeft = docElem.clientLeft || body.clientLeft; const top = box.top + scrollTop - clientTop; const left = box.left + scrollLeft - clientLeft; return { // Math.round 兼容火狐浏览器bug top: Math.round(top), left: Math.round(left) }; }; /** * 判定节点里是否有class * @param elements dom节点 * @param cName class名 * @return {boolean} */ function hasClass (element, cName) { return !!element.className.match(new RegExp('(\\s|^)' + cName + '(\\s|$)')) } /** * 添加class * @param elements * @param cName */ function addClass (element, cName) { if (!hasClass(element, cName)) { element.className += ' ' + cName } } /** * 删除class * @param elements * @param cName */ function removeClass (element, cName) { if (hasClass(element, cName)) { element.className = element.className.replace(new RegExp('(\\s|^)' + cName + '(\\s|$)'), ' ') } } /** * 替换class * */ function replaceClass (element, newName, oldName) { removeClass(element, oldName); addClass(element, newName); } /** * 将dom对象转换成字符串 * @param node * @returns {string} */ function nodeToString ( node ) { let tmpNode = document.createElement( 'div'); //appendChild() 参数Node对象 返回Node对象 Element方法 //cloneNode() 参数布尔类型 返回Node对象 Element方法 tmpNode.appendChild( node.cloneNode( true ) ); let str = tmpNode.innerHTML; tmpNode = node = null; // prevent memory leaks in IE return str; } /** * 给页面添加js和css * @type {Array} */ let loadedPaths = []; function delayLoadJSAndCSS(path, type, title, preFn) { if(loadedPaths.includes(path)) { return Promise.resolve(); } else { return new Promise(function (resolve) { let s = null; let js = null; let less = null; let i = 0; if (!type) { type = path.substr(path.lastIndexOf('.') + 1); } if (type === 'js') { let ss = document.getElementsByTagName('script'); for (i = 0; i < ss.length; i++) { if (ss[i].src && ss[i].src.indexOf(path) != -1 || ss[i].title == title) { js = ss[i]; resolve(ss[i]); } } if (!js) { s = document.createElement('script'); s.type = 'text/javascript'; s.src = path; if (preFn) { preFn(s); } if (title) { s.title = title; } loadedPaths.push(path); } } else if (type === 'css') { let ls = document.getElementsByTagName('link'); for (i = 0; i < ls.length; i++) { if (ls[i].href && ls[i].href.indexOf(path) != -1 || ls[i].title == title) { less = ls[i]; resolve(ls[i]); } } if (!less) { s = document.createElement('link'); s.rel = 'stylesheet'; s.type = 'text/css'; s.href = path; if (title) { s.title = title; } s.disabled = false; loadedPaths.push(path); } } else { resolve(false); } if (s) { let head = document.getElementsByTagName('head')[0]; head.appendChild(s); s.onload = function () { resolve(s); }; } }); } } /** * 禁用浏览器的默认行为 */ function disableScreenElasticity() { // ios // 禁用不需要的浏览器默认行为 let $win = $(window); // 禁止ios的浏览器容器弹性 $win .on('scroll.elasticity', function (e) { e.preventDefault(); }) .on('touchmove.elasticity', function (e) { e.preventDefault(); }); // 禁止拖动图片 $win.delegate('img', 'mousemove', function (e) { e.preventDefault(); }); } /** * 获取当前元素,或窗口的滚动位置 * @param el * @return {{x: number, y: number}} */ function getScrollPosition(el = window) { return { x: (el.pageXOffset !== undefined) ? el.pageXOffset : el.scrollLeft, y: (el.pageYOffset !== undefined) ? el.pageYOffset : el.scrollTop } } /** * 判断一个对象是否为Dom对象 * @param {Object} obj * @return {Boolean} */ function isDom (obj) { return obj && obj.nodeType === 1 && typeof(obj.nodeName) == 'string' } /** * 获取HTML里的文字内容 * @param {string} str html字符串 * @return {string} 处理后的文字 * @example * getDecodeHTMLText('<li>111<span>222</span></li>') */ function getDecodeHTMLText(str){ const element = document.createElement('div'); if (str && typeof str === 'string') { // strip script/html tags str = str.replace(/<script[^>]*>([\S\s]*?)<\/script>/gmi, ''); str = str.replace(/<\/?\w(?:[^"'>]|"[^"]*"|'[^']*')*>/gmi, ''); element.innerHTML = str; str = element.textContent; element.textContent = ''; } return str; } /** * 字符串的转义,将`&`, `<`, `>`, `"`, `'`分别转义为`&`, `<`, `>`, `"`, `'` * @param {string} text处理前字符串 * @return {string} 处理后的字符串 * @runkit true * @example * getEscapeText('<hello>') * // '<hello>' */ function getEscapeText(text) { const _escape = { '&': '&', '<': '<', '>': '>', '"': '"', "'": ''' } const escapeExpr = /(&|<|>|"|')/g return ('' + text).replace(escapeExpr, function (match) { return _escape[match] }); } /** * 字符串的反转义,将`&`, `<`, `>`, `"`, `'`替换为转义前的符号 * @param {string} text 处理前字符串 * @return {string} 处理后的字符串 * @runkit true * @example * getUnescapeText('<hello>') * // '<hello>' */ function getUnescapeText(text) { const _unescape = { '&': '&', '<': '<', '>': '>', '"': '"', ''': "'" } const unescapeExpr = /(&|<|>|"|')/g; return ('' + text).replace(unescapeExpr, function (match) { return _unescape[match]; }); } /** * 将文本插入到文本区域的光标位置 * _应用场景:_如在评论框里,在光标位置里插入emoji等 * @param {object} dom对象 * @param {string} str * @example * <textarea name="textarea" rows="10" cols="50">你好世界~</textarea> * const editText = document.querySelector('#editText'); * insertText(editText, 'hello world'); * // => */ function insertAtCaret(dom, str = '') { if (document.selection) { // IE let sel = document.selection.createRange(); sel.text = str; } else if (typeof dom.selectionStart === 'number' && typeof dom.selectionEnd === 'number') { let startPos = dom.selectionStart; let endPos = dom.selectionEnd; let cursorPos = startPos; let tmpStr = dom.value; dom.value = tmpStr.substring(0, startPos) + str + tmpStr.substring(endPos, tmpStr.length); cursorPos += str.length; dom.selectionStart = dom.selectionEnd = cursorPos; } else { dom.value += str; } } /** * 全屏 */ let toFullScreen = () => { let el = document.documentElement; let rfs = el.requestFullScreen || el.webkitRequestFullScreen || el.mozRequestFullScreen || el.msRequestFullScreen; //typeof rfs != "undefined" && rfs if (rfs) { rfs.call(el); } else if (typeof window.ActiveXObject !== "undefined") { //for IE,这里其实就是模拟了按下键盘的F11,使浏览器全屏 let wscript = new ActiveXObject("WScript.Shell"); if (wscript != null) { wscript.SendKeys("{F11}"); } } else { alert("浏览器不支持全屏"); } } /** * 退出全屏 */ let exitFullscreen = function () { let el = parent.document; let cfs = el.cancelFullScreen || el.webkitCancelFullScreen || el.mozCancelFullScreen || el.exitFullScreen; //typeof cfs != "undefined" && cfs if (cfs) { cfs.call(el); } else if (typeof window.ActiveXObject !== "undefined") { //for IE,这里和fullScreen相同,模拟按下F11键退出全屏 let wscript = new ActiveXObject("WScript.Shell"); if (wscript != null) { wscript.SendKeys("{F11}"); } } else { alert("切换失败,可尝试Esc退出") } } /** * 是否是Element * @param el * @return {*|boolean} */ function isElement(el) { return el && el.nodeType === Node.ELEMENT_NODE } |
文章作者: Lee
本文地址: https://www.pomelolee.com/2391.html
除非注明,Pomelo Lee文章均为原创,转载请以链接形式标明本文地址
No comments yet.
Leave a comment
Search
相关文章
热门文章
最新文章
文章分类
- ajax (10)
- algorithm-learn (3)
- Android (6)
- as (3)
- computer (85)
- Database (30)
- disucz (4)
- enterprise (1)
- erlang (2)
- flash (5)
- golang (3)
- html5 (18)
- ios (4)
- JAVA-and-J2EE (186)
- linux (143)
- mac (10)
- movie-music (11)
- pagemaker (36)
- php (50)
- spring-boot (2)
- Synology群晖 (2)
- Uncategorized (6)
- unity (1)
- webgame (15)
- wordpress (33)
- work-other (2)
- 低代码 (1)
- 体味生活 (40)
- 前端 (21)
- 大数据 (8)
- 游戏开发 (9)
- 爱上海 (19)
- 读书 (4)
- 软件 (3)