JS中DOM使用的总结

原生JS中的DOM操作总结

理解：

JS中节点的划分

JS中分为元素节点，文本节点，属性节点，（注释节点，文档节点）

<div class="kk">james</div>
<div>       元素节点
class="kk"  属性节点
james       文本节点

节点的四大属性

节点名称	节点名称（nodeName）	节点的值（nodeValue）	节点的类型（nodeType）
元素节点	与标签同名	undefined 或者 null	1
属性节点	属性的名称	属性的值	2
文本节点	#text	文本的内容	3
注释节点			8
文档节点	#document		9

操作

查看元素节点

方法	解释	结果
getElementById()	通过id属性获取一个元素节点的对象	返回一个对象
getElementsByTagName()	通过标签名获取一组元素节点对象	返回一个对象数组
getElementsByName()	通过name属性获取一组元素节点对象	返回一个对象数组
getElementsByClassName()	通过class属性获取一组元素节点对象（ie8及ie8以下）	返回一个对象数组
querySelector()	根据id , class , 标签名来筛选元素节点的对象（如果有多个，就返回第一个）	返回一个对象
querySelectorAll()	根据class 标签名来获取一组元素节点的对象	返回一个对象数组

遍历树节点

方法	解释
parentNode	根据当前的元素节点返回最近的父节点（亲爸爸）
childNodes	根据当前元素节点返回所有的子节点（文本节点（包括空白换行），元素节点）
firstChild	返回第一个子节点
lastChild	返回最后一个子节点
nextSibling	后一个兄弟节点
previousSiling	前一个兄弟节点

很多时候，我们并不需要操作文本节点，只需要操作元素节点，只需要加一个element

方法	解释
parentElement	返回当前元素节点的父元素节点
children	返回当前元素的元素子节点
firstElementChild	返回第一个元素节点（IE不兼容）
lastElementChild	返回最后一个元素节点（IE不兼容）
nextElementSiling	只返回后一个兄弟节点（IE不兼容）
previousElementSibling	只返回当前一个（IE不兼容）

增加节点和插入节点(常用)

#增加节点
document.createElement()
#插入节点
parentNode.appendChild()   #根据父节点，插入里面
parentNode.insertChild(a, b) #根据父节点，把a插到b的前面

let div = document.createElement('div')
div.innerHTML = "我是插入的内容"
body.appendChild(div)   //插入到body中

修改节点

一般是修改文本内容或者属性值，常用的就是setAttribute()、getAttribute()方法。

let a = document.getElementById('a')
a.setAttribute('class', 'box')

删除节点

常用的是removeChild() 直接删除选中的子节点，如果要删除的元素不存在就会返回null;

<div id="a">
	<div id="b"></div>    
</div>

let a = document.getElementById('a')
let b = document.getElementById('b')
a.removeChild(b)

替换节点

常用的是replaceChild(new, old)

parentNode.replaceChild(new, old)

<div class="father">
    <div class="son1"></div>
  </div>
  
  <script>
    let father = document.getElementsByClassName('father')[0]
    let son1 = document.getElementsByClassName('son1')[0]
    let son2 = document.createElement('div')
    son2.setAttribute('class', 'son2')
    father.replaceChild(son2, son1)
  </script>

读取

• 方式一： 对于有闭合的标签（即有开始的标签，有结束的标签 例如：
  ） 可以使用innerHTML获取内容。

但是对于单标签来说，就不可以使用innerHTML (如果要读取其内部的值，就直接获取当前的元素 节点，然后.xxx就可以了，比如：.name .id 当然class要除外，因为class是JS中保留词，需要使用.className)

• 方式二：使用getAttribute()