js-3:DOM常见的操作有哪些?

1、DOM
文档对象模型(DOM)是HTML和XML文档的编程接口。
它提供了对文档的结构化的表述,并定义了一种方式,可以使从程序中对该结构进行访问,从而改变文档的结构,样式跟内容。
任何HTML和XML文档都可以用DOM表示为一个由节点构成的层级结构。
节点分很多类型,每种类型对应着文档中不同的信息和标记,也都有自己不同的属性、数据和方法。而且与其他类型有某种关系,如下所示:
在这里插入图片描述
DOM像原子包含着亚原子微粒一样,也有很多类型的DOM节点包含着其他类型的节点。接下来,展示其他三种:
在这里插入图片描述
上述结构中,div、p是元素节点,content是文本节点,title是属性节点

2、操作
日常开发中,离不开Dom操作。之前使用jquery、zepto等库来操作DOM,之后在vue、angular、react等框架出现后,通过操作数据来控制DOM(绝大多数时候),越来越少的直接去直接操作DOM。
但这并不代表原生操作不重要,相反,DOM操作有助于我们理解框架深层的内容。
DOM常见的操作主要分为:
创建节点
查询节点
更新节点
添加节点
删除节点

创建节点:
createElement:创建新元素,接受一个参数,即要创建元素的标签名。
在这里插入图片描述
create TextNode:创建一个文本节点
在这里插入图片描述
createDocumentFragment:用来创建一个文档碎片,它表示一个轻量级的文档,主要是用来存储临时节点,然后把文档碎片的内容一次性添加到DOM中。
在这里插入图片描述
当请求把一个DocumentFragment节点插入文档树时,插入的不是DocumentFragment自身,而是它的所有子孙节点。

createAttribute:创建属性节点,可以是自定义属性。
在这里插入图片描述
获取节点:
querySelector:传入任何有效的css选择器,即可选中单个DOM元素(首个)
在这里插入图片描述
如果页面上没有指定的元素时,返回null

querySelectorAll:返回一个包含节点子树内所有与之相匹配的Element节点列表,如果没有相匹配的,则返回一个空节点列表。

在这里插入图片描述
需要注意的是,该方法返回的是一个NodeList的静态实例,它是一个静态的“快照”,而非“实时”的查询。
关于获取DOM元素的方法如下所示:
在这里插入图片描述
除此之外,每个Dom元素还有parentNode、childNodes、firstChild,lastChild,nextSibling,previousSibling属性,关系图如下所示。

在这里插入图片描述
更新节点:innerHTML:不但可以修改一个DOM节点的文本内容,还可以直接通过HTML片段修改DOM节点内部的子树。

在这里插入图片描述
innerText、textContent:自动对字符串进行HTML编码,保证无法设置任何HTML标签。
在这里插入图片描述
两者的区别在于读取属性时,innnerText不返回隐藏元素的文本,而TextContent返回所有文本

style:DOM节点的style属性对应所有的CSS,可以直接获取或设置,遇到-需要转化为驼峰命名。
在这里插入图片描述
添加节点:
innerHTML:如果这个DOM节点是空的,例如,

,那么,直接使用innerHTML=' child'就可以修改DOM节点的内容,相当于添加了新的DOM节点。
如果这个DOM节点不是空的,那就不能这样做,因为innerHTML会直接替换掉原来的所有子节点。

appendChild:把一个子节点添加到父节点的最后一个子节点
在这里插入图片描述
添加一个p元素,在这里插入图片描述
现在HTML结构变成下面:
在这里插入图片描述
上述代码中,获取DOM元素后再进行添加操作,这个js节点是已经存在于当前文档树中,因此这个节点会先从原先的位置删除,再插入到新的位置。
如果动态添加新的节点,则先创建一个新的节点,然后插入到指定的位置。
在这里插入图片描述
insertBefore:把子节点插入到指定的位置
在这里插入图片描述
子节点会插入到refreenceElement之前。

setAttribute:在指定元素中添加一个属性节点,如果元素中已经有该属性,则改变属性值。
在这里插入图片描述
删除节点:删除一个节点,首先要获取该节点本身以及它的父节点,然后调用父节点的removeChild把自己的删掉。
在这里插入图片描述
删除后的节点虽然不在文档树中了,但是它还在内存中,可以随时再次被添加到别的位置。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/57197.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

R语言3_安装SeurateData

环境Ubuntu22/20, R4.1 在命令行中键入, apt-get update apt install libcurl4-openssl-dev libssl-dev libxml2-dev libcairo2-dev libgtk-3-dev # libcairo2-dev :: systemfonts # libgtk :: textshaping进入r语言交互环境,键入, instal…

