js节点操作

js节点操作

  • 一.DOM节点
  • 二.查找节点
  • 三.增加节点
    • 3.1.创建节点
    • 3.2.追加节点
    • 3.3.克隆节点
  • 四. 删除节点

一.DOM节点

DOM树里每一个内容都称之为节点
节点类型:元素节点(所有的标签 比如 body,div等,html 是根节点)
属性节点(比如 href,src)
文本节点(所有的文本)
其他
在这里插入图片描述

二.查找节点

通过节点关系找节点,其返回的都是对象
关系:父子,兄弟
父节点查找:
parentNode 属性
返回最近一级的父节点 找不到返回为null

子元素.parentNode

子节点查找:
1.childNodes属性
获得所有子节点、包括文本节点(空格、换行)、注释节点等
2.children 属性(重点)
仅获得所有元素节点
返回的还是一个伪数组

父元素.children

兄弟关系查找:
1.下一个兄弟节点
nextElementSibling 属性
2.上一个兄弟节点
previousElementSibling 属性

三.增加节点

3.1.创建节点

即创造出一个新的网页元素,再添加到网页内,一般先创建节点,然后插入节点
创建元素节点方法:
在这里插入图片描述

3.2.追加节点

要想在界面看到,还得插入到某个父元素中
插入到父元素的最后一个子元素:
在这里插入图片描述

插入到父元素中某个子元素的前面:
在这里插入图片描述

3.3.克隆节点

cloneNode会克隆出一个跟原标签一样的元素,括号内传入布尔值
在这里插入图片描述
若为true,则代表克隆时会包含后代节点一起克隆
若为false,则代表克隆时不包含后代节点
默认为false

四. 删除节点

若一个节点在页面中已不需要时,可以删除它
在 JavaScript 原生DOM操作中,要删除元素必须通过父元素删除
语法
在这里插入图片描述
注:
如不存在父子关系则删除不成功
删除节点和隐藏节点(display:none)是有区别的: 隐藏节点还是存在的,但是删除,则从html中删除节点

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

前缀和+哈希表:联手合击Leetcode 560.和为k的子数组

