20251222

AdminPanel/plugins/utils/dom/dom.js

@@ -0,0 +1,313 @@
+/**
+ * 简单版对dom的封装
+ * 初始化一个myDom对象
+ * 通过类、id、以及dom元素创建
+ * 可以获取所有子节点、父节点、第一个子节点、最后一个子节点、上一个兄弟节点、下一个兄弟节点
+ * 判断元素类型
+ * 获取文本
+ * 获取元素的坐标、宽高
+ * 设置元素的坐标、宽高
+ * 设置样式
+ * 复制元素
+ * 返回真正的dom元素
+ * 获取所有父亲节点
+ * 获取指定类型的父节点
+ * 获取所有子节点
+ * 获取自定类型的子节点
+ */
+
+/**
+ * 获取dom元素
+ * @param {*} 参数 ,可以接受dom元素或者id(id必须带#号)
+ */
+export function $(el) {
+    //id选择器
+    if (typeof el == 'object') {
+        return new Dom(el);
+    } else if (typeof el == 'string') {
+        let dom = document.getElementById(el);
+        return dom ? new Dom(dom) : null;
+    } else {
+        console.warn(`Dom：传入的字符串不符合要求${el}`);
+    }
+
+    return null;
+}
+
+export class Dom {
+    constructor(el) {
+        this._el = el;
+    }
+    /**
+     * 获取元素内的所有文本内容
+     */
+    getTexts() {
+        let result = [];
+        const callback = (el) => {
+            let arr = [...el.childNodes];
+            arr.filter(item => item.nodeType == 3).forEach(item => result.push(item.nodeValue))
+            arr.filter(item => item.nodeType == 1).forEach(item => callback(item));//遍历所有元素的子节点
+        }
+        callback(this._el);
+        return result;
+    }
+
+    /**
+     * 获取标签内第一个文本，没有返回空
+     * @returns 
+     */
+    getText() {
+        let texts = this.getTexts();
+        return texts.length > 0 ? texts[0] : ''
+    }
+
+    /**
+     * 获取元素的高
+     */
+    getHeight() {
+        return this._el.offsetHeight;
+    }
+
+    /**
+     * 获取元素的宽
+     */
+    getWidth() {
+        return this._el.offsetWidth;
+    }
+
+    get left() {
+        return this.getLeft();
+    }
+
+    get top() {
+        return this.getTop();
+    }
+
+    get width() {
+        return this._el.offsetWidth;
+    }
+
+    get height() {
+        return this._el.offsetHeight;
+    }
+
+    get bottom() {
+        return this.top + this.height;
+    }
+
+    get right() {
+        return this.left + this.width;
+    }
+
+    /**
+     * 获取元素的left坐标
+     */
+    getLeft() {
+        const callback = (e) => {
+            return e.offsetParent != null ? e.offsetLeft + callback(e.offsetParent) : e.offsetLeft
+        }
+        return callback(this._el)
+    }
+
+    /**
+     * 获取元素的顶点坐标
+     */
+    getTop() {
+        const callback = (e) => {
+            return e.offsetParent != null ? e.offsetTop + callback(e.offsetParent) : e.offsetTop
+        }
+        return callback(this._el)
+    }
+
+    /**
+     * 获取坐标，包含4个点以及宽高
+     * @returns 
+     */
+    getPosition() {
+        return {
+            left: this.getLeft(),
+            top: this.getTop(),
+        }
+    }
+
+    /**
+     * 设置样式，直接合并css的样式对象
+     * @param {*} option 
+     */
+    setStyle(option) {
+        Object.assign(this._el.style, option);
+    }
+
+    addUnit(val, unit = 'px') {
+        // return unit ? val + unit : val;
+        return val + unit;
+    }
+
+    /**
+     * 设置坐标
+     * @param {*} val 左坐标位置
+     * @param {*} unit 默认单位为px，如果不用则，需要传递null
+     */
+    setLeft(val, unit = 'px') {
+        this.setStyle({ left: this.addUnit(val, unit) })
+    }
+
+    /**
+     * 设置顶坐标
+     * @param {*} val 
+     * @param {*} unit 
+     */
+    setTop(val, unit = 'px') {
+        this.setStyle({ top: this.addUnit(val, unit) })
+    }
+
+    /**
+     * 设置宽度
+     * @param {*} val 
+     * @param {*} unit 
+     */
+    setWidth(val, unit = 'px') {
+        this.setStyle({ width: this.addUnit(val, unit) })
+    }
+
+    setHeight(val, unit = 'px') {
+        this.setStyle({ height: this.addUnit(val, unit) })
+    }
+
+    setSize(width, height, unit = 'px') {
+        this.setStyle({
+            width: this.addUnit(width, unit),
+            height: this.addUnit(height, unit),
+        })
+    }
+
+    /**
+     * 设置元素位置
+     * @param {*} left 
+     * @param {*} top 
+     * @param {*} unit 单位，默认为px
+     */
+    setPosition(left, top, unit = 'px') {
+        this.setStyle({
+            left: this.addUnit(left, unit),
+            top: this.addUnit(top, unit)
+        })
+    }
+
+    /**
+     * 克隆元素
+     * @param {*} deep 
+     * @returns 
+     */
+    clone(deep = true) {
+        let el = this._el.cloneNode(deep);//克隆元素
+        return new Dom(el);
+    }
+
+    /**
+     * 移除元素
+     */
+    remove() {
+        this._el.remove();
+    }
+
+    /**
+     * 返回原本的dom元素
+     * @returns 
+     */
+    getElement() {
+        return this._el;
+    }
+
+    /**
+     * 获取封装一层的子元素
+     */
+    childNodes() {
+        return [...this._el.childNodes].map(item => new Dom(item))
+    }
+
+    parentNode() {
+        return new Dom(this._el.parentNode)
+    }
+
+    firstChild() {
+        return new Dom(this._el.firstChild);
+    }
+
+    lastChild() {
+        return new Dom(this._el.lastChild)
+    }
+
+    nextSibling() {
+        return new Dom(this._el.nextSibling)
+    }
+
+    previousSibling() {
+        return new Dom(this._el.previousSibling)
+    }
+
+    /**
+     * 是否是标签元素
+     * @returns 
+     */
+    isElement() {
+        return this._el.nodeType == 1;
+    }
+
+    /**
+     * 获取第一个指定标签的元素
+     * @param {*} name 标签名字
+     */
+    firstParentByName(name) {
+        name = name.toUpperCase();//转大写
+        const callback = (el) => {
+            let parent = el.parentNode;
+            if (parent.nodeName == 'BODY')
+                return null;
+
+            if (parent.nodeName == name)
+                return new Dom(parent)
+            return callback(parent);
+        }
+
+        return callback(this._el);
+    }
+
+    firstChildByName(name) {
+        name = name.toUpperCase();//转大写
+        const callback = (el) => {
+            let childs = el.childNodes;
+            if (childs.length == 0)
+                return null;
+
+            for (let i = 0; i < childs.length; i++) {
+                const item = childs[i];
+                if (item.nodeName == name)
+                    return new Dom(item)
+            }
+
+            for (let i = 0; i < childs.length; i++) {
+                const item = childs[i];
+                if (item.childNodes.length > 0)
+                    return callback(item)
+            }
+            return null;
+        }
+
+        return callback(this._el);
+    }
+
+    getNodeName() {
+        return this._el.nodeName;
+    }
+
+    /**
+     * 全选
+     */
+    select() {
+
+        // console.log(this._el);
+        this._el.focus();
+        this._el.select();
+    }
+}