浅析DOM节点与增删改查

欢迎点击「算法与编程之美」↑关注我们！

本文首发于微信公众号："算法与编程之美"，欢迎关注，及时了解更多此系列文章。

1 什么是DOM

在进行DOM操作的增删改查之前，我们首先要了解什么是DOM，那么在这里我也提一下我之前写过的一篇关于DOM是什么的博客，希望大家可以去关注关注。总之，用一句话概括，就是通过JavaScript能够重构整个HTML文档，可以去添加、改变、移除或重排页面上的东西，但这些操作都是通过DOM（文档对象模型）来获取的。

2 什么是节点

DOM把整个文档看作是一棵树，是一棵由节点（node）构成的节点树。那么节点又是什么呢？

在DOM中常见的节点有三种，分别是：元素节点、文本节点和属性节点。有了这些节点后，我们才能快速的定位，才能进行增删改查的操作。下面我将用实例来讲解这些常见的节点属性。

（1）首先是nodeValue,表示节点的值，所有的节点都有该属性，但一般文本节点才使用该属性。

可以通过调试看出来，我们通过这个这个nodeValue改变了body中的文本。

（2）nodeName  表示节点的名字，虽然所有的节点都有该属性，但一般元素节点才使用（且元素节点打印的元素名均为大写字母）。

所以通过该方法我们要判断某个元素的某个标签，比较是否等于的话，一定要用大写。

属性节点与文本节点使用会得到什么

(3)另外还有一个nodeType（节点类型），大家可以去了解一下，”1”表示元素节点，”2”表示属性节点，”3”表示文本节点，其他的大家有兴趣的话也可以看一下，因为在写框架的时候会用得着。

3 DOM操作的增删改查

       总体来说，DOM操作的4个法宝就是增删改查，那么我下面就将总结这一系列常用的方法。

1.查询：（查询就是获取元素）

（1）标准DOM API

（2）亲属访问

属性获取

2.增加：增加分成两类，首先是创建：

然后就是加入：

3.删除（删除元素）：

4．修改——修改可以分为4类：

（1）修改节点

修改节点就是删除节点后再加入

（2）修改样式

         *style.xxx=vvv;

         *setAttribute

（3）修改文本

修改文本有innerHTML、innerText、节点操作、nodeValue。

修改属性

修改属性就是将.xxx=vvv和setAttribute两种。

4 总结

         以上就是关于DOM常见的节点和增删改查的相关知识，DOM在JavaScript里的地位非常重要，而操作DOM的核心又是增删改查，但是很多小伙伴和我一样对DOM的操作感到非常难受，所以我就特地去学习了这方面的知识分享给大家，但这我觉得这还只是基础吧，想要更加熟练操作和理解，还要更深入的学习和多一些对案例的分析。如有缺陷，敬请指正。

参考文献

视频《传智播客》

更多精彩文章：

 

温馨提示：点击页面右下角“写留言”发表评论，期待您的参与！期待您的转发！