js原生dom

一. 选择器

1. getElementsByclassName()
2. getElementByTagName()
3. getElementById()

二. js事件

1. 自定义事件

• addEventListener(事件,方法,是否冒泡)
• removeEventListener(事件,方法,是否冒泡)

2. 阻止事件冒泡和捕获

• stopPropagation()

3. 阻止浏览器默认行为

• preventDefault()
  如：点击链接跳转、右击菜单、表单自动提交

4. 特殊的 return false

• event.preventDefault() – 它停止浏览器的默认行为。
• event.stopPropagation() – 它阻止事件传播（或“冒泡”）DOM。
• 停止回调执行并立即返回

三. dom基本方法加实例

1. 创建dom

let para=createElement("p")
let node=createTextNode("内容")
para.appendChild(node) //将node节点加入到p标签中
//获取dom的父元素
let parent=para.parentNode
//移除节点
para.remove(boolen)  //true 包含后代一起移除，false 反之
//克隆节点
para1=para.cloneNode()
//新节点替换老节点
para.replaceChild(para1,para)
//将节点添加为另一个节点的子节点
parent.appendChild(子节点)
//为节点添加样式
para.style.backgroundColor="#fff"
para.style.display="block"
//另一种添加样式的方法
el.style.cssText = 'border-left: 1px; border-right: 2px; padding: 5px;';
//获取包含本事件的dom
let dom1=e.currentTarget
//获取该事件相对于窗口的位置
let offsetleft=dom1.offsetWidth  //内容+padding+border
let offsettop=dom1.offsetHeight
或///
let offsetleft=dom1.clientWidth  //内容+padding
let offsettop=dom1.clientHeight
//获取某个节点的相对于窗口的位置
let left1=para.clientWidth