Greasy Fork is available in English.
使用js重新对jQuery的部分函数进行了仿写
Script này sẽ không được không được cài đặt trực tiếp. Nó là một thư viện cho các script khác để bao gồm các chỉ thị meta
// @require https://update.greasyfork.org/scripts/465772/1384985/DOMUtils.js
(function (global, factory) {
typeof exports === 'object' && typeof module !== 'undefined' ? module.exports = factory() :
typeof define === 'function' && define.amd ? define(factory) :
(global = typeof globalThis !== 'undefined' ? globalThis : global || self, global.DOMUtils = factory());
})(this, (function () { 'use strict';
const DOMUtilsCoreDefaultEnv = {
document: document,
window: window,
globalThis: globalThis,
self: self,
};
const DOMUtilsCoreEnv = {
document: document,
window: window,
globalThis: globalThis,
self: self,
};
const DOMUtilsCore = {
init(option) {
if (!option) {
option = Object.assign({}, DOMUtilsCoreDefaultEnv);
}
Object.assign(DOMUtilsCoreEnv, option);
},
get document() {
return DOMUtilsCoreEnv.document;
},
get window() {
return DOMUtilsCoreEnv.window;
},
get globalThis() {
return DOMUtilsCoreEnv.globalThis;
},
get self() {
return DOMUtilsCoreEnv.self;
},
};
/** 通用工具类 */
const DOMUtilsCommonUtils = {
/**
* 判断元素是否已显示或已连接
* @param element
*/
isShow(element) {
return Boolean(element.getClientRects().length);
},
/**
* 用于显示元素并获取它的高度宽度等其它属性
* @param element
*/
showElement(element) {
let dupNode = element.cloneNode(true);
dupNode.setAttribute("style", "visibility: hidden !important;display:block !important;");
DOMUtilsCore.document.documentElement.appendChild(dupNode);
return {
/**
* 恢复修改的style
*/
recovery() {
dupNode.remove();
},
};
},
/**
* 获取元素上的Float格式的属性px
* @param element
* @param styleName style名
*/
getStyleValue(element, styleName) {
let view = null;
let styles = null;
if (element instanceof CSSStyleDeclaration) {
/* 直接就获取了style属性 */
styles = element;
}
else {
view = element.ownerDocument.defaultView;
if (!view || !view.opener) {
view = window;
}
styles = view.getComputedStyle(element);
}
let value = parseFloat(styles[styleName]);
if (isNaN(value)) {
return 0;
}
else {
return value;
}
},
/**
* 判断是否是window，例如window、self、globalThis
* @param target
*/
isWin(target) {
if (typeof target !== "object") {
return false;
}
if (target instanceof Node) {
return false;
}
if (target === globalThis) {
return true;
}
if (target === window) {
return true;
}
if (target === self) {
return true;
}
if (target === DOMUtilsCore.globalThis) {
return true;
}
if (target === DOMUtilsCore.window) {
return true;
}
if (target === DOMUtilsCore.self) {
return true;
}
if (typeof unsafeWindow !== "undefined" &&
target === unsafeWindow) {
return true;
}
if (target?.Math?.toString() !== "[object Math]") {
return false;
}
return true;
},
/**
* 删除对象上的属性
* @param target
* @param propName
*/
delete(target, propName) {
if (typeof Reflect === "object" && Reflect.deleteProperty) {
Reflect.deleteProperty(target, propName);
}
else {
delete target[propName];
}
},
};
/* 数据 */
const DOMUtilsData = {
/** .on绑定的事件 */
SymbolEvents: Symbol("events_" + (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1)),
};
const OriginPrototype = {
Object: {
defineProperty: Object.defineProperty,
},
};
class DOMUtilsEvent {
on(element, eventType, selector, callback, option) {
/**
* 获取option配置
* @param args
* @param startIndex
* @param option
*/
function getOption(args, startIndex, option) {
if (typeof args[startIndex] === "boolean") {
option.capture = args[startIndex];
if (typeof args[startIndex + 1] === "boolean") {
option.once = args[startIndex + 1];
}
if (typeof args[startIndex + 2] === "boolean") {
option.passive = args[startIndex + 2];
}
}
else if (typeof args[startIndex] === "object" &&
("capture" in args[startIndex] ||
"once" in args[startIndex] ||
"passive" in args[startIndex])) {
option.capture = args[startIndex].capture;
option.once = args[startIndex].once;
option.passive = args[startIndex].passive;
}
return option;
}
let DOMUtilsContext = this;
let args = arguments;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelectorAll(element);
}
if (element == null) {
return;
}
let elementList = [];
if (element instanceof NodeList || Array.isArray(element)) {
element = element;
elementList = [...element];
}
else {
elementList.push(element);
}
let eventTypeList = [];
if (Array.isArray(eventType)) {
eventTypeList = eventTypeList.concat(eventType);
}
else if (typeof eventType === "string") {
eventTypeList = eventTypeList.concat(eventType.split(" "));
}
let _selector_ = selector;
let _callback_ = callback;
let _option_ = {
capture: false,
once: false,
passive: false,
};
if (typeof selector === "function") {
/* 这是为没有selector的情况 */
_selector_ = void 0;
_callback_ = selector;
_option_ = getOption(args, 3, _option_);
}
else {
/* 这是存在selector的情况 */
_option_ = getOption(args, 4, _option_);
}
/**
* 如果是once，那么删除该监听和元素上的事件和监听
*/
function checkOptionOnceToRemoveEventListener() {
if (_option_.once) {
DOMUtilsContext.off(element, eventType, selector, callback, option);
}
}
elementList.forEach((elementItem) => {
function ownCallBack(event) {
let target = event.target;
if (_selector_) {
/* 存在自定义子元素选择器 */
let totalParent = DOMUtilsCommonUtils.isWin(elementItem)
? DOMUtilsCore.document.documentElement
: elementItem;
if (target.matches(_selector_)) {
/* 当前目标可以被selector所匹配到 */
_callback_.call(target, event);
checkOptionOnceToRemoveEventListener();
}
else if (target.closest(_selector_) &&
totalParent.contains(target.closest(_selector_))) {
/* 在上层与主元素之间寻找可以被selector所匹配到的 */
let closestElement = target.closest(_selector_);
/* event的target值不能直接修改 */
OriginPrototype.Object.defineProperty(event, "target", {
get() {
return closestElement;
},
});
_callback_.call(closestElement, event);
checkOptionOnceToRemoveEventListener();
}
}
else {
_callback_.call(elementItem, event);
checkOptionOnceToRemoveEventListener();
}
}
/* 遍历事件名设置元素事件 */
eventTypeList.forEach((eventName) => {
elementItem.addEventListener(eventName, ownCallBack, _option_);
if (_callback_ && _callback_.delegate) {
elementItem.setAttribute("data-delegate", _selector_);
}
/* 获取对象上的事件 */
let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
/* 初始化对象上的xx事件 */
elementEvents[eventName] = elementEvents[eventName] || [];
elementEvents[eventName].push({
selector: _selector_,
option: _option_,
callback: ownCallBack,
originCallBack: _callback_,
});
/* 覆盖事件 */
elementItem[DOMUtilsData.SymbolEvents] = elementEvents;
});
});
}
off(element, eventType, selector, callback, option, filter) {
/**
* 获取option配置
* @param args1
* @param startIndex
* @param option
*/
function getOption(args1, startIndex, option) {
if (typeof args1[startIndex] === "boolean") {
option.capture = args1[startIndex];
}
else if (typeof args1[startIndex] === "object" &&
"capture" in args1[startIndex]) {
option.capture = args1[startIndex].capture;
}
return option;
}
let args = arguments;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelectorAll(element);
}
if (element == null) {
return;
}
let elementList = [];
if (element instanceof NodeList || Array.isArray(element)) {
element = element;
elementList = [...element];
}
else {
elementList.push(element);
}
let eventTypeList = [];
if (Array.isArray(eventType)) {
eventTypeList = eventTypeList.concat(eventType);
}
else if (typeof eventType === "string") {
eventTypeList = eventTypeList.concat(eventType.split(" "));
}
/**
* 子元素选择器
*/
let _selector_ = selector;
/**
* 事件的回调函数
*/
let _callback_ = callback;
/**
* 事件的配置
*/
let _option_ = {
capture: false,
};
if (typeof selector === "function") {
/* 这是为没有selector的情况 */
_selector_ = void 0;
_callback_ = selector;
_option_ = getOption(args, 3, _option_);
}
else {
_option_ = getOption(args, 4, _option_);
}
elementList.forEach((elementItem) => {
/* 获取对象上的事件 */
let elementEvents = elementItem[DOMUtilsData.SymbolEvents] || {};
eventTypeList.forEach((eventName) => {
let handlers = elementEvents[eventName] || [];
if (typeof filter === "function") {
handlers = handlers.filter(filter);
}
for (let index = 0; index < handlers.length; index++) {
let handler = handlers[index];
let flag = false;
if (!_selector_ || handler.selector === _selector_) {
/* selector不为空，进行selector判断 */
flag = true;
}
if (!_callback_ ||
handler.callback === _callback_ ||
handler.originCallBack === _callback_) {
/* callback不为空，进行callback判断 */
flag = true;
}
if (flag) {
elementItem.removeEventListener(eventName, handler.callback, _option_);
handlers.splice(index--, 1);
}
}
if (handlers.length === 0) {
/* 如果没有任意的handler，那么删除该属性 */
DOMUtilsCommonUtils.delete(elementEvents, eventType);
}
});
elementItem[DOMUtilsData.SymbolEvents] = elementEvents;
});
}
/**
* 取消绑定所有的事件
* @param element 需要取消绑定的元素|元素数组
* @param eventType （可选）需要取消监听的事件
*/
offAll(element, eventType) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelectorAll(element);
}
if (element == null) {
return;
}
let elementList = [];
if (element instanceof NodeList || Array.isArray(element)) {
element = element;
elementList = [...element];
}
else {
elementList.push(element);
}
let eventTypeList = [];
if (Array.isArray(eventType)) {
eventTypeList = eventTypeList.concat(eventType);
}
else if (typeof eventType === "string") {
eventTypeList = eventTypeList.concat(eventType.split(" "));
}
elementList.forEach((elementItem) => {
Object.getOwnPropertySymbols(elementItem).forEach((symbolEvents) => {
if (!symbolEvents.toString().startsWith("Symbol(events_")) {
return;
}
let elementEvents = elementItem[symbolEvents] || {};
let iterEventNameList = eventTypeList.length
? eventTypeList
: Object.keys(elementEvents);
iterEventNameList.forEach((eventName) => {
let handlers = elementEvents[eventName];
if (!handlers) {
return;
}
for (const handler of handlers) {
elementItem.removeEventListener(eventName, handler.callback, {
capture: handler["option"]["capture"],
});
}
DOMUtilsCommonUtils.delete(elementItem[symbolEvents], eventName);
});
});
});
}
/**
* 等待文档加载完成后执行指定的函数
* @param callback 需要执行的函数
* @example
* DOMUtils.ready(function(){
* console.log("文档加载完毕")
* })
*/
ready(callback) {
if (typeof callback !== "function") {
return;
}
/**
* 检测文档是否加载完毕
*/
function checkDOMReadyState() {
try {
if (document.readyState === "complete" ||
(document.readyState !== "loading" &&
!document.documentElement.doScroll)) {
return true;
}
else {
return false;
}
}
catch (error) {
return false;
}
}
/**
* 成功加载完毕后触发的回调函数
*/
function completed() {
removeDomReadyListener();
callback();
}
let targetList = [
{
target: DOMUtilsCore.document,
eventType: "DOMContentLoaded",
callback: completed,
},
{
target: DOMUtilsCore.window,
eventType: "load",
callback: completed,
},
];
/**
* 添加监听
*/
function addDomReadyListener() {
for (let index = 0; index < targetList.length; index++) {
let item = targetList[index];
item.target.addEventListener(item.eventType, item.callback);
}
}
/**
* 移除监听
*/
function removeDomReadyListener() {
for (let index = 0; index < targetList.length; index++) {
let item = targetList[index];
item.target.removeEventListener(item.eventType, item.callback);
}
}
if (checkDOMReadyState()) {
/* 检查document状态 */
setTimeout(callback);
}
else {
/* 添加监听 */
addDomReadyListener();
}
}
/**
* 主动触发事件
* @param element 需要触发的元素|元素数组|window
* @param eventType 需要触发的事件
* @param details 赋予触发的Event的额外属性，如果是Event类型，那么将自动代替默认new的Event对象
* @param useDispatchToTriggerEvent 是否使用dispatchEvent来触发事件,默认true
* @example
* // 触发元素a.xx的click事件
* DOMUtils.trigger(document.querySelector("a.xx"),"click")
* DOMUtils.trigger("a.xx","click")
* // 触发元素a.xx的click、tap、hover事件
* DOMUtils.trigger(document.querySelector("a.xx"),"click tap hover")
* DOMUtils.trigger("a.xx",["click","tap","hover"])
*/
trigger(element, eventType, details, useDispatchToTriggerEvent = true) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
let elementList = [];
if (element instanceof NodeList || Array.isArray(element)) {
element = element;
elementList = [...element];
}
else {
elementList = [element];
}
let eventTypeList = [];
if (Array.isArray(eventType)) {
eventTypeList = eventType;
}
else if (typeof eventType === "string") {
eventTypeList = eventType.split(" ");
}
elementList.forEach((elementItem) => {
/* 获取对象上的事件 */
let events = elementItem[DOMUtilsData.SymbolEvents] || {};
eventTypeList.forEach((_eventType_) => {
let event = null;
if (details && details instanceof Event) {
event = details;
}
else {
event = new Event(_eventType_);
if (details) {
Object.keys(details).forEach((keyName) => {
event[keyName] = details[keyName];
});
}
}
if (useDispatchToTriggerEvent == false && _eventType_ in events) {
events[_eventType_].forEach((eventsItem) => {
eventsItem.callback(event);
});
}
else {
elementItem.dispatchEvent(event);
}
});
});
}
/**
* 绑定或触发元素的click事件
* @param element 目标元素
* @param handler （可选）事件处理函数
* @param details （可选）赋予触发的Event的额外属性
* @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
* @example
* // 触发元素a.xx的click事件
* DOMUtils.click(document.querySelector("a.xx"))
* DOMUtils.click("a.xx")
* DOMUtils.click("a.xx"，function(){
* console.log("触发click事件成功")
* })
* */
click(element, handler, details, useDispatchToTriggerEvent) {
let DOMUtilsContext = this;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (handler == null) {
DOMUtilsContext.trigger(element, "click", details, useDispatchToTriggerEvent);
}
else {
DOMUtilsContext.on(element, "click", null, handler);
}
}
/**
* 绑定或触发元素的blur事件
* @param element 目标元素
* @param handler （可选）事件处理函数
* @param details （可选）赋予触发的Event的额外属性
* @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
* @example
* // 触发元素a.xx的blur事件
* DOMUtils.blur(document.querySelector("a.xx"))
* DOMUtils.blur("a.xx")
* DOMUtils.blur("a.xx"，function(){
* console.log("触发blur事件成功")
* })
* */
blur(element, handler, details, useDispatchToTriggerEvent) {
let DOMUtilsContext = this;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (handler === null) {
DOMUtilsContext.trigger(element, "blur", details, useDispatchToTriggerEvent);
}
else {
DOMUtilsContext.on(element, "blur", null, handler);
}
}
/**
* 绑定或触发元素的focus事件
* @param element 目标元素
* @param handler （可选）事件处理函数
* @param details （可选）赋予触发的Event的额外属性
* @param useDispatchToTriggerEvent （可选）是否使用dispatchEvent来触发事件,默认true
* @example
* // 触发元素a.xx的focus事件
* DOMUtils.focus(document.querySelector("a.xx"))
* DOMUtils.focus("a.xx")
* DOMUtils.focus("a.xx"，function(){
* console.log("触发focus事件成功")
* })
* */
focus(element, handler, details, useDispatchToTriggerEvent) {
let DOMUtilsContext = this;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (handler == null) {
DOMUtilsContext.trigger(element, "focus", details, useDispatchToTriggerEvent);
}
else {
DOMUtilsContext.on(element, "focus", null, handler);
}
}
/**
* 当鼠标移入或移出元素时触发事件
* @param element 当前元素
* @param handler 事件处理函数
* @param option 配置
* @example
* // 监听a.xx元素的移入或移出
* DOMUtils.hover(document.querySelector("a.xx"),()=>{
* console.log("移入/移除");
* })
* DOMUtils.hover("a.xx",()=>{
* console.log("移入/移除");
* })
*/
hover(element, handler, option) {
let DOMUtilsContext = this;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
DOMUtilsContext.on(element, "mouseenter", null, handler, option);
DOMUtilsContext.on(element, "mouseleave", null, handler, option);
}
/**
* 当按键松开时触发事件
* keydown - > keypress - > keyup
* @param target 当前元素
* @param handler 事件处理函数
* @param option 配置
* @example
* // 监听a.xx元素的按键松开
* DOMUtils.keyup(document.querySelector("a.xx"),()=>{
* console.log("按键松开");
* })
* DOMUtils.keyup("a.xx",()=>{
* console.log("按键松开");
* })
*/
keyup(target, handler, option) {
let DOMUtilsContext = this;
if (target == null) {
return;
}
if (typeof target === "string") {
target = DOMUtilsCore.document.querySelector(target);
}
DOMUtilsContext.on(target, "keyup", null, handler, option);
}
/**
* 当按键按下时触发事件
* keydown - > keypress - > keyup
* @param target 目标
* @param handler 事件处理函数
* @param option 配置
* @example
* // 监听a.xx元素的按键按下
* DOMUtils.keydown(document.querySelector("a.xx"),()=>{
* console.log("按键按下");
* })
* DOMUtils.keydown("a.xx",()=>{
* console.log("按键按下");
* })
*/
keydown(target, handler, option) {
let DOMUtilsContext = this;
if (target == null) {
return;
}
if (typeof target === "string") {
target = DOMUtilsCore.document.querySelector(target);
}
DOMUtilsContext.on(target, "keydown", null, handler, option);
}
/**
* 当按键按下时触发事件
* keydown - > keypress - > keyup
* @param target 目标
* @param handler 事件处理函数
* @param option 配置
* @example
* // 监听a.xx元素的按键按下
* DOMUtils.keypress(document.querySelector("a.xx"),()=>{
* console.log("按键按下");
* })
* DOMUtils.keypress("a.xx",()=>{
* console.log("按键按下");
* })
*/
keypress(target, handler, option) {
let DOMUtilsContext = this;
if (target == null) {
return;
}
if (typeof target === "string") {
target = DOMUtilsCore.document.querySelector(target);
}
DOMUtilsContext.on(target, "keypress", null, handler, option);
}
}
class DOMUtils extends DOMUtilsEvent {
constructor(option) {
DOMUtilsCore.init(option);
super();
}
/** 版本号 */
version = "2024.5.27";
attr(element, attrName, attrValue) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (attrValue == null) {
return element.getAttribute(attrName);
}
else {
element.setAttribute(attrName, attrValue);
}
}
/**
* 创建元素
* @param tagName 标签名
* @param property 属性
* @param attributes 元素上的自定义属性
* @example
* // 创建一个DIV元素，且属性class为xxx
* DOMUtils.createElement("div",undefined,{ class:"xxx" });
* > <div class="xxx"></div>
* @example
* // 创建一个DIV元素
* DOMUtils.createElement("div");
* > <div></div>
* @example
* // 创建一个DIV元素
* DOMUtils.createElement("div","测试");
* > <div>测试</div>
*/
createElement(
/** 元素名 */
tagName,
/** 属性 */
property,
/** 自定义属性 */
attributes) {
let tempElement = DOMUtilsCore.document.createElement(tagName);
if (typeof property === "string") {
tempElement.innerHTML = property;
return tempElement;
}
if (property == null) {
property = {};
}
if (attributes == null) {
attributes = {};
}
Object.keys(property).forEach((key) => {
let value = property[key];
tempElement[key] = value;
});
Object.keys(attributes).forEach((key) => {
let value = attributes[key];
if (typeof value === "object") {
/* object转字符串 */
value = JSON.stringify(value);
}
else if (typeof value === "function") {
/* function转字符串 */
value = value.toString();
}
tempElement.setAttribute(key, value);
});
return tempElement;
}
css(element, property, value) {
/**
* 把纯数字没有px的加上
*/
function handlePixe(propertyName, propertyValue) {
let allowAddPixe = [
"width",
"height",
"top",
"left",
"right",
"bottom",
"font-size",
];
if (typeof propertyValue === "number") {
propertyValue = propertyValue.toString();
}
if (typeof propertyValue === "string" &&
allowAddPixe.includes(propertyName) &&
propertyValue.match(/[0-9]$/gi)) {
propertyValue = propertyValue + "px";
}
return propertyValue;
}
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (typeof property === "string") {
if (value == null) {
return getComputedStyle(element).getPropertyValue(property);
}
else {
if (value === "string" && value.includes("!important")) {
element.style.setProperty(property, value, "important");
}
else {
value = handlePixe(property, value);
element.style.setProperty(property, value);
}
}
}
else if (typeof property === "object") {
for (let prop in property) {
if (typeof property[prop] === "string" &&
property[prop].includes("!important")) {
element.style.setProperty(prop, property[prop], "important");
}
else {
property[prop] = handlePixe(prop, property[prop]);
element.style.setProperty(prop, property[prop]);
}
}
}
}
text(element, text) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (text == null) {
return element.textContent || element.innerText;
}
else {
if (text instanceof Node) {
text = text.textContent || text.innerText;
}
if ("textContent" in element) {
element.textContent = text;
}
else if ("innerText" in element) {
element.innerText = text;
}
}
}
html(element, html) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (html == null) {
return element.innerHTML;
}
else {
if (html instanceof Node) {
html = html.innerHTML;
}
if ("innerHTML" in element) {
element.innerHTML = html;
}
}
}
/**
* 获取移动元素的transform偏移
*/
getTransform(element, isShow = false) {
let DOMUtilsContext = this;
let transform_left = 0;
let transform_top = 0;
if (!(isShow || (!isShow && DOMUtilsCommonUtils.isShow(element)))) {
/* 未显示 */
let { recovery } = DOMUtilsCommonUtils.showElement(element);
let transformInfo = DOMUtilsContext.getTransform(element, true);
recovery();
return transformInfo;
}
let elementTransform = getComputedStyle(element).transform;
if (elementTransform != null &&
elementTransform !== "none" &&
elementTransform !== "") {
let elementTransformSplit = elementTransform
.match(/\((.+)\)/)?.[1]
.split(",");
if (elementTransformSplit) {
transform_left = Math.abs(parseInt(elementTransformSplit[4]));
transform_top = Math.abs(parseInt(elementTransformSplit[5]));
}
else {
transform_left = 0;
transform_top = 0;
}
}
return {
transformLeft: transform_left,
transformTop: transform_top,
};
}
val(element, value) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (value == null) {
if (element.localName === "input" &&
(element.type === "checkbox" || element.type === "radio")) {
return element.checked;
}
else {
return element.value;
}
}
else {
if (element.localName === "input" &&
(element.type === "checkbox" || element.type === "radio")) {
element.checked = !!value;
}
else {
element.value = value;
}
}
}
prop(element, propName, propValue) {
if (element == null) {
return;
}
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (propValue == null) {
return element[propName];
}
else {
element[propName] = propValue;
}
}
/**
* 移除元素的属性
* @param element 目标元素
* @param attrName 属性名
* @example
* // 移除元素a.xx的属性data-value
* DOMUtils.removeAttr(document.querySelector("a.xx"),"data-value")
* DOMUtils.removeAttr("a.xx","data-value")
* */
removeAttr(element, attrName) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
element.removeAttribute(attrName);
}
/**
* 移除元素class名
* @param element 目标元素
* @param className 类名
* @example
* // 移除元素a.xx的className为xx
* DOMUtils.removeClass(document.querySelector("a.xx"),"xx")
* DOMUtils.removeClass("a.xx","xx")
*/
removeClass(element, className) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (className == null) {
return;
}
element.classList.remove(className);
}
/**
* 移除元素的属性
* @param element 目标元素
* @param propName 属性名
* @example
* // 移除元素a.xx的href属性
* DOMUtils.removeProp(document.querySelector("a.xx"),"href")
* DOMUtils.removeProp("a.xx","href")
* */
removeProp(element, propName) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
DOMUtilsCommonUtils.delete(element, propName);
}
/**
* 将一个元素替换为另一个元素
* @param element 目标元素
* @param newElement 新元素
* @example
* // 替换元素a.xx为b.xx
* DOMUtils.replaceWith(document.querySelector("a.xx"),document.querySelector("b.xx"))
* DOMUtils.replaceWith("a.xx",'<b class="xx"></b>')
*/
replaceWith(element, newElement) {
let DOMUtilsContext = this;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (typeof newElement === "string") {
newElement = DOMUtilsContext.parseHTML(newElement, false, false);
}
if (element instanceof NodeList || element instanceof Array) {
element.forEach((item) => {
DOMUtilsContext.replaceWith(item, newElement);
});
}
else {
element.parentElement.replaceChild(newElement, element);
}
}
/**
* 给元素添加class
* @param element 目标元素
* @param className class名
* @example
* // 元素a.xx的className添加_vue_
* DOMUtils.addClass(document.querySelector("a.xx"),"_vue_")
* DOMUtils.addClass("a.xx","_vue_")
* */
addClass(element, className) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
element.classList.add(className);
}
/**
* 函数在元素内部末尾添加子元素或HTML字符串
* @param element 目标元素
* @param content 子元素或HTML字符串
* @example
* // 元素a.xx的内部末尾添加一个元素
* DOMUtils.append(document.querySelector("a.xx"),document.querySelector("b.xx"))
* DOMUtils.append("a.xx","'<b class="xx"></b>")
* */
append(element, content) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
function elementAppendChild(ele, text) {
if (typeof content === "string") {
ele.insertAdjacentHTML("beforeend", text);
}
else {
ele.appendChild(text);
}
}
if (Array.isArray(content) || content instanceof NodeList) {
/* 数组 */
let fragment = DOMUtilsCore.document.createDocumentFragment();
content.forEach((ele) => {
if (typeof ele === "string") {
ele = this.parseHTML(ele, true, false);
}
fragment.appendChild(ele);
});
element.appendChild(fragment);
}
else {
elementAppendChild(element, content);
}
}
/**
* 函数 在元素内部开头添加子元素或HTML字符串
* @param element 目标元素
* @param content 子元素或HTML字符串
* @example
* // 元素a.xx内部开头添加一个元素
* DOMUtils.prepend(document.querySelector("a.xx"),document.querySelector("b.xx"))
* DOMUtils.prepend("a.xx","'<b class="xx"></b>")
* */
prepend(element, content) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (typeof content === "string") {
element.insertAdjacentHTML("afterbegin", content);
}
else {
element.insertBefore(content, element.firstChild);
}
}
/**
* 在元素后面添加兄弟元素或HTML字符串
* @param element 目标元素
* @param content 兄弟元素或HTML字符串
* @example
* // 元素a.xx后面添加一个元素
* DOMUtils.after(document.querySelector("a.xx"),document.querySelector("b.xx"))
* DOMUtils.after("a.xx","'<b class="xx"></b>")
* */
after(element, content) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (typeof content === "string") {
element.insertAdjacentHTML("afterend", content);
}
else {
element.parentElement.insertBefore(content, element.nextSibling);
}
}
/**
* 在元素前面添加兄弟元素或HTML字符串
* @param element 目标元素
* @param content 兄弟元素或HTML字符串
* @example
* // 元素a.xx前面添加一个元素
* DOMUtils.before(document.querySelector("a.xx"),document.querySelector("b.xx"))
* DOMUtils.before("a.xx","'<b class="xx"></b>")
* */
before(element, content) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (typeof content === "string") {
element.insertAdjacentHTML("beforebegin", content);
}
else {
element.parentElement.insertBefore(content, element);
}
}
/**
* 移除元素
* @param target 目标元素
* @example
* // 元素a.xx前面添加一个元素
* DOMUtils.remove(document.querySelector("a.xx"))
* DOMUtils.remove(document.querySelectorAll("a.xx"))
* DOMUtils.remove("a.xx")
* */
remove(target) {
let DOMUtilsContext = this;
if (typeof target === "string") {
target = DOMUtilsCore.document.querySelectorAll(target);
}
if (target == null) {
return;
}
if (target instanceof NodeList || target instanceof Array) {
target = target;
for (const element of target) {
DOMUtilsContext.remove(element);
}
}
else {
target.remove();
}
}
/**
* 移除元素的所有子元素
* @param element 目标元素
* @example
* // 移除元素a.xx元素的所有子元素
* DOMUtils.empty(document.querySelector("a.xx"))
* DOMUtils.empty("a.xx")
* */
empty(element) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
element.innerHTML = "";
}
/**
* 获取元素相对于文档的偏移坐标（加上文档的滚动条）
* @param element 目标元素
* @example
* // 获取元素a.xx的对于文档的偏移坐标
* DOMUtils.offset(document.querySelector("a.xx"))
* DOMUtils.offset("a.xx")
* > 0
*/
offset(element) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
let rect = element.getBoundingClientRect();
return {
/** y轴偏移 */
top: rect.top + DOMUtilsCore.globalThis.scrollY,
/** x轴偏移 */
left: rect.left + DOMUtilsCore.globalThis.scrollX,
};
}
width(element, isShow = false) {
let DOMUtilsContext = this;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (DOMUtilsCommonUtils.isWin(element)) {
return DOMUtilsCore.window.document.documentElement.clientWidth;
}
if (element.nodeType === 9) {
/* Document文档节点 */
element = element;
return Math.max(element.body.scrollWidth, element.documentElement.scrollWidth, element.body.offsetWidth, element.documentElement.offsetWidth, element.documentElement.clientWidth);
}
if (isShow ||
(!isShow && DOMUtilsCommonUtils.isShow(element))) {
/* 已显示 */
/* 不从style中获取对应的宽度，因为可能使用了class定义了width !important */
element = element;
/* 如果element.style.width为空 则从css里面获取是否定义了width信息如果定义了 则读取css里面定义的宽度width */
if (parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "width").toString()) > 0) {
return parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "width").toString());
}
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetWidth来进行计算 */
if (element.offsetWidth > 0) {
let borderLeftWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderLeftWidth");
let borderRightWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderRightWidth");
let paddingLeft = DOMUtilsCommonUtils.getStyleValue(element, "paddingLeft");
let paddingRight = DOMUtilsCommonUtils.getStyleValue(element, "paddingRight");
let backHeight = parseFloat(element.offsetWidth.toString()) -
parseFloat(borderLeftWidth.toString()) -
parseFloat(borderRightWidth.toString()) -
parseFloat(paddingLeft.toString()) -
parseFloat(paddingRight.toString());
return parseFloat(backHeight.toString());
}
return 0;
}
else {
/* 未显示 */
element = element;
let { recovery } = DOMUtilsCommonUtils.showElement(element);
let width = DOMUtilsContext.width(element, true);
recovery();
return width;
}
}
height(element, isShow = false) {
let DOMUtilsContext = this;
if (DOMUtilsCommonUtils.isWin(element)) {
return DOMUtilsCore.window.document.documentElement.clientHeight;
}
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
// @ts-ignore
return;
}
if (element.nodeType === 9) {
element = element;
/* Document文档节点 */
return Math.max(element.body.scrollHeight, element.documentElement.scrollHeight, element.body.offsetHeight, element.documentElement.offsetHeight, element.documentElement.clientHeight);
}
if (isShow ||
(!isShow && DOMUtilsCommonUtils.isShow(element))) {
element = element;
/* 已显示 */
/* 从style中获取对应的高度，因为可能使用了class定义了width !important */
/* 如果element.style.height为空 则从css里面获取是否定义了height信息如果定义了 则读取css里面定义的高度height */
if (parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "height").toString()) > 0) {
return parseFloat(DOMUtilsCommonUtils.getStyleValue(element, "height").toString());
}
/* 如果从css里获取到的值不是大于0 可能是auto 则通过offsetHeight来进行计算 */
if (element.offsetHeight > 0) {
let borderTopWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderTopWidth");
let borderBottomWidth = DOMUtilsCommonUtils.getStyleValue(element, "borderBottomWidth");
let paddingTop = DOMUtilsCommonUtils.getStyleValue(element, "paddingTop");
let paddingBottom = DOMUtilsCommonUtils.getStyleValue(element, "paddingBottom");
let backHeight = parseFloat(element.offsetHeight.toString()) -
parseFloat(borderTopWidth.toString()) -
parseFloat(borderBottomWidth.toString()) -
parseFloat(paddingTop.toString()) -
parseFloat(paddingBottom.toString());
return parseFloat(backHeight.toString());
}
return 0;
}
else {
/* 未显示 */
element = element;
let { recovery } = DOMUtilsCommonUtils.showElement(element);
let height = DOMUtilsContext.height(element, true);
recovery();
return height;
}
}
outerWidth(element, isShow = false) {
let DOMUtilsContext = this;
if (DOMUtilsCommonUtils.isWin(element)) {
return DOMUtilsCore.window.innerWidth;
}
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
// @ts-ignore
return;
}
element = element;
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
let style = getComputedStyle(element, null);
let marginLeft = DOMUtilsCommonUtils.getStyleValue(style, "marginLeft");
let marginRight = DOMUtilsCommonUtils.getStyleValue(style, "marginRight");
return element.offsetWidth + marginLeft + marginRight;
}
else {
let { recovery } = DOMUtilsCommonUtils.showElement(element);
let outerWidth = DOMUtilsContext.outerWidth(element, true);
recovery();
return outerWidth;
}
}
outerHeight(element, isShow = false) {
let DOMUtilsContext = this;
if (DOMUtilsCommonUtils.isWin(element)) {
return DOMUtilsCore.window.innerHeight;
}
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
// @ts-ignore
return;
}
element = element;
if (isShow || (!isShow && DOMUtilsCommonUtils.isShow(element))) {
let style = getComputedStyle(element, null);
let marginTop = DOMUtilsCommonUtils.getStyleValue(style, "marginTop");
let marginBottom = DOMUtilsCommonUtils.getStyleValue(style, "marginBottom");
return element.offsetHeight + marginTop + marginBottom;
}
else {
let { recovery } = DOMUtilsCommonUtils.showElement(element);
let outerHeight = DOMUtilsContext.outerHeight(element, true);
recovery();
return outerHeight;
}
}
/**
* 在一定时间内改变元素的样式属性，实现动画效果
* @param element 需要进行动画的元素
* @param styles 动画结束时元素的样式属性
* @param duration 动画持续时间，单位为毫秒
* @param callback 动画结束后执行的函数
* @example
* // 监听元素a.xx的从显示变为隐藏
* DOMUtils.animate(document.querySelector("a.xx"),{ top:100},1000,function(){
* console.log("已往上位移100px")
* })
*/
animate(element, styles, duration = 1000, callback = null) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (typeof duration !== "number" || duration <= 0) {
throw new TypeError("duration must be a positive number");
}
if (typeof callback !== "function" && callback !== void 0) {
throw new TypeError("callback must be a function or null");
}
if (typeof styles !== "object" || styles === void 0) {
throw new TypeError("styles must be an object");
}
if (Object.keys(styles).length === 0) {
throw new Error("styles must contain at least one property");
}
let start = performance.now();
let from = {};
let to = {};
for (let prop in styles) {
from[prop] = element.style[prop] || getComputedStyle(element)[prop];
to[prop] = styles[prop];
}
let timer = setInterval(function () {
let timePassed = performance.now() - start;
let progress = timePassed / duration;
if (progress > 1) {
progress = 1;
}
for (let prop in styles) {
element.style[prop] =
from[prop] + (to[prop] - from[prop]) * progress + "px";
}
if (progress === 1) {
clearInterval(timer);
if (callback) {
callback();
}
}
}, 10);
}
/**
* 将一个元素包裹在指定的HTML元素中
* @param element 要包裹的元素
* @param wrapperHTML 要包裹的HTML元素的字符串表示形式
* @example
* // 将a.xx元素外面包裹一层div
* DOMUtils.wrap(document.querySelector("a.xx"),"<div></div>")
*/
wrap(element, wrapperHTML) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
element = element;
// 创建一个新的div元素，并将wrapperHTML作为其innerHTML
let wrapper = DOMUtilsCore.document.createElement("div");
wrapper.innerHTML = wrapperHTML;
let wrapperFirstChild = wrapper.firstChild;
// 将要包裹的元素插入目标元素前面
element.parentElement.insertBefore(wrapperFirstChild, element);
// 将要包裹的元素移动到wrapper中
wrapperFirstChild.appendChild(element);
}
prev(element) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
return element.previousElementSibling;
}
next(element) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
return element.nextElementSibling;
}
/**
* 取消挂载在window下的DOMUtils并返回DOMUtils
* @example
* let DOMUtils = window.DOMUtils.noConflict()
*/
noConflict() {
if (DOMUtilsCore.window.DOMUtils) {
DOMUtilsCommonUtils.delete(window, "DOMUtils");
}
DOMUtilsCore.window.DOMUtils = this;
return this;
}
siblings(element) {
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
return Array.from(element.parentElement
.children).filter((child) => child !== element);
}
/**
* 获取当前元素的父元素
* @param element 当前元素
* @returns 父元素
* @example
* // 获取a.xx元素的父元素
* DOMUtils.parent(document.querySelector("a.xx"))
* DOMUtils.parent("a.xx")
* > <div ...>....</div>
*/
parent(element) {
let DOMUtilsContext = this;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (element instanceof NodeList || element instanceof Array) {
element = element;
let resultArray = [];
element.forEach((eleItem) => {
resultArray.push(DOMUtilsContext.parent(eleItem));
});
return resultArray;
}
else {
return element.parentElement;
}
}
parseHTML(html, useParser = false, isComplete = false) {
function parseHTMLByDOMParser() {
let parser = new DOMParser();
if (isComplete) {
return parser.parseFromString(html, "text/html");
}
else {
return parser.parseFromString(html, "text/html").body.firstChild;
}
}
function parseHTMLByCreateDom() {
let tempDIV = DOMUtilsCore.document.createElement("div");
tempDIV.innerHTML = html;
if (isComplete) {
return tempDIV;
}
else {
return tempDIV.firstChild;
}
}
if (useParser) {
return parseHTMLByDOMParser();
}
else {
return parseHTMLByCreateDom();
}
}
/**
* 显示元素
* @param target 当前元素
* @example
* // 显示a.xx元素
* DOMUtils.show(document.querySelector("a.xx"))
* DOMUtils.show(document.querySelectorAll("a.xx"))
* DOMUtils.show("a.xx")
*/
show(target) {
let DOMUtilsContext = this;
if (target == null) {
return;
}
if (typeof target === "string") {
target = DOMUtilsCore.document.querySelectorAll(target);
}
if (target instanceof NodeList || target instanceof Array) {
target = target;
for (const element of target) {
DOMUtilsContext.show(element);
}
}
else {
target = target;
target.style.display = "";
if (!DOMUtilsCommonUtils.isShow(target)) {
/* 仍然是不显示，尝试使用强覆盖 */
target.style.setProperty("display", "unset", "important");
}
}
}
/**
* 隐藏元素
* @param target 当前元素
* @example
* // 隐藏a.xx元素
* DOMUtils.hide(document.querySelector("a.xx"))
* DOMUtils.hide(document.querySelectorAll("a.xx"))
* DOMUtils.hide("a.xx")
*/
hide(target) {
let DOMUtilsContext = this;
if (target == null) {
return;
}
if (typeof target === "string") {
target = DOMUtilsCore.document.querySelectorAll(target);
}
if (target instanceof NodeList || target instanceof Array) {
target = target;
for (const element of target) {
DOMUtilsContext.hide(element);
}
}
else {
target = target;
target.style.display = "none";
if (DOMUtilsCommonUtils.isShow(target)) {
/* 仍然是显示，尝试使用强覆盖 */
target.style.setProperty("display", "none", "important");
}
}
}
/**
* 淡入元素
* @param element 当前元素
* @param duration 动画持续时间（毫秒），默认400毫秒
* @param callback 动画结束的回调
* @example
* // 元素a.xx淡入
* DOMUtils.fadeIn(document.querySelector("a.xx"),2500,()=>{
* console.log("淡入完毕");
* })
* DOMUtils.fadeIn("a.xx",undefined,()=>{
* console.log("淡入完毕");
* })
*/
fadeIn(element, duration = 400, callback) {
if (element == null) {
return;
}
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
element = element;
element.style.opacity = "0";
element.style.display = "";
let start = null;
let timer = null;
function step(timestamp) {
if (!start)
start = timestamp;
let progress = timestamp - start;
element = element;
element.style.opacity = Math.min(progress / duration, 1).toString();
if (progress < duration) {
DOMUtilsCore.window.requestAnimationFrame(step);
}
else {
if (callback && typeof callback === "function") {
callback();
}
DOMUtilsCore.window.cancelAnimationFrame(timer);
}
}
timer = DOMUtilsCore.window.requestAnimationFrame(step);
}
/**
* 淡出元素
* @param element 当前元素
* @param duration 动画持续时间（毫秒），默认400毫秒
* @param callback 动画结束的回调
* @example
* // 元素a.xx淡出
* DOMUtils.fadeOut(document.querySelector("a.xx"),2500,()=>{
* console.log("淡出完毕");
* })
* DOMUtils.fadeOut("a.xx",undefined,()=>{
* console.log("淡出完毕");
* })
*/
fadeOut(element, duration = 400, callback) {
if (element == null) {
return;
}
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
element = element;
element.style.opacity = "1";
let start = null;
let timer = null;
function step(timestamp) {
if (!start)
start = timestamp;
let progress = timestamp - start;
element = element;
element.style.opacity = Math.max(1 - progress / duration, 0).toString();
if (progress < duration) {
DOMUtilsCore.window.requestAnimationFrame(step);
}
else {
element.style.display = "none";
if (typeof callback === "function") {
callback();
}
DOMUtilsCore.window.cancelAnimationFrame(timer);
}
}
timer = DOMUtilsCore.window.requestAnimationFrame(step);
}
/**
* 切换元素的显示和隐藏状态
* @param element 当前元素
* @example
* // 如果元素a.xx当前是隐藏，则显示，如果是显示，则隐藏
* DOMUtils.toggle(document.querySelector("a.xx"))
* DOMUtils.toggle("a.xx")
*/
toggle(element) {
let DOMUtilsContext = this;
if (typeof element === "string") {
element = DOMUtilsCore.document.querySelector(element);
}
if (element == null) {
return;
}
if (getComputedStyle(element).getPropertyValue("display") === "none") {
DOMUtilsContext.show(element);
}
else {
DOMUtilsContext.hide(element);
}
}
/**
* 创建一个新的DOMUtils实例
* @param option
* @returns
*/
createDOMUtils(option) {
return new DOMUtils(option);
}
}
let domUtils = new DOMUtils();
return domUtils;
}));
//# sourceMappingURL=index.umd.js.map