当前位置: 首页 > news >正文

javaScript:DOM(父子/兄弟)常用属性

目录

前言

一.父子关系 

父子关系的常用属性

childNodes 获取所有的子节点

children 获取所有的子元素(dom元素)

firstChild 获取元素的第一个子节点,相当于 childNodes[0]

firstElementChild 获取元素的第一个元素 相当于 children[0]

lastChild 获取元素的最后一个子节点 

lastElementChild 获取元素的最后一个子元素

注意

兄弟关系的常用属性

nextSibling 获取当前元素的下一个兄弟节点

nextElementSibling  获取当前元素的下一个兄弟元素(ie 6 7 8 不支持)

previousSibling  获取当前元素的上一个兄弟节点

previousElementSibling 获取当前元素的上一个兄弟元素(ie 6 7 8 不支持)

案例 ;封装一个通用方法,使其在低版本ie中,也可以直接获取下一个dom元素,传入当前元素对象,返回下一个元素对象


前言

       父子关系和兄弟关系在 DOM 中具有重要的作用,使开发者能够方便地导航和操作 DOM 元素。它们为动态创建和修改 DOM 结构、样式和布局控制、事件处理和委托等提供了强大的功能和灵活性。

一.父子关系 

父子关系的常用属性

childNodes 获取所有的子节点

children 获取所有的子元素(dom元素)

let list = document.querySelector('#list')console.log(list.childNodes,list.children);

firstChild 获取元素的第一个子节点,相当于 childNodes[0]

firstElementChild 获取元素的第一个元素 相当于 children[0]

 //把第一个li的颜色设置为红色list.firstElementChild.style.color = '#f00';
   let list = document.querySelector('#list')console.log(list.firstChild,list.firstElementChild);

lastChild 获取元素的最后一个子节点 

lastElementChild 获取元素的最后一个子元素

   console.log(list.lastChild,list.lastElementChild);list.lastElementChild.style.fontSize = '40px';

注意

       标准浏览器好ie高版本会把回车(换行)当做文本节点,ie低版本(8及以下)不会,也就是ie 6 7 8 不支持。

      parentNode 和 parentElement 都是查找元素的父元素 一般的 parentNode 兼容性更好,因此更常用

 //查找父节点console.log(li.parentNode,li.parentElement);

兄弟关系的常用属性

nextSibling 获取当前元素的下一个兄弟节点

nextElementSibling  获取当前元素的下一个兄弟元素(ie 6 7 8 不支持)

let li = document.querySelector('#list>li:nth-child(6)')li.style.fontSize = '40px'console.log( li.nextSibling,li.nextElementSibling);//给当前元素的下一个元素,添加样式li.nextElementSibling.style.color = 'pink'

previousSibling  获取当前元素的上一个兄弟节点

previousElementSibling 获取当前元素的上一个兄弟元素(ie 6 7 8 不支持)

 //获取当前元素的上一个 节点和上一个元素console.log(li.previousSibling,li.previousElementSibling);li.previousElementSibling.style.color = '#f60'