RaabitMQ(三) - RabbitMQ队列类型、死信消息与死信队列、懒队列、集群模式、MQ常见消息问题

RabbitMQ队列类型 Classic经典队列 这是RabbitMQ最为经典的队列类型。在单机环境中,拥有比较高的消息可靠性。 经典队列可以选择是否持久化(Durability)以及是否自动删除(Auto delete)两个属性。 Durability有两个选项,Durable和Transient。 Durable表…

CS 144 Lab Seven -- putting it all together

CS 144 Lab Seven -- putting it all together 引言测试lab7.ccUDPSocketNetworkInterfaceAdapterTCPSocketLab7main方法子线程 小结 对应课程视频: 【计算机网络】 斯坦福大学CS144课程 Lab Six 对应的PDF: Checkpoint 6: putting it all together 引言 本实验无需进行任何编…

绘制曲线python

文章目录 import matplotlib.pyplot as plt# 提供的数据 x= [1,1.1,1.2,1.3,1.4,1.5,1.6,1.7,1.8,1.9,2,2.1,2.2,2.3,2.4,2.5,2.6,2.7,2.8,2.9,3,3.1,3.2,3.3,3.4,3.5,3.6,3.7,3.8,3.9,4,4.1,4.2,4.3,4.4,4.5,4.6,4.7,4.8,4.9,5,5.1,5.2,5.3,5.4,5.5,5.6,5.7,5.8,5.9,6,6.1,6.2…

【网络编程】揭开套接字的神秘面纱

文章目录 1 :peach:简单理解TCP/UDP协议 :peach:2 :peach:网络字节序 :peach:3 :peach:socket编程接口 :peach:3.1 :apple:socket 常见API :apple:3.2 :apple:sockaddr结构:apple: 4 :peach:简单的UDP网络程序 :peach:4.1 :apple:基本分析:apple:4.2 :apple:udpServer.hpp(重点…

Pytorch Tutorial【Chapter 2. Autograd】

Pytorch Tutorial 文章目录 Pytorch TutorialChapter 2. Autograd1. Review Matrix Calculus1.1 Definition向量对向量求导1.2 Definition标量对向量求导1.3 Definition标量对矩阵求导 2.关于autograd的说明3. grad的计算3.1 Manual手动计算3.2 backward()自动计算 Reference C…

Codeforces三道简单题

第一次使用Codeforces,.先刷三道简单题&#xff0c;最后附上怎么简单使用codeforces A. Watermelon 题目链接 : Problem - 4A - Codeforces 题面 : 思路 : 模拟 题解 : #include <stdio.h>int main(int argc, char const *argv[]) {int n;scanf("%d",&a…

Chatgpt AI newbing作画,文字生成图 BingImageCreator 二次开发,对接wxbot

开源项目 https://github.com/acheong08/BingImageCreator 获取cookie信息 cookieStore.get("_U").then(result > console.log(result.value)) pip3 install --upgrade BingImageCreator import os import BingImageCreatoros.environ["http_proxy"]…

26 MFC序列化函数

文章目录 Serialize对于存储文件的序列化 Serialize Serialize 是一个在 MFC (Microsoft Foundation Classes) 中常用的函数或概念。它用于将对象的数据进行序列化和反序列化&#xff0c;便于在不同的场景中保存、传输和恢复对象的状态。 在 MFC 中&#xff0c;Serialize 函数…

移动硬盘不显示盘符简单处理方法

通常情况下&#xff0c;将移动硬盘连接到电脑后会被赋予一个特定的盘符&#xff0c;以便用户可以访问和操作其中的文件和文件夹。然而&#xff0c;如果移动硬盘不显示盘符&#xff0c;意味着操作系统无法根据该硬盘的文件系统和存储信息识别出其所对应的盘符&#xff0c;这将导…

【linux】权限理解

目录 1. shell命令以及运行原理 2. 权限的概念 3. 权限管理 2.1 文件访问者的分类&#xff08;人&#xff09; 2.2 文件类型和访问权限&#xff08;事物属性&#xff09; 2.3 文件权限值的表示方法 2.4 文件访问权限的相关设置方法 3. file指令 4. 目录的权限★ 5. 粘…

splice没有删除指定元素怎么回事

动态删除数组元素&#xff0c;只能用倒序遍历或者正序遍历时i每次减1 防止遍历时数组元素长度动态改变导致的死循环或者缺漏 注释的需要-1