js--DOM树简介

news/2024/4/15 3:37:29/文章来源:https://blog.csdn.net/sinat_34896766/article/details/136511157

DOM树将HTML文档以树状结构直管段表现出来,也称为节点树。

1、节点Node

        节点是DOM树中的单个点,包括文档本身、元素、文本以及注释都属于是节点。

        元素节点:所有的标签,html是根节点

        属性节点:所有的属性

        文本节点:所有的文本

2、查找节点

        利用节点关系查找节点,返回的都是对象。

        父节点查找:子元素.parentNode,返回最近一级的父节点对象,找不到则返回null

  <ul><li>1</li></ul><script> const li = document.querySelector('li')console.log(li.parentNode)
</script>

         子节点查找:节点对象.children,获得所有的子元素,返回的是一个伪数组。

<script> const ul = document.querySelector('ul')console.log(ul.children)
</script>

        兄弟节点查找:节点对象.nextElementSibling,下一个兄弟节点

                                 节点对象.previousElementSibling,上一个兄弟节点

  <p>0</p><ul><li>1</li></ul><div>1</div><script> const ul = document.querySelector('ul')console.log(ul.previousElementSibling)console.log(ul.nextElementSibling)
</script>

 

3、增加节点

        a、创建节点:document.creatElement('标签名')

        b、追加节点:element.append(),追加到最后面

                                element.prepend(),追加到最前面

  <ul><li>1</li></ul><script> const ul = document.querySelector('ul')const ele = document.createElement('p')const ele1 = document.createElement('div')ul.append(ele)ul.prepend(ele1)
</script>

 

4、删除节点

        element.remove() 把对象从它所属的DOM树中删除。

  <ul><li>1</li></ul>
<script> const ul = document.querySelector('ul')ul.remove()
</script>

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

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

相关文章

基于springboot+vue的医疗挂号管理系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

1 数据分析概述与职业操守 (3%)

1、 EDIT数字化模型 E——exploration探索 &#xff08;是什么&#xff09; 业务运行探索&#xff1a;探索关注企业各项业务的运行状态、各项指标是否合规以及各项业务的具体数据情况等。 D——diagnosis 诊断 (为什么) 问题根源诊断&#xff1a;当业务指标偏离正常值时&…

Git保姆级使用教程

一、版本控制 1.1 团队开发问题 企业项目一般以团队形式实施开发&#xff0c;那团队开发中会出现哪些问题呢&#xff1f; 小明负责的模块就要完成了&#xff0c;就在即将Release之前的一瞬间&#xff0c;电脑突然蓝屏&#xff0c;硬盘光荣牺牲&#xff01;几个月来的努力付之…

学习统一的Hyper - network用于多模态MR图像合成和缺失模态的肿瘤分割

Learning Unified Hyper-Network for Multi-Modal MR Image Synthesis and Tumor Segmentation With Missing Modalities Learning Unified Hyper-Network for Multi-Modal MR Image Synthesis and Tumor Segmentation With Missing Modalities背景贡献实验方法多模态合成方法超…

Go的安装

一. 下载地址 Go官方下载地址&#xff1a;https://golang.org/dl/ Go中文网&#xff1a;https://go.p2hp.com/go.dev/dl/ 根据不同系统下载不同的包。 二. 配置GOPATH GOPATH是一个环境变量&#xff0c;用来表明你写的go项目的存放路径。 GOPATH路径最好只设置一个&#xff0…

Linux系统:内核参数调优

目录 1、/proc目录 2、sysctl命令 3.1 控制源路由验证 3.2 控制内核的系统请求调试功能 3.3 控制核心转储是否将PID附加到核心文件名 3.4 控制TCP同步cookie的使用 3.5 在网桥上禁用netfilter 3.6 控制消息队列的默认最大大小 3.7 调试TCP内核参数 3.8 调试套…

Docker之若依项目部署

目录 一、搭建项目的局域网 1.1搭建局域网 1.2查看局域网 1.3注意&#xff1a;要关闭防火墙&#xff0c;关闭后要重启docker 二、redis安装 2.1创建目录 2.2修改redis.conf文件 三、MySQL安装 3.1安装 3.2设置远程连接 3.3创建数据库 四、若依后端项目搭建 4.1创建…

学习经验分享【NO.21】近期中文核心期刊目标检测论文理解

前言&#xff1a;最近比较忙&#xff0c;很久没有翻看知网论文了&#xff0c;看了下yolo改进相关的论文发现基于YOLOv5改进的核心期刊论文还是层出不穷&#xff0c;并没有因为已经是2024年了YOLOv9的出现而导致论文不好发&#xff0c;同时YOLOv8的论文也出了不少&#xff0c;所…

11 OpenCV 上采样与降采样,高斯不同(DOG)