案例 ;封装一个通用方法,使其在低版本ie中,也可以直接获取下一个dom元素,传入当前元素对象,返回下一个元素对象

   function getEle(domObj){// 如果不存在参数if (!domObj) {return null;}//获取传入对象的下一个节点let ele = domObj.nextSibling;while (ele&&ele.nodeType!=1) {    //如果ele存在console.log('输出'+ ele.nodeType);ele = ele.nextSibling;// //如果没有下一个元素// if (ele==null) {//     return null;// }}return ele;}console.log(getEle(li));let li10 = document.querySelector('#list>li:nth-child(10)')console.log(getEle(li10));let head = document.querySelector('head')console.log(getEle(head));let html = document.querySelector('html')console.log(html);console.log(getEle(html));

相关文章:

javaScript:DOM(父子/兄弟)常用属性

目录 前言 一.父子关系 父子关系的常用属性 childNodes 获取所有的子节点 children 获取所有的子元素(dom元素) firstChild 获取元素的第一个子节点,相当于 childNodes[0] firstElementChild 获取元素的第一个元素 相当于 children[0]…...

笔记:linux中LED(GPIO)驱动设备树配置和用法

设备树中节点配置 设备树中的LED驱动一般是这样写&#xff0c;LED驱动可以控制GPIO的电平变化&#xff0c;生成文件节点很方便 leds: leds {compatible "gpio-leds";gpio_demo: gpio_demo {label "gpio_demo";gpios <&gpio0 RK_PC0 GPIO_ACTIV…...

能耗管理+分区温控成为开发节能、省电神器的关键!从此告别电费刺客时代

取暖器在人们脑海中最深刻的印象&#xff0c;就是费电&#xff01;而它耗电量大的原因&#xff0c;主要在于它是靠电能直接转化为热能&#xff1a;在取暖设备通电后&#xff0c;内部高电阻的电热丝发热&#xff0c;风机会将这股热量吹散到室内&#xff0c;从而达到全屋取暖的效…...

垃圾回收 - 复制算法

GC复制算法是Marvin L.Minsky在1963年研究出来的算法。说简单点&#xff0c;就是只把某个空间的活动对象复制到其它空间&#xff0c;把原空间里的所有对象都回收掉。这是一个大胆的想法。在此&#xff0c;我们将复制活动对象的原空间称为From空间&#xff0c;将粘贴活动对象的新…...

基于SpringMVC实现常见功能

基于SpringMVC实现常见功能 防止XSS攻击 XSS攻击全称跨站脚本攻击&#xff0c;是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆&#xff0c;故将跨站脚本攻击缩写为XSS&#xff0c;XSS是一种在web应用中的计算机安全漏洞&#xff0c;它允许恶意web用户将代码植入到…...

MetInfo5.0文件包含漏洞

MetInfo历史版本与文件 环境在这里下载&#xff0c;使用phpstudy搭建 我们来看到这个index.php&#xff0c;如下图所示&#xff0c;其中定义了fmodule变量与module变量&#xff0c;其中require_once语句表示将某个文件引入当前文件&#xff0c;在这个代码中&#xff0c;通过r…...

【SpringBoot】SpringBoot实现基本的区块链的步骤与代码

以下是Spring Boot实现基本的区块链代码的步骤&#xff1a; 创建一个Block类&#xff0c;它表示一个区块&#xff0c;包含一个区块头和一个区块体。区块头包括版本号、时间戳、前一个区块的哈希值和当前区块的哈希值。区块体包含交易数据。 创建一个Blockchain类&#xff0c;它…...

Photoscan/Metashape 2.0.0中的地面激光扫描处理

在Metashape(原Photoscan)2.0.0, 结构化地面激光扫描和非结构化航空激光扫描都可以使用导入点云&#xff08;文件>导入>导入点云&#xff09;命令导入。导入时会保留所有点属性&#xff08;包括结构化信息&#xff09;。 本文讨论以下主题 如何将激光扫描数据导入项目&am…...

git快速使用

1、下载git 设置签名 2、基本概念 工作区&#xff1a;写代码的地方。 暂存区&#xff1a;.git的.index 工作区&#xff1a;.git 3、常用操作 本地codinggit init&#xff0c; 初始化一个本地仓库&#xff0c;项目根目录下会出现个.gitgit remote add origin gitgithub.com…...

java 实现代理模式

代理模式&#xff08;Proxy Pattern&#xff09;是一种结构型设计模式&#xff0c;它允许一个对象&#xff08;代理对象&#xff09;充当另一个对象&#xff08;被代理对象&#xff09;的接口&#xff0c;以控制对该对象的访问。代理模式通常用于以下情况&#xff1a; 远程代理…...

【每日一题】力扣1768. 交替合并字符串

题目以及链接&#xff1a; 1768. 交替合并字符串 给你两个字符串 word1 和 word2 。请你从 word1 开始&#xff0c;通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长&#xff0c;就将多出来的字母追加到合并后字符串的末尾。 返回 合并后的字符串 。 示例 1&…...

vscode新建vue3文件模板

输入快捷新建的名字 enter 确认后在文件中输入以下内容 {// Place your snippets for vue here. Each snippet is defined under a snippet name and has a prefix, body and// description. The prefix is what is used to trigger the snippet and the body will be expand…...

MySql学习笔记02——MySql的简单介绍

MySQL 常用命令 注意在mysql中使用的命令需要用英文分号结尾&#xff08;启动/关闭mysql服务不需要带分号&#xff09; net start mysql 启动mysql服务&#xff08;需要管理员启动cmd&#xff09; net stop mysql关闭mysql服务&#xff08;需要管理员启动cmd&#xff09; m…...

mysql-1:认识mysql

文章目录 数据库概述什么是数据库什么是关系型数据库 MySQL的概述MySQL是什么MySQL发展历程 SQL的概述什么是SQLSQL发展的简要历史&#xff1a;SQL语言分类 数据库概述 什么是数据库 数据库就是[存储数据的仓库]&#xff0c;其本质是一个[文件系统]&#xff0c;数据按照特定的…...

算法通关村-----堆在查找和排序中的应用

数组中的第K个最大元素 问题描述 给定整数数组 nums 和整数 k&#xff0c;请返回数组中第 k 个最大的元素。请注意&#xff0c;你需要找的是数组排序后的第 k 个最大的元素&#xff0c;而不是第 k 个不同的元素。你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。详见le…...

直方图统计增强方法

直方图统计增强方法的原理&#xff1a;   直方图统计增强是一种基于像素值分布的图像增强技术&#xff0c;通过调整像素值的分布来增强图像的对比度和细节。其原理是根据图像的直方图信息&#xff0c;将原始像素值映射到一个新的像素值域&#xff0c;从而改变图像的亮度和对比…...

字节二面:如果高性能渲染十万条数据?

前言 最近博主在字节面试中遇到这样一个面试题&#xff0c;这个问题也是前端面试的高频问题&#xff0c;作为一名前端开发工程师&#xff0c;我们虽然可能很少会遇到后端返回十万条数据的情况&#xff0c;但是了解掌握如何处理这种情况&#xff0c;能让你对前端性能优化有更深的…...

Mysql高阶语句(二)

一、设置别名&#xff08;alias ——>as&#xff09; 在 MySQL 查询时&#xff0c;当表的名字比较长或者表内某些字段比较长时&#xff0c;为了方便书写或者 多次使用相同的表&#xff0c;可以给字段列或表设置别名。使用的时候直接使用别名&#xff0c;简洁明了&#xff0…...

算法笔记 二叉搜索树

二叉搜索树&#xff08;Binary Search Tree&#xff0c;简称 BST&#xff09;是一种数据结构&#xff0c;用于存储具有可比较键&#xff08;通常是数字或字符串&#xff09;的元素 1 结构特点 节点结构&#xff1a;每个节点都有一个键和两个子节点&#xff08;左子节点和右子…...

微软牵手Linux:Ubuntu“系统”上架win10应用商店啦

导读继SUSE Linux登陆之后&#xff0c;Ubuntu今天正式以UWP应用的身份上架Win10应用商店。Windows Insider用户升级到Win10秋季创意者更新预览版Build 16190及以上就可以下载和安装Ubuntu系统应用。一旦下载和安装完Ubuntu应用后&#xff0c;它将开始在你的Windows10 PC上安装U…...

Lombok 的 @Data 注解失效,未生成 getter/setter 方法引发的HTTP 406 错误

HTTP 状态码 406 (Not Acceptable) 和 500 (Internal Server Error) 是两类完全不同的错误&#xff0c;它们的含义、原因和解决方法都有显著区别。以下是详细对比&#xff1a; 1. HTTP 406 (Not Acceptable) 含义&#xff1a; 客户端请求的内容类型与服务器支持的内容类型不匹…...

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

解决Ubuntu22.04 VMware失败的问题 ubuntu入门之二十八

现象1 打开VMware失败 Ubuntu升级之后打开VMware上报需要安装vmmon和vmnet&#xff0c;点击确认后如下提示 最终上报fail 解决方法 内核升级导致&#xff0c;需要在新内核下重新下载编译安装 查看版本 $ vmware -v VMware Workstation 17.5.1 build-23298084$ lsb_release…...

OPenCV CUDA模块图像处理-----对图像执行 均值漂移滤波(Mean Shift Filtering)函数meanShiftFiltering()

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 算法描述 在 GPU 上对图像执行 均值漂移滤波&#xff08;Mean Shift Filtering&#xff09;&#xff0c;用于图像分割或平滑处理。 该函数将输入图像中的…...

Redis的发布订阅模式与专业的 MQ(如 Kafka, RabbitMQ)相比,优缺点是什么?适用于哪些场景?

Redis 的发布订阅&#xff08;Pub/Sub&#xff09;模式与专业的 MQ&#xff08;Message Queue&#xff09;如 Kafka、RabbitMQ 进行比较&#xff0c;核心的权衡点在于&#xff1a;简单与速度 vs. 可靠与功能。 下面我们详细展开对比。 Redis Pub/Sub 的核心特点 它是一个发后…...

AI病理诊断七剑下天山,医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

AGain DB和倍数增益的关系

我在设置一款索尼CMOS芯片时&#xff0c;Again增益0db变化为6DB&#xff0c;画面的变化只有2倍DN的增益&#xff0c;比如10变为20。 这与dB和线性增益的关系以及传感器处理流程有关。以下是具体原因分析&#xff1a; 1. dB与线性增益的换算关系 6dB对应的理论线性增益应为&…...

LangChain知识库管理后端接口:数据库操作详解—— 构建本地知识库系统的基础《二》

这段 Python 代码是一个完整的 知识库数据库操作模块&#xff0c;用于对本地知识库系统中的知识库进行增删改查&#xff08;CRUD&#xff09;操作。它基于 SQLAlchemy ORM 框架 和一个自定义的装饰器 with_session 实现数据库会话管理。 &#x1f4d8; 一、整体功能概述 该模块…...

深入理解Optional:处理空指针异常

1. 使用Optional处理可能为空的集合 在Java开发中&#xff0c;集合判空是一个常见但容易出错的场景。传统方式虽然可行&#xff0c;但存在一些潜在问题&#xff1a; // 传统判空方式 if (!CollectionUtils.isEmpty(userInfoList)) {for (UserInfo userInfo : userInfoList) {…...

xmind转换为markdown

文章目录 解锁思维导图新姿势&#xff1a;将XMind转为结构化Markdown 一、认识Xmind结构二、核心转换流程详解1.解压XMind文件&#xff08;ZIP处理&#xff09;2.解析JSON数据结构3&#xff1a;递归转换树形结构4&#xff1a;Markdown层级生成逻辑 三、完整代码 解锁思维导图新…...