2.JavaScript 学习笔记

自定义属性；

获取固有属性值

console.log(div.id);

获取自定义属性值

console.log(div.getAttribute('index'));

设置自定义属性值

div.setAttribute('index',1)

移除属性值

div.removeAttribute('index');

节点操作：

node.parentNode 返回最近父节点
node.children 返回所有子节点 ；数组对象
parent.firstChild
parent.lastChild
parent.firstElementChild
parent.lastElementChild

兄弟节点

div.nextSibling 下一个兄弟节点
div.previousSibling 上一个兄弟节点

创建新节点
document.createElement('div');
添加节点
node.appendChild(node);
插入指定位置节点
node.insertBefore(newChild,指定元素)


删除节点
node.removeChild();

克隆节点 true深拷贝，复制内部的节点，false 浅拷贝，不复制内部节点
node.cloneNode(true/false);

DOM 核心总结

1.创建
	document.write()
	innerHTML
	createElement()
2.添加节点
	appendChild()
	insertBefore
3.删除节点
	removeChild()

事件高级

添加事件
1.addEventListener（IE9 以后）
2.attacheEvent（event,callback）事件要带on

解绑事件
 divs[1].removeEventListener('click', fn);
 divs[0].onclick = null;

DOM事件流

 1.捕获阶段  从外部到内部传递事件
 2.当前阶段
 3.冒泡阶段  从内部到外部传递事件

注意：addEventListener（type,listener,usercapture）关注冒泡阶段
第三个参数：
	true:捕获阶段调用
	false:冒泡阶段调用，也是默认

阻止事件冒泡；
	e.stopPropagation()
	e.cancelBubble = true;


// 1. contextmenu 我们可以禁用右键菜单
	document.addEventListener('contextmenu', function(e) {
		e.preventDefault();
})
// 2. 禁止选中文字 selectstart
	document.addEventListener('selectstart', function(e) {
	e.preventDefault();
})	

常用事件

事件	说明
onclick	鼠标点击
onmouseover	鼠标经过
onmouseout	鼠标离开
onfoucs	获取焦点
onblur	失去焦点
onmousemove	鼠标移动
onmouseup	鼠标抬起
onmousedown	鼠标按下

鼠标事件对象

鼠标事件对象	说明
e.clientX	获取鼠标在可视区X坐标
e.clientY	获取鼠标在可视区Y坐标
e.pageX	获取鼠标在文档中X坐标 IE9
e.pageY	获取鼠标在文档中Y坐标
e.screenX	获取鼠标在电脑屏幕X坐标
e.screenY	获取鼠标在电脑屏幕Y坐标

键盘事件

onkeydown
onkeyup 
onkeypress 类似down 不识别左右箭头 shift
三个事件的顺序 down-->press-->up
keycode 键盘字母的code码