JavaScript-节点操作

节点操作

DOM节点

DOM节点:DOM树里每一个内容都称之为节点

节点类型:

  • 元素节点
    • 所有的标签 比如body、div
    • html时跟节点
  • 属性节点
    • 所有的属性,比如href
  • 文本节点
    • 所有的文本
  • 其他

在这里插入图片描述

查找节点

节点的关系:针对的找亲戚返回的都是对象

  • 父节点
  • 子节点
  • 兄弟节点

父节点查找

  • parentNode 属性:返回最近一级的父节点,找不到返回null
//返回父元素的DOM对象
子元素.parentNode

子节点查找

  • childNodes

    • 获得所有子节点、包括文本节点(空格、换行)、注释节点等

      父元素.childNodes
      
  • children 属性(重点)

    • 仅获得所有元素节点

    • 返回的还是一个伪数组

      父元素.children
      

兄弟节点查找

  • 下一个兄弟节点

    • nextElementSibiling 属性

      元素.nextElementSibiling
      
  • 上一个兄弟节点

    • previousElementSibling 属性

      元素.previousElementSibling
      

增加节点

很多情况下,我们需要在页面中增加元素。比如点击发布按钮,可以新增一条信息,一般情况下,我们新增节点按照如下操作

  1. 创建一个新的节点
  2. 把创建的节点放入到指定的元素内部

创建节点

即创造出一个新的网页元素,在添加到网页内,一般先创建节点,然后插入节点

创建元素节点的方法:

document.creatElement('标签名');
const newTag = document.creatElement('标签名');

追加节点

想要在界面看到,还需要擦汗如到某个父元素中

插入到父元素的最后一个子元素:

父元素.appendChild(要插入的元素)

插入到父元素中某个子元素的前面:

父元素.insertBefore(要插入的元素,在哪个元素前面)

克隆节点

复制一个原有的节点,把复制的节点放入到指定的元素内部

语法:

元素.cloneNode(布尔值)//true:克隆是会包含后代节点一起克隆	深克隆
//false:克隆时不会包含后代节点(默认值)	浅克隆

删除节点

若一个节点在页面中已经不需要时,可以删除他,删除节点必须通过父元素删除

语法:

父元素.removeChild(要删除的元素);

注意:

  • 如果不存在父子关系则删除不成功
  • 删除节点和隐藏节点(display:none)有区别
    • 隐藏节点:节点还是存在的
    • 删除节点:从html中删除

如果不存在父子关系则删除不成功

  • 删除节点和隐藏节点(display:none)有区别
    • 隐藏节点:节点还是存在的
    • 删除节点:从html中删除

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

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

相关文章

java_springboot_ssm流浪宠物救助报名管理系统

