操作处理dom相关的方法在react和vue框架生态发展起来后很少用到的，用数据驱动代替dom操作，但并不表示dom不重要。在vue自定义指令，vue3的composition api以及自定义的react hooks中或许还得使用到。下面记录封装一些dom相关的工具类函数。
获取元素的子节点
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; i++) {
item = childen[i]
// 只需返回元素节点，忽略其它节点
if (item.nodeType === 1) {
item.push(item)
}
return temp
}
复制代码寻找元素第n层父节点
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
}
复制代码封装滚动条距离
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
}
}
}
复制代码封装文档高度
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
}
}
}
}
复制代码封装可视区域
function getViewportSize() {
if (window.innerWidth) {
/* 常规判断浏览器可视尺寸 */
return {
width: window.innerWidth,
height: window.innerHeight,
};
} else {
if (document.comatMode === 'BackCompat') {
/* 怪异模式下浏览器的可是尺寸document.body.clientWidth; */
return {
width: document.body.clientWidth,
height: document.body.clientHeight,
};
} else {
/* 标准模式下的浏览器可是尺寸 */
return {
width: document.documentElement.clientWidth,
height: document.documentElement.clientHeight,
};
}
}
}
复制代码找到元素相对于文档定位
function getElemDocPostion(el) {
/* offsetLeft/offsetTop 相对于有定位的元素父级来计算,直到找到有定位的父级, 如果找不到就是body offsetParent 找有定位的父级, 返回节点元素, 如果没有, 就返回body */
var parent = el.offsetParent,
offsetLeft = el.offsetLeft,
offsetTop = el.offsetTop
while (parent) {
/* 相对文档定位-> 元素相对父级元素位置 + 父级元素相对父级元素位置 + ... */
offsetLeft += parent.offsetLeft
offsetTop += parent.offsetTop
parent = parent.offsetParent
}
return {
left: offsetLeft,
top: offsetTop,
}
}
复制代码访问元素计算样式
function getstyles(elem, prop) {
/* getComputedStyle 读取的样式是最终样式，包括了内联样式、嵌入样式和外部样式。 */
if (window.getComputedStyle) {
if (prop) {
return window.getComputedStyle(elem, null)[prop]
} else {
return window.getComputedStyle(elem, null)
}
} else {
/* IE8及以下不支持getComputedStyle， 需要使用elem.currentStyle */
if (prop) {
return elem.currentStyle[prop]
} else {
return elem.currentStyle
}
}
}
复制代码增加事件绑定
function addEvent(el, type, fn) {
if (el.addEventListener) {
el.addEventListener(type, fn, false)
} else if (el.attachEvent) {
el.attachEvent('on' + type, function () {
/* 指向fn函数本身 */
fn.call(el)
})
} else {
/* 句柄写法的兼容性是最好的,如果都不兼容了就要用句柄了 */
el['on' + type] = fn
}
}
复制代码移除事件绑定
function removeEvent(el, type, fn) {
if (el.addEventListener) {
el.removeEventListener(type, fn, false)
} else if (el.attachEvent) {
el.detachEvent('on' + type, fn)
} else {
/* 句柄写法的兼容性是最好的,如果都不兼容了就要用句柄了 */
el['on' + type] = null
}
}
复制代码取消事件冒泡
function cancelBubble(e) {
var e = e || window.event
if (e.stopPropagation) {
/* event.stopPropagation :阻止捕获和冒泡阶段中当前事件的进一步传播。IE8及以下不支持*/
e.stopPropagation()
} else {
/* IE8及以下需要使用cancelBubble */
e.cancelBubble = true
}
}
复制代码阻止默认事件
function preventDefaultEvent(e) {
var e = e || window.event
/* e.preventDefault()IE9不兼容,IE9以下需要使用e.returnValue = false */
if (e.preventDefault) {
event.preventDefault()
} else {
event.returnValue = false
}
}
复制代码计算鼠标至文档的距离
function pagePos(e) {
var sLeft = getScrollOffset().left,
sTop = getScrollOffset().top,
/* document.documentElement.clientLeft在某些浏览器中可能有值(IE8),不过通常来说是undefined或0 */
cLeft = document.documentElement.clientLeft || 0,
cTop = document.documentElement.clientTop || 0;
return {
X: e.clientX + sLeft - cLeft,
Y: e.clientY + sTop - cTop,
}
}
复制代码拖拽元素
function elemDrag(elem) {
var x, y;
/*
getstyles(box, 'left'), getstyles(box, 'top') 是元素距离文档的距离
pagePos(e).X pagePos(e).Y 是鼠标距离文档的距离
x,y 是鼠标距离元素的距离
这样可以保证拖拽的时候鼠标在选中元素时候的相对坐标不变
*/
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 和 document.onmouseup
因为在鼠标移动速度过快的时候会移出元素,
当移出元素的时候, 事件就不在元素上了,函数也就不会继续执行*/
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)
}
}
复制代码