快速了解js的DOM操作节点以及操作属性

DOM操作节点

一、选择器（查找节点）：

1. document.getElementById(’#id’)
   通过id获取元素(只有一个id Element不能加s)
2. document.getElementsByClassName(’.class’)[0]
   通过class获取元素(Element要加s)
3. document.getElementsByTagName(‘div’)
   通过标签获取元素(Element要加s)
4. document.getElementsByName(‘name’)[0]
   通过name获取元素(Element要加s)
5. document.querySelector(’.demo’)
   获取一个class为demo元素
6. document.querySelectorAll(’.demo’)
   获取页面所有class为demo元素
7. div.children
   获取div(节点)的子节点
8. div.parentElement
   获取div(节点)的父节点
9. div.nextElementSibling
   获取div(节点)的下一个兄弟节点；
   nextSibling 获取div(节点)的下一个兄弟节点。
10. div.previousElementSibling
    获取div(节点)的上一个兄弟节点；
    previousSibling 获取div(节点)的上一个兄弟节点。
11. div.fristChild 返回div节点的第一个子节点；
    firstElementChild 获取父节点的第一个子节点（具体）
12. div.lastChild 返回div节点的最后一个子节点；
    lastElementChild 获取父节点的最后一个子节点（具体）

二、操作节点

1. document.createElement(‘ul’)
   在页面创建一个标签为ul的节点
   createTextNode(“文本”) 创建一个文本节点
2. div.appendChild§
   在div（元素）里内容的后面添加一个p（子）节点
3. div.insertBefore(div，p)
   在div（元素）外的前面插入一个p节点
4. div.removeChild§
   在div（元素）删除一个p （子）节点
5. div.cloneNode(boolean)
   复制一个div（元素），当boolean=true时为深度复制（既包含节点又包 含标签，而且还包含节点里的内容），当boolean=false时为浅度复制（只包 含节点，节点标签）
6. div.replaceChild(新节点，旧节点)
   将旧节点替换为新节点（操作的是父节点

三、操作节点class以及属性

1.获取属性

getComputedStyle(节点).css.属性 ，获取节点的css属性；
(节点).style.属性（例：h1.style.color）只能获取行内式属性。

• 设置属性 image.setAttribute(‘src’,‘image’)
• 获取属性 getAttribute(’’) 或 getAttributeNode(’’)
• 删除属性 removeAttribute(‘’)

2.className = “active”

为节点添加一个class为active，可以多添加多个：className = “active aa”,如果有两个class，会清空对象原有的class。

3.classList.add(‘active’)

为节点添加指定的class为active，可以添加多个:classList.add(‘active’，‘aa’)

4.classList.remove(’’)

为节点删除指定的class，可以删除多个：classList.add(‘’，‘’)

5.classList.toggle(‘active’)

如果该节点class为active存在的话就删除，反之则添加；
classList.contains(‘active’)该节点是否包含class为active

6.classList.replace(oldclass,newclass)

新class替换旧class