DoM元素获取、操作属性、样式

一、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）获取/修改文本内容
nodeValue
textContent
innerText

五、获取元素的class属性值

获取样式表的属性值

// 获取样式表的属性值，IE8及以下不兼容 ，方法/非 ie 浏览器中
window.getComputedStyle(node).style属性;
window.getComputedStyle(obj).width  // 打印输出150px

// IE8及以下获取样式表的属性值 ，属性/在 ie 浏览器中
element.currentStyle.style属性;
 
// 判断浏览器是否兼容 
getComputedStyle 和 currentStyle
if( 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;';