dom的操作方法

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(捕获)