js 常用的dom操作及源生事件

获取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节点

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

	/**
	*	绑定事件
	*	event {string} 必须。事件名称，不要使用 "on" 前缀。例如使用 "click" ,而不是使用 "onclick"。
	*	function {fcuntion} 必须。指定要事件触发时执行的函数。
	*	useCapture {boolean} 可选。布尔值，指定事件是否在捕获或冒泡阶段执行。
	**/
	element.addEventListener(event, function, useCapture)；
	
	/**l
	*	解除事件
	*	event 同addEventListener
	*	function {fcuntion} 必须。指定要移除的函数。
	*	useCapture 同addEventListener
	**/
	element.removeEventListener(event, function, 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！

这就是延伸出来简单的事件广播与侦听模式