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

news2025/1/20 19:10:20

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存在,但是不是number
    if (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存在,但是不是number
    if (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.coloradmin.cn/o/1269009.html

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

相关文章

python获取系统当前进程数和最大进程数

参考&#xff1a; https://blog.51cto.com/u_16213345/7115864 https://www.baidu.com/s?wdpython%20%E8%8E%B7%E5%8F%96%E7%B3%BB%E7%BB%9F%E5%BD%93%E5%89%8D%E8%BF%9B%E7%A8%8B%E6%95%B0%E5%92%8C%E6%9C%80%E5%A4%A7%E8%BF%9B%E7%A8%8B%E6%95%B0&rsv_spt1&rsv_iqid…

基于YOLOv8深度学习的PCB板缺陷检测系统【python源码+Pyqt5界面+数据集+训练代码】目标检测

《博主简介》 小伙伴们好&#xff0c;我是阿旭。专注于人工智能AI、python、计算机视觉相关分享研究。 ✌更多学习资源&#xff0c;可关注公-仲-hao:【阿旭算法与机器学习】&#xff0c;共同学习交流~ &#x1f44d;感谢小伙伴们点赞、关注&#xff01; 《------往期经典推荐--…

M1安装RabbitMQ

1.查看centos内核版本 uname -a uname -r2.安装之前的准备工作 安装RabbitMQ必装Erlang(RabbitMQ官网添加链接描述) 2.1.Erlang简介 Erlang是一种通用的面向并发的编程语言&#xff0c;它由瑞典电信设备制造商爱立信所辖的CS-Lab开发&#xff0c;目的是创造一种可以应对…

Java高级技术(动态代理)

一&#xff0c;代理 二&#xff0c;案例 放到代码中演示&#xff1a; 首先&#xff0c;创建一个明星接口&#xff0c;这个接口有一个skill方法&#xff0c;说明只要是明星就必须有点技能。 public interface Star {void skill(); } 然后&#xff0c;创建坤坤对象&#xff0c…

第八天:信息打点-系统端口CDN负载均衡防火墙

信息打点-系统篇&端口扫描&CDN服务&负载均衡&WAF防火墙 一、知识点 1、获取网络信息-服务器厂商&#xff1a; 阿里云&#xff0c;腾讯云&#xff0c;机房内部等。 网络架构&#xff1a; 内外网环境。 2、获取服务信息-应用协议-内网资产&#xff1a; FTP…

服务运营 |精选:床位知多少?医院调度的几种建模方法(下)

编者按&#xff1a; 住院流程&#xff08;Inpatient Flow&#xff09;是一种通过协调和优化医院内部流程&#xff0c;以提高患者入院至出院期间的效率和质量的方法。住院流程通常通过医院内部信息系统和协同工作流程进行管理&#xff0c;以确保患者得到及时的诊断、治疗和护理…

深度学习代码优化(Config,Registry,Hook)

社区开放麦#9 | OpenMMLab 模块化设计背后的功臣 1. 配置文件管理Config 1.1 早期配置参数加载 早期深度学习项目的代码大多使用parse_args&#xff0c;在代码启动入口加载大量参数&#xff0c;不利于维护。 常见的配置文件有3中格式&#xff1a;python、json、yaml 格式的配…

Cytoscape软件下载、安装、插件学习[基础教程]

写在前面 今天分享的内容是自己遇到问题后&#xff0c;咨询社群里面的同学&#xff0c;帮忙解决的总结。 关于Cytoscape&#xff0c;对于做组学或生物信息学的同学基本是陌生的&#xff0c;可能有的同学用这个软件作图是非常溜的&#xff0c;做出来的网络图也是十分的好看&am…

Golang中rune和Byte,字符和字符串有什么不一样

Rune和Byte&#xff0c;字符和字符串有什么不一样 String Go语言中&#xff0c; string 就是只读的采用 utf8 编码的字节切片(slice) 因此用 len 函数获取到的长度并不是字符个数&#xff0c;而是字节个数。 for循环遍历输出的也是各个字节。 Rune rune 是 int32 …

Google分析中的基础概念

当提到Google分析时&#xff0c;我们通常指的是一种用于跟踪和分析网站和应用程序数据的工具。在使用Google分析之前&#xff0c;了解其基础概念对于正确配置和有效使用该工具非常重要。 1、帐户&#xff08;Account&#xff09;&#xff1a;帐户是Google分析中的最高层级。一…

Linux系统之uptime命令的基本使用

Linux系统之uptime命令的基本使用 一、uptime介绍二、uptime命令使用帮助2.1 uptime的help帮助信息2.2 uptime的语法解释 三、uptime的基本使用3.1 直接使用uptime命令3.2 显示uptime版本信息3.3 显示系统运行时间3.4 显示系统最后一次启动时间 四、uptime命令的使用注意事项 一…

案例,linux环境下OpenCV+Java,实现证件照在线更换背景色

先看效果&#xff08;图片来自网络&#xff0c;如有侵权&#xff0c;请联系作者删除&#xff09; 主要是通过java实现的&#xff0c;linux环境编译安装opencv及证件照背景色更换的核心算法在前面一篇文章中有写到。 目前算法还有瞎呲&#xff0c;当照片光线不均的时候会出现误…

Spring---对象的存储和读取

文章目录 Spring对象的存储创建Bean对象将Bean对象存储到spring中添加配置文件存储Bean对象 Spring对象的读取得到Spring上下文对象从Spring中取出Bean对象使用Bean对象 Spring对象的存储 创建Bean对象 Bean对象其实就是一个普通的Java对象。我们按照创建Java对象的方式来创建…

独家揭秘!8种平面设计类型,你都了解吗?

当我们谈起平面设计时&#xff0c;大部分人可能会误以为平面设计只局限于处理二维&#xff08;2D&#xff09;元素&#xff0c;例如设计logo或海报等。这实际上是一个普遍的误解。事实上&#xff0c;平面设计的定义和应用范围要远远超越这个简单的概念。它更多的是采用各种平面…

【代码】考虑灵活性供需平衡的电力系统优化调度模型

程序名称&#xff1a;考虑灵活性供需平衡的电力系统优化调度模型 实现平台&#xff1a;matlab-yalmip-cplex/gurobi 代码简介&#xff1a;最可再生能源发电设备和并网技术快速发展&#xff0c;以新能源为主导的新型电力系统逐步形成。高比例新能源的随机波动性导致电力系统的…

物联网开发(一)新版Onenet 基础配置

onenet新创建的账号&#xff0c;没有了多协议接入&#xff0c;只有新的物联网开放平台 第一讲&#xff0c;先给大家讲一下&#xff1a;新版Onenet 基础配置 创建产品 产品开发-->创建产品 产品的品类选择个&#xff1a;大致符合你项目的即可&#xff0c;没有影响 选择智…

智能客服核心技术——预测会话与答案生成

1.信息检索 2. 句型模板匹配标准问题生成答案 3.根据知识图谱推理得到答案

模拟算法【1】

文章目录 &#x1f600;1576. 替换所有的问号&#x1f606;题目&#x1f929;算法原理&#x1f642;代码实现 &#x1f60a;495.提莫攻击&#x1fae0;题目&#x1f609;算法原理&#x1f917;代码实现 模拟算法 通俗的来说&#xff0c;模拟算法就是依葫芦画瓢&#xff0c;将题…

网络运维与网络安全 学习笔记2023.11.29

网络运维与网络安全 学习笔记 第三十天 今日更新太晚啦&#xff01;&#xff01;&#xff01; 主要是今天工作时挨了一天骂&#xff0c;服了&#xff0c;下次记得骂的轻一点&#xff01;&#xff01;&#xff01; &#xff08;要不是为了那点微薄的薪资&#xff0c;谁愿意听你…

MySQL进阶知识:三

前言 未更新完毕&#xff01;大概明天更完&#xff01; 锁 MySQL中的锁&#xff0c;按照锁的粒度分&#xff0c;分为以下三类 全局锁&#xff1a;锁定数据库中的所有表。表级锁&#xff1a;每次操作锁住整张表。行级锁&#xff1a;每次操作锁住对应的行数据。 全局锁 全局…