Dom元素常用操作(代码封装)

dom：文档对象模型（Document Object Model，简称 DOM），是 W3C 组织推荐的处理可扩展标记语言（html或者XML）的标准编程接口。 W3C 已经定义了一系列的 DOM 接口，通过这些 DOM 接口可以改变网页的内容、结构和样式。

文档：一个页面就是一个文档，DOM 中使用 document 表示
元素：页面中的所有标签都是元素，DOM 中使用 element 表示
节点：网页中的所有内容都是节点（标签、属性、文本、注释等），DOM 中使用 node 表示

代码如下：

const dom = {
	$: function(selector) {
		let type = selector.substring(0, 1)
		if (type === '#') {
			if (document.querySelecotor) return document.querySelector(selector)
			return document.getElementById(selector.substring(1))
		} else if (type === '.') {
			if (document.querySelecotorAll) return document.querySelectorAll(selector)
			return document.getElementsByClassName(selector.substring(1))
		} else {
			return document['querySelectorAll' ? 'querySelectorAll' : 'getElementsByTagName'](selector)
		}
	},
	hasClass: function(ele, name) {/* 检测类名 */
		return ele.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'))
	},
	addClass: function(ele, name) {/* 添加类名 */
		if (!this.hasClass(ele, name)) ele.className += ' ' + name
	},
	removeClass: function(ele, name) {/* 删除类名 */
		if (this.hasClass(ele, name)) {
			let reg = new RegExp('(\\s|^)' + name + '(\\s|$)')
			ele.className = ele.className.replace(reg, '')
		}
	},
	replaceClass: function(ele, newName, oldName) {/* 替换类名 */	
		this.removeClass(ele, oldName)
		this.addClass(ele, newName)
	},
	siblings: function(ele) {/* 获取兄弟节点 */
		let chid = ele.parentNode.children,
			eleMatch = []
		for (let i = 0, len = chid.length; i < len; i++) {
			if (chid[i] !== ele) {
				eleMatch.push(chid[i])
			}
		}
		return eleMatch
	},
	getByStyle: function(obj, name) {/* 获取行间样式属性 */
		if (obj.currentStyle) {
			return obj.currentStyle[name]
		} else {
			return getComputedStyle(obj, false)[name]
		}
	},
	domToStirng: function(htmlDOM) {/* DOM转字符串 */
		let div = document.createElement('div')
		div.appendChild(htmlDOM)
		return div.innerHTML
	},
	stringToDom: function(htmlString) {/* 字符串转DOM */
		let div = document.createElement('div')
		div.innerHTML = htmlString
		return div.children[0]
	},
};

链接: https://fly63.com/course/34_1641