文章目录 算子什么是高斯不同示例 算子 pyrUp(Mat src, Mat dst, Size(src.cols*2, src.rows*2)) 生成的图像是原图在宽与高各放大两倍 pyrDown(Mat src, Mat dst, Size(src.cols/2, src.rows/2)) 生成的图像是原图在宽与高各缩小1/2什么是高斯不同 定义&#xff1a;就是把同…

安卓使用ExoPlayer出现膨胀类异常

1.导包 implementation com.google.android.exoplayer:exoplayer-core:2.15.1implementation com.google.android.exoplayer:exoplayer-ui:2.15.1 2.在Androidifest.xml加入权限&#xff0c;我这里加了网络与读写权限 <uses-permission android:name"android.permissio…

【C语言】终の指针(前篇)

个人主页点这里~ 指针初阶点这里~ 指针初阶2.0点这里~ 指针进阶点这里~ 终の指针 一、回调函数二、qsort函数1、整形比较2、结构数据比较①结构体②-> 的使用③结构数据比较 一、回调函数 回调函数就是⼀个通过函数指针调用的函数。 把一个函数的指针作为参数传递给另一…

仓储管理系统(WMS) 的研发历程-PRD撰写

题外话&#xff1a;PRD的展现形式有多种&#xff0c;有的人喜欢在axure上直接做产品描述&#xff0c;觉得word较为过时&#xff0c;有的人认为axure不专业&#xff0c;任何展现形式都无可厚非&#xff0c;重要的达到PRD的目的&#xff0c;PRD的目标是让团队知道需求实现细节&am…

vue基础教程(4)——深入理解vue项目各目录

博主个人微信小程序已经上线&#xff1a;【中二少年工具箱】。欢迎搜索试用 正文开始 专栏简介1. 总览2. node_modules3.public4.src5.assets6.components7.router8.stores9.views10.App.vue11.main.js12.index.html 专栏简介 本系列文章由浅入深&#xff0c;从基础知识到实战…

Ajax、Axios、Vue、Element与其案例

目录 一.Ajax 二.Axios 三.Vue 四.Element 五.增删改查案例 一.依赖&#xff1a;数据库&#xff0c;mybatis&#xff0c;servlet&#xff0c;json-对象转换器 二.资源&#xff1a;elementvueaxios 三.pojo 四.mapper.xml与mapper接口 五.service 六.servlet 七.html页…

vue3的基本使用(1)

Vue3的基本使用&#xff08;1&#xff09; 初识vue31. vue3简介2. 性能提升3. 源码升级 Vue3的创建1. vue-cli创建2. vite创建 Composition API的区别&#xff08;组合式&#xff09;setup函数响应式数据1. ref响应式2. reactive响应式 toRefs与toRef简单介绍 初识vue3 1. vue…

Easticsearch性能优化之索引优化

Easticsearch性能优化之索引优化 一、合理的索引设计二、合理的分片和副本三、合理的索引设置 对于性能优化&#xff0c;Elasticsearch&#xff08;以下简称ES&#xff09;的索引优化是提高性能的关键因素之一。合理的设计索引&#xff0c;合理的分片和副本以及合理的缓存设置等…

Matlab 机器人工具箱 例程:运动学+动力学+路径规划+可视化

文章目录 1 创建机器人2 机器人显示3 机器人示教4 机器人路径规划&#xff1a;给定关节角路径5 机器人路径规划&#xff1a;给定末端位姿&#xff0c;求关节角路径6 工作空间可视化参考链接 1 创建机器人 clc;clear;close all; deg pi/180;L1 Revolute(d, 0, a, 0, alpha, 0,…

sudo command not found

文章目录 一句话Intro其他操作 一句话 sudo 某命令 改成 sudo -i 某命令 试试。 -i 会把当前用户的环境变量带过去&#xff0c;这样在sudo的时候&#xff0c;有更高的权限&#xff0c;有本用户的环境变量(下的程序命令)。 -i, --login run login shell as the target user; a …

蓝桥杯嵌入式模板构建——RCT时钟

在CubeMX里的RTC模块启用RTC时钟和日历功能 输入到RTC的时钟要配置成1HZ,这样的话RTC每经过1s走时一次 由于RTC时钟默认配置为32Khz 所以我们需要将异步分频值与同步分频值的乘积调整为32K分频即可一秒走时一次 频率&#xff1a;32000hz / 32000hz 1hz 必须是31和999&#…

数字化转型导师坚鹏:如何制定证券公司数字化转型年度培训规划

如何制定与实施证券公司数字化转型年度培训规划 ——以推动证券公司数字化转型战略落地为核心&#xff0c;实现知行果合一 课程背景&#xff1a; 很多证券公司都在开展数字化转型培训工作&#xff0c;目前存在以下问题急需解决&#xff1a; 缺少针对性的证券公司数字化转型…