当前位置: 首页 > 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…...

AirPodsDesktop:Windows平台苹果耳机功能缺失的突破性解决方案

AirPodsDesktop&#xff1a;Windows平台苹果耳机功能缺失的突破性解决方案 【免费下载链接】AirPodsDesktop ☄️ AirPods desktop user experience enhancement program, for Windows and Linux (WIP) 项目地址: https://gitcode.com/gh_mirrors/ai/AirPodsDesktop 在数…...

Qwen3-VL-2B低成本方案:边缘设备部署实战案例分享

Qwen3-VL-2B低成本方案&#xff1a;边缘设备部署实战案例分享 边缘设备也能跑多模态大模型&#xff1f;Qwen3-VL-2B给你答案 1. 项目背景与价值 如果你正在寻找一个既强大又轻量的多模态模型&#xff0c;Qwen3-VL-2B-Instruct绝对值得关注。这是阿里最新开源的视觉-语言模型&a…...

如何通过HFS哈氏训练改善注意力缺陷儿童的集中程度?

通过HFS哈氏训练提升注意力缺陷儿童的集中技巧 HFS哈氏训练是一种针对注意力缺陷儿童的有效方法&#xff0c;旨在提升他们的集中技巧。这种训练通过特定的游戏和活动&#xff0c;帮助儿童培养注意力控制能力。首先&#xff0c;家长和教育者可以引导孩子参与简短且有趣的任务&am…...

实用指南:使用applera1n安全绕过iOS 15-16激活锁的完整教程

实用指南&#xff1a;使用applera1n安全绕过iOS 15-16激活锁的完整教程 【免费下载链接】applera1n icloud bypass for ios 15-16 项目地址: https://gitcode.com/gh_mirrors/ap/applera1n iOS设备的激活锁是Apple保护用户隐私的重要安全功能&#xff0c;但当您忘记Appl…...

解决SAP ABAP RFC外部调用调试难题:User权限与断点设置技巧

SAP ABAP RFC外部调用调试实战&#xff1a;权限配置与断点优化全指南 在SAP系统集成项目中&#xff0c;RFC&#xff08;Remote Function Call&#xff09;作为跨系统通信的核心技术&#xff0c;其调试过程往往让开发者头疼不已。想象一下这样的场景&#xff1a;你开发的RFC接口…...

3大突破!WPS-Zotero如何重塑科研文献管理流程

3大突破&#xff01;WPS-Zotero如何重塑科研文献管理流程 【免费下载链接】WPS-Zotero An add-on for WPS Writer to integrate with Zotero. 项目地址: https://gitcode.com/gh_mirrors/wp/WPS-Zotero 你是否正在经历这些文献管理困境&#xff1f; 当你在Linux系统上撰…...

7步构建AI绘画流水线:Krita-AI-Diffusion全能力解析

7步构建AI绘画流水线&#xff1a;Krita-AI-Diffusion全能力解析 【免费下载链接】krita-ai-diffusion Streamlined interface for generating images with AI in Krita. Inpaint and outpaint with optional text prompt, no tweaking required. 项目地址: https://gitcode.c…...

每日一书⑩ | AI 未来:未来不属于 AI,属于会用 AI 的人

“本文来自「乐想屋」公众号&#xff0c;系列更新[每日一书]&#xff0c;每次5分钟&#xff0c;帮你把书读薄&#xff0c;把知识用活”01 开篇&#xff1a;AI 不是科幻&#xff0c;是正在发生的现实你可能觉得 AI 还很遥远&#xff0c;但它已经渗透进生活的每个角落&#xff1a…...

WechatBakTool终极指南:如何安全备份与恢复微信聊天记录

WechatBakTool终极指南&#xff1a;如何安全备份与恢复微信聊天记录 【免费下载链接】WechatBakTool 基于C#的微信PC版聊天记录备份工具&#xff0c;提供图形界面&#xff0c;解密微信数据库并导出聊天记录。 项目地址: https://gitcode.com/gh_mirrors/we/WechatBakTool …...

Docker部署AnythingLLM踩坑记:解决SQLite数据库文件无法打开的权限问题

Docker部署AnythingLLM权限问题深度解析&#xff1a;从SQLite报错到容器用户管理实践 部署AnythingLLM时遇到SQLite unable to open database file错误&#xff1f;这背后隐藏着Docker容器用户权限管理的核心知识。本文将带你从表面错误深入到容器用户权限体系的本质&#xff0…...