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驱动一般是这样写,LED驱动可以控制GPIO的电平变化,生成文件节点很方便 leds: leds {compatible "gpio-leds";gpio_demo: gpio_demo {label "gpio_demo";gpios <&gpio0 RK_PC0 GPIO_ACTIV…...

能耗管理+分区温控成为开发节能、省电神器的关键!从此告别电费刺客时代
取暖器在人们脑海中最深刻的印象,就是费电!而它耗电量大的原因,主要在于它是靠电能直接转化为热能:在取暖设备通电后,内部高电阻的电热丝发热,风机会将这股热量吹散到室内,从而达到全屋取暖的效…...

垃圾回收 - 复制算法
GC复制算法是Marvin L.Minsky在1963年研究出来的算法。说简单点,就是只把某个空间的活动对象复制到其它空间,把原空间里的所有对象都回收掉。这是一个大胆的想法。在此,我们将复制活动对象的原空间称为From空间,将粘贴活动对象的新…...
基于SpringMVC实现常见功能
基于SpringMVC实现常见功能 防止XSS攻击 XSS攻击全称跨站脚本攻击,是为不和层叠样式表(Cascading Style Sheets, CSS)的缩写混淆,故将跨站脚本攻击缩写为XSS,XSS是一种在web应用中的计算机安全漏洞,它允许恶意web用户将代码植入到…...

MetInfo5.0文件包含漏洞
MetInfo历史版本与文件 环境在这里下载,使用phpstudy搭建 我们来看到这个index.php,如下图所示,其中定义了fmodule变量与module变量,其中require_once语句表示将某个文件引入当前文件,在这个代码中,通过r…...
【SpringBoot】SpringBoot实现基本的区块链的步骤与代码
以下是Spring Boot实现基本的区块链代码的步骤: 创建一个Block类,它表示一个区块,包含一个区块头和一个区块体。区块头包括版本号、时间戳、前一个区块的哈希值和当前区块的哈希值。区块体包含交易数据。 创建一个Blockchain类,它…...

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

git快速使用
1、下载git 设置签名 2、基本概念 工作区:写代码的地方。 暂存区:.git的.index 工作区:.git 3、常用操作 本地codinggit init, 初始化一个本地仓库,项目根目录下会出现个.gitgit remote add origin gitgithub.com…...
java 实现代理模式
代理模式(Proxy Pattern)是一种结构型设计模式,它允许一个对象(代理对象)充当另一个对象(被代理对象)的接口,以控制对该对象的访问。代理模式通常用于以下情况: 远程代理…...
【每日一题】力扣1768. 交替合并字符串
题目以及链接: 1768. 交替合并字符串 给你两个字符串 word1 和 word2 。请你从 word1 开始,通过交替添加字母来合并字符串。如果一个字符串比另一个字符串长,就将多出来的字母追加到合并后字符串的末尾。 返回 合并后的字符串 。 示例 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中使用的命令需要用英文分号结尾(启动/关闭mysql服务不需要带分号) net start mysql 启动mysql服务(需要管理员启动cmd) net stop mysql关闭mysql服务(需要管理员启动cmd) m…...

mysql-1:认识mysql
文章目录 数据库概述什么是数据库什么是关系型数据库 MySQL的概述MySQL是什么MySQL发展历程 SQL的概述什么是SQLSQL发展的简要历史:SQL语言分类 数据库概述 什么是数据库 数据库就是[存储数据的仓库],其本质是一个[文件系统],数据按照特定的…...
算法通关村-----堆在查找和排序中的应用
数组中的第K个最大元素 问题描述 给定整数数组 nums 和整数 k,请返回数组中第 k 个最大的元素。请注意,你需要找的是数组排序后的第 k 个最大的元素,而不是第 k 个不同的元素。你必须设计并实现时间复杂度为 O(n) 的算法解决此问题。详见le…...
直方图统计增强方法
直方图统计增强方法的原理: 直方图统计增强是一种基于像素值分布的图像增强技术,通过调整像素值的分布来增强图像的对比度和细节。其原理是根据图像的直方图信息,将原始像素值映射到一个新的像素值域,从而改变图像的亮度和对比…...

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

Mysql高阶语句(二)
一、设置别名(alias ——>as) 在 MySQL 查询时,当表的名字比较长或者表内某些字段比较长时,为了方便书写或者 多次使用相同的表,可以给字段列或表设置别名。使用的时候直接使用别名,简洁明了࿰…...

算法笔记 二叉搜索树
二叉搜索树(Binary Search Tree,简称 BST)是一种数据结构,用于存储具有可比较键(通常是数字或字符串)的元素 1 结构特点 节点结构:每个节点都有一个键和两个子节点(左子节点和右子…...
微软牵手Linux:Ubuntu“系统”上架win10应用商店啦
导读继SUSE Linux登陆之后,Ubuntu今天正式以UWP应用的身份上架Win10应用商店。Windows Insider用户升级到Win10秋季创意者更新预览版Build 16190及以上就可以下载和安装Ubuntu系统应用。一旦下载和安装完Ubuntu应用后,它将开始在你的Windows10 PC上安装U…...

抖音增长新引擎:品融电商,一站式全案代运营领跑者
抖音增长新引擎:品融电商,一站式全案代运营领跑者 在抖音这个日活超7亿的流量汪洋中,品牌如何破浪前行?自建团队成本高、效果难控;碎片化运营又难成合力——这正是许多企业面临的增长困局。品融电商以「抖音全案代运营…...

P3 QT项目----记事本(3.8)
3.8 记事本项目总结 项目源码 1.main.cpp #include "widget.h" #include <QApplication> int main(int argc, char *argv[]) {QApplication a(argc, argv);Widget w;w.show();return a.exec(); } 2.widget.cpp #include "widget.h" #include &q…...
Qt Http Server模块功能及架构
Qt Http Server 是 Qt 6.0 中引入的一个新模块,它提供了一个轻量级的 HTTP 服务器实现,主要用于构建基于 HTTP 的应用程序和服务。 功能介绍: 主要功能 HTTP服务器功能: 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)
在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...
MySQL中【正则表达式】用法
MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现(两者等价),用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例: 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2
每日一言 今天的每一份坚持,都是在为未来积攒底气。 案例:OLED显示一个A 这边观察到一个点,怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 : 如果代码里信号切换太快(比如 SDA 刚变,SCL 立刻变&#…...
动态 Web 开发技术入门篇
一、HTTP 协议核心 1.1 HTTP 基础 协议全称 :HyperText Transfer Protocol(超文本传输协议) 默认端口 :HTTP 使用 80 端口,HTTPS 使用 443 端口。 请求方法 : GET :用于获取资源,…...

【C++特殊工具与技术】优化内存分配(一):C++中的内存分配
目录 一、C 内存的基本概念 1.1 内存的物理与逻辑结构 1.2 C 程序的内存区域划分 二、栈内存分配 2.1 栈内存的特点 2.2 栈内存分配示例 三、堆内存分配 3.1 new和delete操作符 4.2 内存泄漏与悬空指针问题 4.3 new和delete的重载 四、智能指针…...
Webpack性能优化:构建速度与体积优化策略
一、构建速度优化 1、升级Webpack和Node.js 优化效果:Webpack 4比Webpack 3构建时间降低60%-98%。原因: V8引擎优化(for of替代forEach、Map/Set替代Object)。默认使用更快的md4哈希算法。AST直接从Loa…...

Linux nano命令的基本使用
参考资料 GNU nanoを使いこなすnano基础 目录 一. 简介二. 文件打开2.1 普通方式打开文件2.2 只读方式打开文件 三. 文件查看3.1 打开文件时,显示行号3.2 翻页查看 四. 文件编辑4.1 Ctrl K 复制 和 Ctrl U 粘贴4.2 Alt/Esc U 撤回 五. 文件保存与退出5.1 Ctrl …...