dom的获取
- document.getElementById(‘id’)
- document.getElementsByClassName(‘class’)
- document.getElementsByTagName(‘tag’)
- document.getElementsByName(‘name属性’)
- document.querySelect(‘选择器’)
- document.querySelectAll(‘选择器’)
节点类型nodeType
标签:1 ,属性:2,文本:3
获取相邻的,或父子级的dom
- 下一个元素 :
nextSibling,nextElementSibling(不包含文本节点) - 上一个元素:
previousSibling,previousElementSibling(不包含文本节点) - 父元素:
parentNode - 子元素:
childNodes,children(不包含文本节点)
增删改查
- 创建元素:
document.createElement('tag') - 添加dom元素:
在父元素的最后添加document.body.append('tag')
在父元素的中间插入document.body.insertBefore('要插入的标签','在谁之前') - 删除元素:
在父元素中删除子元素:parent.removeChild(tag)
直接删除元素本身:item.remove() - 克隆元素:
tag.cloneNode(Boolean)默认参数为false,不拷贝子节点 - 获取自身属性:
dom.style.prop - 设置自定义属性:
dom.setAttribute("prop","value") - 获取自定义属性:
dom.getAttribute("prop") - 获取页面最终显示样式:
getComputedStyle(tag).prop
冒泡与捕获
- 冒泡:事件由内向外传播
- 捕获:事件由外向内传播
解决冒泡
event.stopPropagation()IEwindow.event,cancelBubble=true
浏览器默认事件
例:在form中按回车键就会提交表单;单击鼠标右键就会弹出context menu.
解决办法
event.preventDefault();IEwindow.event.returnValue = false;retrun false;
dom注册事件的几种方法
1、标签上直接绑定
<button onclick="aaa()">按钮<button>
2、获取dom,调取事件
document.getElement(id).onclick=function(){}
3、addEventListener绑定事件
dom.addEventListener('click',function(){},Boolean) 默认false(冒泡),true(捕获)