用户: 注册登录 宠物百科:提供一些养宠物的专业知识、养宠前的注意事项等等 宠物信息:包括宠物图片、品种、性别、年龄、疫苗、领取要求等内容 宠物领养:领养人自己的详细住址、收入情况、有无养过宠物的记录(有则出示…

人工智能原理复习--搜索策略(二)

文章目录 上一篇启发式搜索与或图搜索博弈下一篇 上一篇 人工智能原理复习–搜索策略(一) 启发式搜索 提高一般图搜索效率的关键是优化OPEN表中节点的排序方式 最理想的情况是每次排序OPEN表表首n总在解答路径上 全局排序–对OPEN表中的所有节点进行…

mysql面试题——MVCC

一:什么是MVCC? 多版本并发控制,更好的方式去处理读-写冲突,就是为了查询一些正在被另一个事务更新的行,并且可以看到它们被更新之前的值,这样在做查询的时候就不用等待另一个事务释放锁。 二&#xff1a…

万界星空科技mes系统中看板管理

我们很多企业现在都有大屏,那到底万界星空科技低代码云mes系统管理中看板管理有什么作用?我总结了几条: 1.提高车间的生产效率 2.有效的监控设备运行状况 3.控制生产线运行 4.增加和改善用户体验 5.提高工作效率和工作安全性

Zabbix监控腾讯云VPC

一、简介 私有网络(Virtual Private Cloud,VPC)是腾讯云上一块由用户自定义的逻辑隔离网络空间,为云服务器、云数据库等资源提供安全可控的网络环境。通过构建逻辑隔离的、用户自定义配置的网络空间,用户能够提升其云…

WIN11家庭中文版使用ENSP+VirtualBox启动AR失败40错误+未完全关闭hyper-V,以及安装VirtualBox兼容性问题

使用版本:eNSP 1.3.00.100VirtualBox 5.2.44WinPcap_4_1_3Wireshark最新版。 win11系统最好按照上述版本安装,VirtualBox不要安装更高版本,否则可能出现不兼容情况,Wireshark版本要求还好,安装顺序是VirtualBox 5.2.4…

python+pytest接口自动化之参数关联

什么是参数关联? 参数关联,也叫接口关联,即接口之间存在参数的联系或依赖。在完成某一功能业务时,有时需要按顺序请求多个接口,此时在某些接口之间可能会存在关联关系。比如:B接口的某个或某些请求参数是通…

如何利用人工智能+物联网技术实现自动化设备生产

随着科技的发展与行业竞争的日益激烈,制造业也逐渐走向智能化发展。制造业的改革是利用物联网技术和自动化设备,实现生产线的智能化和自适应生产,优化生产流程,提高生产效率和质量,为企业创造更大的价值。 方案概述 智…

Gif表情包怎么用图片制作?一招简单易上手

很多朋友对于gif动图的名字不是很熟悉,但是对于“gif表情包”一定很熟悉吧!在日常网络聊天中经常能见到其的身影,能够调节聊天的气氛。想要制作gif表情包可以使用gif动图在线制作(https://www.gif.cn/)网站-GIF中文网&…

学习Linux(2)-学习Linux命令

Linux目录结构 Linux目录结构-菜鸟教程 /bin:bin 是 Binaries (二进制文件) 的缩写, 这个目录存放着最经常使用的命令。 /boot:这里存放的是启动 Linux 时使用的一些核心文件,包括一些连接文件以及镜像文件。 /dev :dev 是 De…

Dockerfile文件

什么是dockerfile? Dockerfile是一个包含用于组合映像的命令的文本文档。可以使用在命令行中调用任何命令。 Docker通过读取Dockerfile中的指令自动生成映像。 docker build命令用于从Dockerfile构建映像。可以在docker build命令中使用-f标志指向文件系统中任何位置的Docke…

C语言-字符串操作函数-附加使用方式

文章目录 前言字符串复制-strcpy字符串复制(按照位数)-strncpy字符串比较-strcmp字符串比较(按照位数)-strncmp不区分大小写的字符串比较-strcasecmp不区分大小写的比较(前n位)-strncasecmp字符串按照格式写入-sprintf字符串按照格式和个数写入-snprintf…

JUC包(面试常问)

1. Callable接口 类似于Runnable接口,Runnable描述的任务,不带返回值;Callable描述的任务带返回值。 public class Test {//创建线程,计算12...1000public static void main(String[] args) throws ExecutionException, Interru…

js/jQuery常见操作 之各种语法例子(包括jQuery中常见的与索引相关的选择器)

js/jQuery常见操作 之各种语法例子(包括jQuery中常见的与索引相关的选择器) 1. 操作table常见的1.1 动态给table添加title(指定td)1.1.1 给td动态添加title(含:获取tr的第几个td)1.1.2 动态加工…

每日一练【三数之和】

一、题目描述 15. 三数之和 给你一个整数数组 nums ,判断是否存在三元组 [nums[i], nums[j], nums[k]] 满足 i ! j、i ! k 且 j ! k ,同时还满足 nums[i] nums[j] nums[k] 0 。请 你返回所有和为 0 且不重复的三元组。 注意:答案中不可…

【数据结构(九)】线索化二叉树(3)

文章目录 1. 前言——问题引出2. 线索二叉树的基本介绍3. 线索二叉树的应用案例3.1. 思路分析3.2. 代码实现 4. 遍历线索化二叉树4.1. 代码实现 1. 前言——问题引出 问题:     将数列 {1, 3, 6, 8, 10, 14 } 构建成一颗二叉树. (n17个空指针域&…

1688API接口系列,商品详情数据丨搜索商品列表丨商家订单类丨1688开放平台接口使用方案

1688商品详情接口是指1688平台提供的API接口,用于获取商品详情信息。通过该接口,您可以获取到商品的详细信息,包括商品标题、价格、库存、描述、图片等。 要使用1688商品详情接口,您需要先申请1688的API权限,并获取ac…

老有所依:TSINGSEE青犀养老院智能视频监管方案

养老院智能监控方案是为了提高养老院内老人的安全和护理质量,利用智能技术与监控设备进行全方位的监控和管理,可以加强对老人的监护和护理,提高养老院的服务质量和安全性。 旭帆科技基于视频技术与AI智能分析技术构建的养老院智能视频监控方…

22 FlexSPI—读写外部 SPI NorFlash

文章目录 22.1 SPI 协议简介22.1.1 SPI物理层22.1.2 协议22.1.3 CPOL/CPHA 及通讯模式22.1.4 扩展 SPI 协议22.1.5 SDR 和 DDR 模式 22.2 RT1052 的 FlexSPI 特性及架构22.2.1 RT1052 的 FlexSPI 外设简介22.2.2 RT1052 的 FlexSPI 架构剖析22.2.2.1 通讯引脚22.2.2.2 指令查找…

如何将html网页免费转为excel?

一、直接复制。 直接复制是最简单有效、快捷的解决方案,操作方法如下: 1、用鼠标像平常复制文本一样,将整个网页表格选中。 2、点击右键,点击“复制”。 3、打开excel软件,鼠标点击任意单元格。 4、点击右键&#…