题目 给你一个整数数组 nums 和一个整数 k ,请你统计并返回 该数组中和为 k 的子数组的个数 。 子数组是数组中元素的连续非空序列。 示例 1: 输入:nums [1,1,1], k 2 输出:2示例 2: 输入:nums [1,2…

C++指针(四)

个人主页:PingdiGuo_guo 收录专栏:C干货专栏 前言 相关文章:C指针(一)、C指针(二)、C指针(三) 本篇博客是介绍函数指针、函数指针数组、回调函数、指针函数的。 点赞破六…

YOLOSHOW - YOLOv5 / YOLOv7 / YOLOv8 / YOLOv9 基于 Pyside6 的图形化界面

YOLOSHOW 是一个基于 PySide6(Qt for Python)开发的图形化界面应用程序,主要用于集成和可视化YOLO系列(包括但不限于YOLOv5、YOLOv7、YOLOv8、YOLOv9)的目标检测模型。YOLOSHOW 提供了一个用户友好的交互界面&#xff…

遥感分析时什么情况下需要做大气校正?

经常会遇到这样的问题:什么情况需要做大气校正产生?这个问题取决于传感器和应用目标,总的来说,如果要做光谱分析,那么大气校正是必须要做的。本文对于在什么情况下选择什么样的大气校正方法,给出了一些依据…

算法48:动态规划专练(力扣221:最大正方形面积)

题目: 在一个由 0 和 1 组成的二维矩阵内,找到只包含 1 的最大正方形,并返回其面积。 示例 1: 输入:matrix [["1","0","1","0","0"],["1","0&quo…

MySQL下实现纯SQL语句的递归查询

需求 有一个部门表,部门表中有一个字段用于定义它的父部门; 在实际业务中有一个『部门中心』的业务; 比如采购单,我们需要显示本部门及子部门的采购单显示出来。 结构 数据如下: 实现方式如下: WITH RECUR…

打造智慧足球社区:Java+SpringBoot实战

✍✍计算机毕业编程指导师 ⭐⭐个人介绍:自己非常喜欢研究技术问题!专业做Java、Python、微信小程序、安卓、大数据、爬虫、Golang、大屏等实战项目。 ⛽⛽实战项目:有源码或者技术上的问题欢迎在评论区一起讨论交流! ⚡⚡ Java、…

【vue3之组合式API及其新特性】

组合式API及其新特性 一、setup1.写法2.如何访问3.语法糖4.同步返回对象 二、reactive()和ref()1.reactive()2.ref() 三、computed四、watch函数1.侦听单个数据2.侦听多个数据3. immediate4. deep5.精确侦听对象的某个属性 五、生命周期函数六、组件通信1.父传子2. 子传父 七、…

vue 总结

1.vue 的生命周期 1. es6 2. vue 基本属性指令 <template><div><!--<h1>vue基本指令的使用方式</h1><a :href"url">v-bind使用链接</a><img :src"srcUrl" /><div>解决闪烁问题<p v-cloak>{{…

【word】引用文献如何标注右上角

一、在Word文档中引用文献并标注在右上角的具体步骤如下 1、将光标移动到需要添加文献标注的位置&#xff1a; 2、在文档上方的工具栏中选择“引用”选项&#xff1a; 3、点击“插入脚注”或“插入尾注”&#xff1a; ①如果选择的是脚注&#xff0c;则脚注区域会出现在本页的…

Object.keys()的用法

1、语法 Object.keys(obj) 参数&#xff1a;要返回其枚举自身属性的对象 返回值&#xff1a;一个表示给定对象的所有可枚举属性的字符串数组 2、处理对象&#xff0c;返回可枚举的属性数组 let person {name:“张三”,age:25,address:“深圳”,getName:function(){}} Obj…

管理 PostgreSQL 中配置参数的各种方法

管理 PostgreSQL 中配置参数的各种方法 1. 概述 PostgreSQL提供了一个配置文件 postgresql.conf 让用户自定义参数。您可能需要更改一些参数来调整性能或在工作环境中部署 PostgreSQL 服务器。在这篇博文中&#xff0c;我们将探索管理这些参数的不同方法。 2. 以不同方式管理…

大语言模型系列-GPT-3

文章目录 前言一、GTP-3的改进二、GPT-3的表现总结 前言 《Language Models are Few-Shot Learners&#xff0c;2020》 前文提到GPT-2进一步提升了模型的zero shot能力&#xff0c;但是在一些任务中仍可能会“胡说”&#xff0c;GTP-3基于此提出了few shot&#xff0c;即预测…

PnP算法

PnP(Perspective-n-Point)是求解3D到2D点的对应方法。它描述了当知道n个3D空间点及其位置&#xff0c;如何估计相机的位姿。如果两张图像中的一张特征点3D位置已知&#xff0c;那么至少需要3个点对(以及至少一个额外验证点验证结果)就可以计算相机的运动。 PnP的应用范围很广比…

从 HPC 到 AI:探索文件系统的发展及性能评估

随着 AI 技术的迅速发展&#xff0c;模型规模和复杂度以及待处理数据量都在急剧上升&#xff0c;这些趋势使得高性能计算&#xff08;HPC&#xff09;变得越来越必要。HPC 通过集成强大的计算资源&#xff0c;比如 GPU 和 CPU 集群&#xff0c;提供了处理和分析大规模数据所需的…

LLM 加速技巧:Muti Query Attention

MQA 是 19 年提出的一种新的 Attention 机制&#xff0c;其能够在保证模型效果的同时加快 decoder 生成 token 的速度。在大语言模型时代被广泛使用&#xff0c;很多LLM都采用了MQA&#xff0c;如Falcon、PaLM、StarCoder等。 在介绍MQA 之前&#xff0c;我们先回顾一下传统的…

利用GPT开发应用001:GPT基础知识及LLM发展

文章目录 一、惊艳的GPT二、大语言模型LLMs三、自然语言处理NLP四、大语言模型LLM发展 一、惊艳的GPT 想象一下&#xff0c;您可以与计算机的交流速度与与朋友交流一样快。那会是什么样子&#xff1f;您可以创建哪些应用程序&#xff1f;这正是OpenAI正在助力构建的世界&#x…

Ethersacn的交易数据是什么样的(2)

分析 Raw Transanction RLP&#xff08;Recursive Length Prefix&#xff09;是一种以太坊中用于序列化数据的编码方式。它被用于将各种数据结构转换为二进制格式&#xff0c;以便在以太坊中传输和存储。RLP 是一种递归的编码方式&#xff0c;允许对复杂的数据结构进行编码。所…

word如何实现不同章节显示不同页眉

一、问题描述 写论文时遇到如下情形&#xff0c;第二章页眉跟第一章一样&#xff0c;如下图 二、解决方法 在第二章前一页空白处&#xff0c;选择依次布局→分隔符→下一页&#xff0c;如下图 双击第二章页眉&#xff0c;进入页眉编辑状态&#xff0c;点击链接到前一节按钮&a…