获取元素

4个动态获取
document.getElementsByClassName("") // 根据类名称获取，返回的是集合
document.getElementsByName("") // 返回的是集合
document.getElementById("") // 根据类名称获取 返回的是单个对象
document.getElementsByTagName("") //根据标签名获取 返回的集合
document.querySelector("")//参数是css选择器还可以是标签名 返回第一个单个对象
document.querySelectorAll("") //参数是css选择器还可以是标签名 返回的集合

document.body   //获取body元素
document.documentElement  //获取html元素的

改变元素内容

element.innerText 从起始位置到终止位置的内容 但它去除html标签 ，同时空格和换行也会去掉
element.innerHTML 从起始位置到终止位置的内容 包含所有
表单里面的值 文字内容是通过value来修改的
element.style 行内样式操作 产生的是行内样式 权重较高
element.className 类名称操作

自定义属性的操作

获取属性值
element.属性 获取元素内置本身就有属性值
element.getAttribute(“属性”)；主要获取自定义属性
设置属性值
element.属性=“值” 设置内置属性值
element.setAttribute(“属性”，“值”)；主要设置自定义属性
ele.classList.add(“btninfo”); 给元素添加类
ele.classList.remove(“btn”); 移除类
ele.classList.toggle(“btn”,false);toggle 方法是类别的切换 根据第二个参数 true 添加 false 删除
document.body.appendChild(ele); appendChild 追加到当前元素的内容之后

节点操作

节点类型
元素节点 nodeType为1
属性节点 nodeType为2
文本节点 nodetype为3
父级节点
node.parentNode 返回某个节点的父节点 返回的是最近的一个父节点
如果指定节点没有父节点则返回null
子节点
parentNode.childNodes 返回包含指定节点的子节点的集合 包含元素节点 文本节点等 一般不提倡使用
parentNode.children 返回所有元素的子元素节点其余节点不返回
parentNode.firstChild 返回第一个子节点 包含所有节点 lastChild 返回最后一个子节点
firstElementChild 返回第一个子元素节点 lastElementChild 返回最后一个子元素节点
兄弟节点
nextSibling 返回当前元素的下一个兄弟节点 previousSibling 返回当前元素的上一个兄弟节点
nextElementSibling 返回当前元素的下一个兄弟元素节点 previousElementSibling 返回当前元素的上一个兄弟元素节点
创建节点
document.creatElement(“tagName”) 创建由tagName 指定的HTML元素 动态创建元素节点
添加节点
创建完节点要进行追加
父元素.appendChild(子元素); 将一个节点添加到指定父节点的子节点列表的末尾
父元素insertBefore（child,指定元素）将一个节点添加到父节点的指定节点前面
删除节点
父元素.removeChild（child）删除父元素中的一个子节点
ul.removeChild(ul.children[0])
复制节点
node.cloneNode()； 如果括号理参数为空或者false 浅拷贝 克隆节点本身不克隆里面的子节点
如果为true 深度拷贝 复制节点本身和里面所有子节点
三种动态创建元素的区别
document.write() 是直接写入内容的内容流 但文档流执行完毕 会进行页面重绘
innner.HTML将内容写入某个DOM节点 不会导致页面重绘
document.createElement()结构更清晰

事件操作

事件 属于对象的被动行为主动行为 称方法 被动的行为称事件
鼠标事件： mouseover mouseup mousedown click dbclick mouseleave mouseout mousemove mouseenter mousewheel（滚轮）
键盘事件：keypress keydown keyup
表单事件：focus blur submit change input(获取用户输入事件)
浏览器事件 scroll load error resize contentmenu(右键打开浏览器菜单)
剪贴版事件 cut（剪贴） copy（复制） paster(粘贴) selectstart 选择事
传统注册方式
利用on开头的事件onclick
btn.οnclick=function(){ } 注册事件的唯一性 同一个事件只能设置一个处理函数 ，最后注册的事件会覆盖前面注册的处理函数
方法监听注册方式
addEvenListen()它是一个方法
同一个元素同一个事件可以注册多个监听器，按注册顺序执行
evenTarget.addEvenListen(type,listener[useCapture ])
将指定的监听器注册到eventTarget（目标对象上）当该对象触发指定的事件会执行事件的处理函数
type 事件类型字符串 比如click、mouseover 注意这里不要带on
listener 事件处理函数 事件发生时会调用该监听函数
删除事件的方式
传统方式
eventTarget.οnclick=null;
方法监听方式注册
evenTarget.removeEvenListen(type,listener[useCapture ])
事件冒泡和捕获
evenTarget.addEvenListen(type,listener[useCapture ])
第三个参数是true表示事件捕获 false 或者默认不写表示 事件冒泡
onclick 和attachEvent只能得到冒泡阶段
有些事件也没有冒泡 比如onblur onfoucs onmouseenter onmouseleave
时间参数
阻止事件冒泡 e.stopPropagation(); e.cancelBubble = true; 设置为true 也可以阻止事件冒泡
鼠标事件输出参数是mouseevent对象
clientx clienty 指的是当前整个body页面点击的位置相对浏览器的坐标
layerx layery 指当前的点击位置相对元素的偏移量
offsetx offsety 指当前点的位置相对元素的偏移量
pagex pagey 当前可视页面的位置相对浏览器页面的坐标
screenx screeny 当前的位置相对屏幕的坐标
returnValue true/false 当前事件执行成功之后是否返回结果
srcElement target toElement 触发的目标元素
timeStamp 触发的事件 ms单位
type 触发的事件类型
which 值是ascii 鼠标事件全是1
阻止事件冒泡
阻止事件冒泡 e.stopPropagation(); e.cancelBubble = true; 设置为true 也可以阻止事件冒泡
e.preventDefault();阻止事件默认行为