浅析DOM节点与增删改查

简介: 浅析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)修改文本

修改文本有innerHTMLinnerText、节点操作、nodeValue

修改属性

修改属性就是将.xxx=vvvsetAttribute两种。

4 总结

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

目录
相关文章
|
2月前
|
JavaScript
HTML DOM 节点树
HTML DOM 节点是指在 HTML 文档对象模型中,文档中的所有内容都被视为节点。整个文档是一个文档节点,每个 HTML 元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。DOM 将文档表示为节点树,节点之间有父子和同胞关系。
|
2月前
|
JavaScript
HTML DOM 节点
HTML DOM(文档对象模型)将HTML文档视为节点树,其中每个部分都是节点:文档本身是文档节点,HTML元素是元素节点,元素内的文本是文本节点,属性是属性节点,注释是注释节点。节点间存在父子及同胞关系,形成层次结构。
|
2月前
|
XML JavaScript 数据格式
XML DOM 遍历节点树
XML DOM 遍历节点树
|
2月前
|
前端开发 Java 数据库连接
javamvc配置,增删改查,文件上传下载。
【10月更文挑战第4天】javamvc配置,增删改查,文件上传下载。
41 1
|
2月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
2月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
2月前
|
存储 NoSQL API
使用Py2neo进行Neo4j图数据库的增删改查操作
使用Py2neo进行Neo4j图数据库的增删改查操作
106 5
|
2月前
|
数据可视化 API PHP
低代码开发工具-学生管理系统-老师管理增删改查实现
低代码开发工具-学生管理系统-老师管理增删改查实现
41 5
|
2月前
|
JavaScript
DOM 节点列表长度(Node List Length)
DOM 节点列表长度(Node List Length)
|
2月前
|
JavaScript 前端开发 测试技术
[新手入门]todolist增删改查:vue3+ts版本!
【10月更文挑战第15天】[新手入门]todolist增删改查:vue3+ts版本!
下一篇
DataWorks