DOM
1、DOM简介
DOM是一个处理可扩展标记语言的编程接口，通过DOM可以改变网页的内容、样式和结构。
2、获取元素
根据ID获取：document.getElementById()； 1.先有标签，后写script 2.get 获得 element 元素 by 通过驼峰命名法 3.参数id是大小写敏感的字符串 4.返回的是一个元素对象根据标签名获取：document.getElementsByTagName(‘标签名’); 1.返回带有指定标签名的对象的集合 2.得到元素对象是动态的通过HTML5新增的方法获取： 1.document.getElementsByClassName(‘类名’)；根据类名返回元素对象集合 2.document.querySelector(‘选择器’)；根据指定选择器返回第一个元素对象 3.document.querySelectorAll(‘选择器’)；根据指定选择器返回特殊元素获取： 1.获取body 元素：document.body 2.获取html 元素：document.documentElement
3、事件基础
时间是可以被JavaScript 侦测到的行为，是一种响应机制。 事件由三部分组成：事件源、事件类型、事件处理程序。 例如：< button id=“btn”> Document< /button> < script> var btn=document.getElementById(‘btn’); btn.οnclick=function() { 处理程序} < /script>
4、操作元素
4.1 改变元素内容
element.innerText 从起始位置到终止位置的内容，不识别HTML标签，同时去掉空格和换行element.innerHTML 起始位置到终止位置的全部内容，包含HTML标签，同时保留空格和换行
4.2 样式属性操作
element.style 行内样式操作 例如：this.style.color=’’;element.className 类各样式操作 例如：this.className=‘类名’;
5、自定义属性的操作
获取属性值
element.属性——获取内置属性值（元素本身自带的属性）
element.getAttribute(‘属性’)——主要获得自定义的属性
设置属性值
element.属性=‘属性值’——设置内置属性值
element.setAttribute(‘属性’，‘值’)——主要针对自定义属性
移除属性 element.removeAttribute(‘属性’);
6、节点操作
父级节点
node.parentNode得到的是离元素最近的父节点，如果找不打父节点，就返回为null。
子节点
childrenparentNode.children——返回所有的子元素节点parentNode.firstChild——返回第一个子节点parentNode.lastChildparentNode.firstElementChild——返回第一个子元素节点parentNode.lastElementChild
兄弟节点
node.nextSibling——返回下一个兄弟节点，包含文本节点或者元素节点node.nextElementSibling——返回下一个兄弟元素节点node.previousElementSibling——返回上一个兄弟元素节点
创建节点 document.createElement(‘元素标签’)
添加节点 node.appendChild(child)——node 父级，child 子级。添加到指定父节点的子节点列表末尾。 node.insertBefore(child，指定元素)
删除节点 node.removeChild(child) 从DOM中删除一个子节点，返回删除的节点
复制节点 node.cloneNode()——返回调用此方法的一个副本 – 如果括号为空或false，则只复制标签不复制里面的内容，为浅拷贝； – 如果括号为true，则复制标签和里面的内容，为深拷贝；
7、三种动态创建元素的区别
document.write() 例如：document.write(’< div>123< /div>’) 文档流执行完毕后，再调用会导致页面全部重绘element.innerHTML 不会导致页面重绘； 创建多个元素效率更高（不采用拼接字符串，采取数组形式拼接），结构稍微复杂document.createElement() 创建多个元素效率稍微低一点，但是结构更清晰
