博客

获取dom节点

	document.getElementById(); // 根据id属性获取节点
	document.getElementById('input'); // 获取id属性为input的节点
	
	document.getElementsByName(); // 根据name属性获取节点
	document.getELementsByName('form'); // 获取name属性为form的节点
	
	document.getElementsByTagName(); // 根据标签名获取节点
	element.getElementsByName(); // 根据标签名获取element下的节点
	document.getElementsByTagName('p'); // 获取p标签节点
	
	document.getELementsByClassName(); // 根据类名获取节点，不兼容IE8及以下
	element.getElementsByName(); // 根据类名获取element下的节点，不兼容IE8及以下
	document.getELementsByClassName('header'); // 获取class为header的节点
	
	document.querySelector(); // 根据指定css选择器，获取匹配到的第一个节点，不兼容IE8及以下
	document.querySelectorAll(); // 根据指定css选择器，获取匹配到的所有节点，不兼容IE8及以下
	element.querySelector(); // 根据指定css选择器，获取element节点下匹配到的第一个节点，不兼容IE8及以下
	element.querySelectorAll(); // 根据指定css选择器，获取获取element节点下匹配到的所有节点，不兼容IE8及以下
	
	document.querySelectorAll('#input'); // 获取id为input的节点
	document.querySelectorAll('.header'); // 获取class为header的节点
	document.querySelectorAll('p'); // 获取所有p标签节点
	document.querySelectorAll('.header div'); // 获取id为header下的所有div节点	

操作dom节点

	document.createElement(label); // 创建一个新节点
	element.cloneNode(deep); // 克隆节点，deep为true时递归克隆该节点及其子节点，否则只克隆该节点
	element.appendChild(node); // 向节点添加一个子节点
	element.insertBefore(newNode, existingnode); // 向某个子节点之前插入一个新的子节点
	element.removeChild(node); // 删除某一个子节点
	element.replaceChild(newNode, oldNode); // 替换某一个子节点
	
	const divDom = document.createElement('div'); // 创建一个div节点
	const buttonDom = document.createElement('button'); // 创建一个button节点
	const cloneBtn = buttonDom.cloneNode(true); // 克隆buttonDOm节点
	
	divDom.appendChild(buttonDom); // 向divDom节点添加一个buttonDom子节点
	divDom.insertBefore(cloneBtn, divDom.firstChild); // 向divDom的第一个子节点之前插入cloneBtn节点
	divDom.removeChild(buttonDom); // 删除divDom下的buttonDom节点
	divDom.replaceChild(buttonDom, cloneBtn); // cloneBtn节点替换成buttonDom节点
	buttonDom.parentNode.appendChild(cloneBtn); // buttonDom节点同级添加cloneBtn节点

源生事件 – 绑定、解除事件

	/**
	*	绑定事件
	*	e {string} 必须。事件名称，不要使用 "on" 前缀。例如使用 "click" ,而不是使用 "onclick"。
	*	fn {fcuntion} 必须。指定要事件触发时执行的函数。
	*	useCapture {boolean} 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
	**/
	element.addEventListener(e, fn, useCapture);
	
	/**l
	*	解除事件
	*	e 同addEventListener
	*	fn {fcuntion} 必须。指定要移除的函数。
	*	useCapture 同addEventListener
	**/
	element.removeEventListener(e, fn, useCapture)
	
	const clickFn = () => { console.log('click myBtn!'); }
	document.getElementById("myBtn").addEventListener("click", clickFn); // 绑定click事件
	document.getElementById("myBtn").removeEventListener("click", clickFn); // 解除click事件

具体事件名请参考：HTML DOM 事件

源生事件 – 事件派送

	// 绑定自定义事件
	document.addEventListener('custom', (e) => { console.log(e.type) });
	// 创建新的 Event 对象，类型为HTMLEvents
	const customEvent = document.createEvent('HTMLEvents');
	// 初始化新事件对象的属性：事件的类型、是否可以冒泡、是否可以用 preventDefault() 方法取消事件。
	customEvent.initEvent('custom', true, true);
	// 派送custom事件
	document.dispatchEvent(customEvent);
	// 输出结果：custom

那么由事件派送延伸出来的，假设这么写：

	/**
	*	添加事件绑定
	*	type {string} 绑定事件类型
	*	backFn {function} 事件触发时回调函数
	*/
	window.addListener = (type, backFn) => {
	    document.addEventListener(type, backFn);
	}
	
	/**
	*	解除事件绑定
	*	type {string} 绑定事件类型
	*	backFn {function} 事件触发时回调函数
	*/
	window.removeListener = (type, backFn) => {
	    document.removeEventListener(type, backFn);
	}
	
	/**
	*	触发事件
	*	type {string} 绑定事件类型
	*	backFn {function} 事件触发时回调函数
	*/
	window.dispatch = (type, data) => {
	    const customEvent = document.createEvent('HTMLEvents');
	    customEvent.initEvent(type, true, true);
	    // 传入data参数
	    customEvent.data = data;
	    document.dispatchEvent(customEvent);
	}
	
	// A.JS
	const customFn1 = (e) => {
	    console.log('A', e.data);
	    removeListener('custom', customFn1); // 执行后解除事件
	}
	addListener('custom', customFn1);
	
	// B.JS
	const customFn2 = (e) => {
	    console.log('B', e.data);
	}
	addListener('custom', customFn2);
	
	// C.JS
	dispatch('custom', 'hello，my friend！');
	dispatch('custom', 'hi，man！');
	
	// 输出结果： 
	// A hello，my friend！
	// B hello，my friend！
	// B hi，man！

这就是延伸出来的事件发布订阅模式。

PS：关于发布订阅模式，可以参考此文章：《javascript 发布订阅模式》