The react and Vue frameworks have evolved to use data-driven operations instead of DOM operations, but that doesn’t mean dom isn’t important. It may also be used in vue custom directives, vue3’s Composition API, and custom React hooks. The following document encapsulates some DOM related utility class functions.

Gets the child nodes of the element

Function elemChildren(node) {var temp = {length: 0, push: array.prototype. Push, splice: Array.prototype.splice } var children = node.childNodes, len = children.length item for (var i = 0; i < len; If (item.nodeType === = 1) {item.push(item)} return temp}Copy the code

Find the NTH parent node of the element

function elemParent(node, n) { var type = typeof n if (type === 'undefined') { return node.parentNode } else if (n <= 0 || type ! == 'number') { return undefined } while(n) { node = node.parentNode n-- } return node }Copy the code

Encapsulate scrollbar distance

function getScrollOffset() {
    if (window.pageXOffset) {
        return {
            left: window.pageXOffset,
            top: window.pageYOffset
        }
     } else {
         return {
             left: document.body.scrollLeft + document.documentElement.scrollLeft,
             top: document.body.scrollTop + document.documentElement.scrollTop
         }
     }
}
Copy the code

Encapsulated document height

function getScrollSize() {
    if (document.body.scrollHeight) {
        return {
            width: document.body.scrollWidth,
            height: document.body.scrollHeight
        } else {
            return {
              width: document.documentElement.scrollWidth,
              height: document.documentElement.scrollHeight
            }
        }
    }
}
Copy the code

Encapsulated visual area

Function getViewportSize() {if (window.innerwidth) {return {width: window.innerwidth, height: window.innerHeight, }; } else {the if (document.com atMode = = = 'BackCompat') {/ * weird mode browsers but the size of the document. The body. The clientWidth; */ return { width: document.body.clientWidth, height: document.body.clientHeight, }; } else {/ * * standard mode of browser but size/return {width: the document. The documentElement. ClientWidth, height: document.documentElement.clientHeight, }; }}}Copy the code

Locate the element relative to the document

Function getElemDocPostion(el) {/* offsetLeft/offsetTop; Returns the node element, if not, body */ var parent = el.offsetParent, offsetLeft = el.offsetLeft, OffsetTop = el.offsetTop while (parent) {/* Document position -> element position relative to parent + parent position relative to parent +... */ offsetLeft += parent.offsetLeft offsetTop += parent.offsetTop parent = parent.offsetParent } return { left: offsetLeft, top: offsetTop, } }Copy the code

Access element evaluation styles

Function getStyles (elem, prop) {/* getComputedStyle Reads the final style, including inline, embedded, and external styles. */ if (window.getComputedStyle) { if (prop) { return window.getComputedStyle(elem, Null)[prop]} else {return window.getComputedStyle(ELEm, null)}} else {/* IE8 and below do not support getComputedStyle, Elem.currentstyle */ if (prop) {return elem.currentStyle[prop]} else {return elem.currentStyle}}}Copy the code

Adding event binding

function addEvent(el, type, fn) { if (el.addEventListener) { el.addEventListener(type, fn, false) } else if (el.attachEvent) { el.attachEvent('on' + type, Function () {/ / fn. Call (el)})} else {/ / el['on' + type] = fn}}Copy the code

Remove event binding

function removeEvent(el, type, fn) { if (el.addEventListener) { el.removeEventListener(type, fn, false) } else if (el.attachEvent) { el.detachEvent('on' + type, */ el['on' + type] = null} */ el['on' + type] = null}Copy the code

Cancel event bubbling

function cancelBubble(e) { var e = e || window.event if (e.stopPropagation) { /* event.stopPropagation : Prevents further propagation of current events in the capture and bubble phases. */ e.sectopPropagation ()} else {/* cancelBubble = true}Copy the code

Blocking default events

Function preventDefaultEvent (e) {var e = e | | window. The event / * e.p reventDefault (ie 9) are not compatible, ie 9 below need to use "e.r eturnValue = false */ if (e.preventDefault) { event.preventDefault() } else { event.returnValue = false } }Copy the code

Calculate the distance from the mouse to the document

function pagePos(e) { var sLeft = getScrollOffset().left, sTop = getScrollOffset().top, / * document. DocumentElement. ClientLeft may have values in some browsers (Internet explorer), but generally is undefined or 0 * / cLeft = document. The documentElement. ClientLeft  || 0, cTop = document.documentElement.clientTop || 0; return { X: e.clientX + sLeft - cLeft, Y: e.clientY + sTop - cTop, } }Copy the code

Drag and drop elements

function elemDrag(elem) { var x, y; /* getstyles(box, 'left'), getstyles(box, X pagePos(e).Y is the distance between the mouse and the document X, and Y is the distance between the mouse and the element. This ensures that the relative coordinates of the selected element remain unchanged */ addEvent(elem, 'mousedown', function (e) { var e = e || window.event x = pagePos(e).X - parseInt(getstyles(elem, 'left')) y = pagePos(e).Y - parseInt(getstyles(elem, 'top')) h = parseInt(getstyles(elem, 'height') w = parseInt(getStyles (elem, 'width') /* Document.onmousemove and document.onmouseup are used here because moving the mouse too fast will remove elements, */ addEvent(document, 'mousemove', mousemove); /* addEvent(document, 'mouseup', mouseup); }) function mouseMove(e) { var e = e || window.event, eX = pagePos(e).X - x, eY = pagePos(e).Y - y if (eX <= 0) { elem.style.left = '0px' } else if (eX >= getViewportSize().width - w) { elem.style.right = '0px' } else { elem.style.left = pagePos(e).X - x + 'px' } if (eY <= 0) { elem.style.top = '0px' } else if (eY >= getViewportSize().height - h) { elem.style.bottom = '0px' } else { elem.style.top = pagePos(e).Y - y + 'px' } } function mouseUp(e) { var e = e || window.event removeEvent(document, 'mousemove', mouseMove) removeEvent(document, 'mouseup', mouseUp) } }Copy the code