浅析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的操作感到非常难受,所以我就特地去学习了这方面的知识分享给大家,但这我觉得这还只是基础吧,想要更加熟练操作和理解,还要更深入的学习和多一些对案例的分析。如有缺陷,敬请指正。
参考文献
视频《传智播客》
更多精彩文章:
温馨提示:点击页面右下角“写留言”发表评论,期待您的参与!期待您的转发!