原生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()