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.hqwc.cn/news/263608.html

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

相关文章

每日一题 70. 爬楼梯(简单)

简单题,动态规划 class Solution:def climbStairs(self, n: int) -> int:a, b 1, 2for _ in range(n - 2):t a ba bb treturn b if n ! 1 else 1

如何掌握构建 LMS 网站的艺术

目录 什么是学习管理系统 (LMS) 在线课程和 LMS 网站的好处 为什么 WordPress 对于 LMS 网站很重要 统一学习中心 多功能性和可扩展性 提高教育参与度 简化管理和监控 节省时间和费用 技能评估和绩效监督 持续学习和技能提升 使用 WordPress 插件构建成功的 LMS 课程 专注于您的…

高龄服务器终于挂掉了

连续运行了3018天的高龄服务器硬盘挂了,昨晚整了一个通宵,困极。 负载不高,IO稍微有点高。 硬盘报错,系统盘没问题,是一块独立的SCSI盘坏了,里边存储的是MySQL用户数据,可以访问目录&#xff0c…

JDK8新特性:Lambda表达式规则及用法,方法引用

目录 Lambda表达式是JDK8新增的一种语法格式 1.作用 2.用法规则: 3.方法引用 Lambda表达式是JDK8新增的一种语法格式 1.作用 简化匿名内部类的代码写法 Lambad用法前提:只能简化函数式接口(一般加有Funcationallnterface)&a…

二维码智慧门牌管理系统:优化车位管理体验

文章目录 前言一、规范信息记录:提升管理效率二、优化产权管理:智能化信息记录三、智能化车位管理:提升效率与便捷性四、未来展望:持续升级与智能化发展 前言 城市车位管理挑战 随着城市化的推进,车位紧缺问题日益突出…

postgresql安装部署(docker版本)

1.在线部署 创建数据库存储目录 mkdir /home/pgdata创建容器 docker run --name postgresql --restartalways -d -p 5432:5432 -v /home/pgdata:/var/lib/postgresql/data --shm-size10g -e POSTGRES_PASSWORD密码 postgis/postgis:12-3.2-alpine–name为设置容器名称 -d表…

ArkTs基础语法一

1、条件渲染 Column() {if (this.count > 0) {Text(count is positive)} }2、循环渲染 ForEach(arr: any[], // 用于迭代的数组itemGenerator: (item: any, index?: number) > void, // 生成子组件的lambda函数keyGenerator?: (item: any, index?: number) > str…

大数据技术7:StarRocks极速全场景MPP数据库

前言:StarRocks原名DorisDB,是新一代极速全场景MPP数据库。StarRocks 是 Apache Doris 的 Fork 版本。StarRocks 连接的多种源。一是通过这个 CDC 或者说通过这个 ETL 的方式去灌到这个 StarRocks 里面;二是还可以去直接的和这些老的 kafka 或…

分布式事务Seata(别名Seta)(持续学习中)

1.为什么学习他? 当一台机器的时候,只需要本地事务回滚就好了,还有MonogoDB最好不要放敏感数据,特别是旧的版本,没有事务功能(ACID), 分布式事务,也是属于多线程问题,就是把多台机器变成一台机器(他拥有更多线程,但是也要考虑网络问题),redis在一台机器是单线程的,但是多台机器…

AI 绘画 | Stable Diffusion 艺术二维码制作

前言 这篇文章教会你如果用Stable Diffusion WEB UI制作艺术二维码,什么是艺术二维码呢?就是普通二维码和艺术图片融合后的二维码图片,如下图所示。主要原理还是使用controlNet的control_v1p_sd15_qrcode_monster模型和光影模型control_v1p_sd15_brightness。 教程 准备…

Java IO流(四)(Autocloseable接口)

Autocloseable接口 实现Autocloseable的IO类在特定的情况下,可以自动释放资源。 JDK7时的写法: import java.io.FileInputStream; import java.io.FileOutputStream; import java.io.IOException;public class ByteStreamDemoJDK7 {public static void…

一文带你了解Linux学习网站:让你的编程之路更加顺畅!

介绍:Linux,通常指的是GNU/Linux,是一种免费使用和自由传播的类UNIX操作系统。这个系统的核心由林纳斯本纳第克特托瓦兹(Linus Benedict Torvalds)在1991年首次发布。Linux是基于POSIX和UNIX的多用户、多任务、支持多线…