封装一些可能会用到的JS的Dom操作方法(非JS自带的方法)

1. 父元素节点下的子元素节点逆序

HTMLElement.prototype.childRevers = function () {var all_num = this.childElementCount;if (all_num) {while(all_num--){this.appendChild(this.children[all_num]);}}
}
// 获取 ul 父节点对象
var oul = document.getElementsByTagName('ul')[0];
oul.childRevers();

效果:
使用前:

在这里插入图片描述
使用后:
在这里插入图片描述

2. insertAfter() 方法(相对于 insertBefore() 方法)

Node.prototype.insertAfter = function (obj, beforEle) {// 判断该元素是否有下个兄弟元素if (beforEle.nextElementSibling) {// 有的话使用 insertBefore 在下一个兄弟元素之前添加beforEle.parentElement.insertBefore(obj, beforEle.nextElementSibling);} else {// 没有的话直接appendChild添加beforEle.parentElement.appendChild(obj);}
}// 要插入的元素
var op = document.createElement('p');
// 父元素
var oul = document.getElementsByTagName('ul')[0];
// 要在插入在哪个子元素之后
var oli1 = document.getElementsByTagName('li')[1];
// 调用方法
oul.insertAfter(op, oli1);

效果:
使用前:

在这里插入图片描述

使用后:
在这里插入图片描述

3. 寻找兄弟元素节点

说明:
参数为正,找到之后的第N个
参数为负,找到之前的第N个
参数为零,找到自己

/*** 寻找兄弟元素节点* 参数为正,找到之后的第N个* 参数为负,找到之前的第N个* 参数为零,找到自己*/HTMLElement.prototype.findElemSibling = function (num) {// num存在,但是不是numberif (num !== undefined && typeof (num) !== "number") {return undefined;}var t_ele = this;while (num) {if (num > 0) {t_ele = t_ele.nextElementSibling;num--;} else if (num < 0) {t_ele = t_ele.previousElementSibling;num++;}if (!t_ele) {break;}}return t_ele
}var oli = document.getElementsByTagName('li')[1];
console.log(oli.findElemSibling(-1));

效果:
使用前:

在这里插入图片描述
使用后:
在这里插入图片描述

4. 遍历一个父级元素下面的所有子元素节点

HTMLElement.prototype.getAllChildNode = function () {var ele_arr = []if (this.childElementCount) {for (let i = 0; i < this.childElementCount; i++) {let item = this.children[i];ele_arr.push(item)if (item.childElementCount) {ele_arr = ele_arr.concat(item.getAllChildNode())}}}return ele_arr;
}
var odiv = document.getElementsByTagName('div')[0];
console.log(odiv.getAllChildNode());

效果:
使用前:

在这里插入图片描述
使用后:
在这里插入图片描述

5. 找出一个元素的第N层父级元素

HTMLElement.prototype.getEleParent = function (num) {// num存在,但是不是numberif (num !== undefined && typeof (num) !== "number") {return undefined;}var t_ele = {};var all_num = num;// 只有大于零才会查找if (num > 0) {t_ele = this;while (num) {if (t_ele.parentElement) {t_ele = t_ele.parentElement;} else {t_ele = null;break;}num--;}return t_ele;} else {return undefined;}
}var oa = document.getElementsByClassName('item_a')[0];
console.log(oa.getEleParent(2))

效果:
使用前:

在这里插入图片描述

使用后:
在这里插入图片描述

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

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

相关文章

Linux系统iptables

目录 一. 防火墙简介 1. 防火墙定义 2. 防火墙分类 ①. 网络层防火墙 ②. 应用层防火墙 二. iptables 1. iptables定义 2. iptables组成 ①. 规则表 ②. 规则链 3. iptables格式 ①. 管理选项 ②. 匹配条件 ③. 控制类型 四. 案例说明 1. 查看规则表 2. 增加新…

1990-2021年上市公司排污费和环境保护税数据

