自定义属性;
获取固有属性值
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码