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

抖音增长新引擎:品融电商,一站式全案代运营领跑者

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

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 中引入的一个新模块&#xff0c;它提供了一个轻量级的 HTTP 服务器实现&#xff0c;主要用于构建基于 HTTP 的应用程序和服务。 功能介绍&#xff1a; 主要功能 HTTP服务器功能&#xff1a; 支持 HTTP/1.1 协议 简单的请求/响应处理模型 支持 GET…...

NLP学习路线图(二十三):长短期记忆网络(LSTM)

在自然语言处理(NLP)领域,我们时刻面临着处理序列数据的核心挑战。无论是理解句子的结构、分析文本的情感,还是实现语言的翻译,都需要模型能够捕捉词语之间依时序产生的复杂依赖关系。传统的神经网络结构在处理这种序列依赖时显得力不从心,而循环神经网络(RNN) 曾被视为…...

MySQL中【正则表达式】用法

MySQL 中正则表达式通过 REGEXP 或 RLIKE 操作符实现&#xff08;两者等价&#xff09;&#xff0c;用于在 WHERE 子句中进行复杂的字符串模式匹配。以下是核心用法和示例&#xff1a; 一、基础语法 SELECT column_name FROM table_name WHERE column_name REGEXP pattern; …...

学习STC51单片机32(芯片为STC89C52RCRC)OLED显示屏2

每日一言 今天的每一份坚持&#xff0c;都是在为未来积攒底气。 案例&#xff1a;OLED显示一个A 这边观察到一个点&#xff0c;怎么雪花了就是都是乱七八糟的占满了屏幕。。 解释 &#xff1a; 如果代码里信号切换太快&#xff08;比如 SDA 刚变&#xff0c;SCL 立刻变&#…...

动态 Web 开发技术入门篇

一、HTTP 协议核心 1.1 HTTP 基础 协议全称 &#xff1a;HyperText Transfer Protocol&#xff08;超文本传输协议&#xff09; 默认端口 &#xff1a;HTTP 使用 80 端口&#xff0c;HTTPS 使用 443 端口。 请求方法 &#xff1a; GET &#xff1a;用于获取资源&#xff0c;…...

【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​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

Linux nano命令的基本使用

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