1990-2021年上市公司排污费和环境保护税数据 1、时间&#xff1a;1990-2021年 2、指标&#xff1a; 证券代码、会计期间、year、month、行业、应缴排污费/环境保护税、其中&#xff1a;大气污染物、其中&#xff1a;水污染物、其中&#xff1a;固体废物、其中&#xff1a;噪…

(二)基于高尔夫优化算法GOA求解无人机三维路径规划研究(MATLAB)

一、无人机模型简介&#xff1a; 单个无人机三维路径规划问题及其建模_IT猿手的博客-CSDN博客 参考文献&#xff1a; [1]胡观凯,钟建华,李永正,黎万洪.基于IPSO-GA算法的无人机三维路径规划[J].现代电子技术,2023,46(07):115-120 二、高尔夫优化算法GOA简介 高尔夫优化算法…

联想SR660 V2服务器使用默认用户登录BMC失败

新到了一台服务器&#xff0c;使用默认用户登录BMC失败 登录失败提示&#xff1a;账号或密码错误 解决方案&#xff1a; 1、重置BMC 2、新增用户 开机后在出现 ThinkServer 界面按 F1&#xff0c;进入 BIOS 界面 进入 System Settings-BMC Configuration 菜单相关&#xf…

Windows 10和11的一个专用的设置菜单,让清理空间变得方便快捷

需要在Windows电脑上释放一些磁盘空间吗?Windows 10和Windows 11都提供了一个专用的设置菜单,使过程更容易。从该菜单中,你可以查看设备上使用了多少空间以及内容类型。 Windows中的“存储”设置还允许你快速清除空间,并启用“存储感知”自动删除临时文件和回收站项目。这…

机器学习:领域自适应学习

训练一个分类器是小问题 上难度 训练数据和测试数据不一致&#xff0c;比如训练数据是黑白的&#xff0c;测试时彩色的&#xff0c;结果准确率非常低。 训练数据和测试数据有点差距的时候&#xff0c;能不能效果也能好呢&#xff1f;这就用到了领域自使用domain adptation 用一…

pkpmbs 建设工程质量监督系统 文件上传漏洞复现

0x01 产品简介 pkpmbs 建设工程质量监督系统是湖南建研信息技术股份有限公司一个与工程质量检测管理系统相结合的&#xff0c;B/S架构的检测信息监管系统。 0x02 漏洞概述 pkpmbs 建设工程质量监督系统 FileUpOrDown.aspx、/Platform/System/FileUpload.ashx、接口处存在任意文…

Python之数据可视化

文章目录 一、1、matplotlib简单应用1.1、绘制带有中文标签和图例的图1.2、 绘制散点图1.3、绘制饼状图1.4、多个图形一起显示 一、 1、matplotlib简单应用 matplotlib模块依赖于numpy模块和tkinter模块&#xff0c;可以绘制多种形式的图形&#xff0c;包括线图、直方图、饼状…

【Java SE】带你在String类世界中遨游!!!

&#x1f339;&#x1f339;&#x1f339;我的主页&#x1f339;&#x1f339;&#x1f339; &#x1f339;&#x1f339;&#x1f339;【Java SE 专栏】&#x1f339;&#x1f339;&#x1f339; &#x1f339;&#x1f339;&#x1f339;上一篇文章&#xff1a;带你走近Java的…

LeetCode [简单](非递归)二叉树的中序遍历

遍历左孩子&#xff0c;将他们放进栈中&#xff0c;左边走到尽头&#xff0c;出栈&#xff0c;root变为栈顶元素&#xff0c;存值&#xff0c;向右边走一个 再次遍历左孩子&#xff0c;将他们放入栈中&#xff0c;如果没有左孩子了&#xff0c;就出栈&#xff0c;root变为栈顶…

MEFLUT: Unsupervised 1D Lookup Tables for Multi-exposure Image Fusion

