文章目录
一、DOM树节点分为四大类：二、访问（获取）Dom树节点（1）返回单一元素节点有2种方法：（2）返回一个或多个元素节点：（得到的是nodeList数组）（3）元素节点间的遍历 二、操作Dom树节点（1）新增元素节点（2）新增文本节点（3）将元素节点/文本节点，追加到现有节点后（4）将元素节点/文本节点，添加到某个元素节点处（5）删除自身元素（6）改属性（7）复制节点 三、操作属性节点（1）获取属性值（2）设置属性值（3）检查元素节点是否包含特定属性（4）从元素节点移除属性 四、获取/更新元素/文本内容五、获取元素的class属性值获取样式表的属性值js改变元素的class属性一、DOM树节点分为四大类：
（1）文档节点文档节点：doucment，Dom树最顶层的节点（2）元素节点
包括：html、head、title、body、head、h1-h6、div、span等（3）属性节点
包括：属性和方法、id 、class（4）文本节点
包括：text
二、访问（获取）Dom树节点
（1）返回单一元素节点有2种方法：
getElementById、querySeletor
（2）返回一个或多个元素节点：（得到的是nodeList数组）
+ getElementsByClassName：返回文档中所有指定类名的元素集合+ getElementsByTagName：返回指定标签名的所有子元素集合。+ querySelectorAll'# id''.class''元素'
（3）元素节点间的遍历
1）得到父子节点parentNode 知道子节点，查找父亲节点document.getElementById("box").parentNode // 查找id为box的元素的父元素
2）兄弟节点(两个直接的兄弟)
查找相邻兄弟节点的上一个节点：previousSibling（IE）/ previousElementSibling(兼容谷歌) 查找相邻兄弟节点的下一个节点：nextSibling（IE）/ nextElementSibling(兼容谷歌) 查找上一个元素节点（注意：只能是元素节点）previousElementSibling 查找下一个元素节点（注意：只能是元素节点）nextElementSibling
3）前后节点
firstChild || firstElementChild 查找第一个子节点lastChild || lastElementChild 查找最后一个子节点Element.ChildNodes // 返回所有节点，包括文本节点等(nodeType==1,元素；nodeType==2,属性；nodeType==3,文本)Element.Children // 只返回元素节点
4）获取任意子节点
Element.parentNode.children[1] // 用数组的方式获取子元素
二、操作Dom树节点
（1）新增元素节点
createElement()var img = document.creatElement('img')img.src = 'static/img/img.jpg' // 给元素添加属性
（2）新增文本节点
createTextNode()
（3）将元素节点/文本节点，追加到现有节点后
appendChild()box.appendChild(img)//会将元素添加到box父元素中的最后一个元素上
（4）将元素节点/文本节点，添加到某个元素节点处
insertBefore()// 可以将元素插入到任意子元素前（后inserAfter）box.insertBefore(img,btn) // 将img元素插入到box元素中的btn元素之前
（5）删除自身元素
let word = document.getElementById("id")word.parentNode.removeChild('word') // 通过word拿到父元素节点，通过清楚子元素方法清楚子元素word.remove() // remove可以直接删除word
（6）改属性
Element.classList.add('类名') // 添加css类名Element.classList.remove('类名') // 移除css类名Element.classList.replace('类名') // 替换css类名
（7）复制节点
新节点 = 被复制的节点.cloneNode（true）,// 传入true,深cope,会将需要复制的元素节点中的所有元素复制// false只会复制一级
三、操作属性节点
（1）获取属性值
getAttribute()box.getAttribute('id'), 得到box元素的id属性值是什么通过点获取属性： box.src // 一定要是元素自带属性，自定义属性通过·获取不到
（2）设置属性值
setAttribute()Element.setAttribute('src','img/img.jpg');// 给元素设置src属性，属性值是'img/img.jpg'//setAttribute可以给元素设置自定义属性，例如'aaa',但是值'不能通过点获取到'
（3）检查元素节点是否包含特定属性
hasAttribute()
（4）从元素节点移除属性
removeAttribute()Element.removeAttribute('src') // 删除掉元素的src属性
四、获取/更新元素/文本内容
（1）获取/设置元素内容： innerHTML（2）获取/修改文本内容nodeValuetextContentinnerText
五、获取元素的class属性值
获取样式表的属性值
// 获取样式表的属性值，IE8及以下不兼容 ，方法/非 ie 浏览器中window.getComputedStyle(node).style属性;window.getComputedStyle(obj).width // 打印输出150px// IE8及以下获取样式表的属性值 ，属性/在 ie 浏览器中element.currentStyle.style属性;// 判断浏览器是否兼容 getComputedStyle 和 currentStyleif( window.getComputedStyle ){ }else if( document.body.cyrrentStyle ){ }
js改变元素的class属性
document.getElementById('test').className = 'emphasis'js添加或者移除class属性document.getElementById("button").classList.add(“active”);document.getElementById("button").classList.remove("active");js设置元素样式值box.style.cssText = 'width: 200px;border: 1px solid #f00;';