Abstract 在本文中&#xff0c;我们介绍了一种高质量多重曝光图像融合&#xff08;MEF&#xff09;的新方法。我们表明&#xff0c;曝光的融合权重可以编码到一维查找表&#xff08;LUT&#xff09;中&#xff0c;该表将像素强度值作为输入并产生融合权重作为输出。我们为每次…

【RT-DETR改进】SIoU、GIoU、CIoU、DIoU、AlphaIoU等二十余种损失函数

一、本文介绍 这篇文章介绍了RT-DETR的重大改进&#xff0c;特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体&#xff0c;如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU&#xff0c;还融合了“Alpha”思想&#xff0c;创造了一系列新的损失函数。这些组合形式的…

PyQt基础_007_ 按钮类控件QCombox

import sys from PyQt5.QtCore import * from PyQt5.QtGui import * from PyQt5.QtWidgets import *class ComboxDemo(QWidget):def __init__(self, parentNone):super(ComboxDemo, self).__init__(parent)self.setWindowTitle("combox 例子") self.resize(300, 90) …

手机一键“触达”!VR全景助力政务服务大厅数字升级

在我们的日常生活中&#xff0c;去政务服务大厅办事&#xff0c;总是避免不了遭遇“缺一样材料”的烦恼。因此网友总是吐槽&#xff0c;办事服务窗口总是多次要求提供不同证明&#xff0c;“一会儿说要身份证&#xff0c;一会儿又说要护照”&#xff0c;每次带上服务窗口要求的…

基于合成数据的行人检测AI模型训练

在线工具推荐&#xff1a; 三维数字孪生场景工具 - GLTF/GLB在线编辑器 - Three.js AI自动纹理化开发 - YOLO 虚幻合成数据生成器 - 3D模型在线转换 - 3D模型预览图生成服务 近年来&#xff0c;自动驾驶汽车因其对社会的广泛影响而越来越受欢迎&#xff0c;因为它们提高…

删除排序链表的重复元素I和II,多种解法和思考

删除排序链表的重复元素I https://leetcode.cn/problems/remove-duplicates-from-sorted-list/description/ 一个循环就可以了&#xff0c;如果当前节点和下一个节点值一样&#xff0c;当前节点不移动让next后移动一个&#xff0c;如果不一样则当前节点后移。 一个循环就可以…

代码混淆的原理和方法详解

代码混淆的原理和方法详解摘要移动App的广泛使用带来了安全隐患&#xff0c;为了保护个人信息和数据安全&#xff0c;开发人员通常会采用代码混淆技术。本文将详细介绍代码混淆的原理和方法&#xff0c;并探讨其在移动应用开发中的重要性。 引言随着移动应用的普及&#xff0c;…

【hacker送书第6期】深入理解Java核心技术

第6期图书推荐 内容简介作者简介精彩书评参与方式 内容简介 《深入理解Java核心技术&#xff1a;写给Java工程师的干货笔记&#xff08;基础篇&#xff09;》是《Java工程师成神之路》系列的第一本&#xff0c;主要聚焦于Java开发者必备的Java核心基础知识。全书共23章&#xf…

高级IO—poll,epoll,reactor

高级IO—poll,epoll,reactor 文章目录 高级IO—poll,epoll,reactorpoll函数poll函数接口poll服务器 epollepoll的系统调用epoll_createepoll_ctlepoll_wait epoll的工作原理epoll的工作方式水平触发边缘触发 epoll服务器 reactor poll函数 poll函数是一个用于多路复用的系统调…

STM32之定时器--PWM控制SG90舵机

目录 1、PWM介绍 1.STM32F103C8T6 PWM资源&#xff1a; 2.PWM输出模式 3.PWM周期与频率 4.不同IO口输出PWM相对应连接到定时器的那一路 2、sg90舵机介绍及实战 1.sg90舵机介绍 2.代码实现 1.codeMX配置 2.用到的HAL库函数 1.开始产生PWM信号 返回状态值 2.修改比较…