当前位置: 首页 > news >正文

javascript选取元素的范围,可以包含父级,也可以不包含父级

//函数可以选取元素的范围,对于要选取文本的非常方便,或选取特定的子节点

 function getRange(element){//判断是否支持range范围选取var sup=document.implementation.hasFeature("Range","2.0");var also=(typeof document.createRange=="function");//如果都是真,则进行范围选取if(sup && also){//创建包括父级的范围var range1=document.createRange();//创建element元素本级的范围var range2=document.createRange();//获得元素var p1=document.getElementById(element) || document.getElementsByClassName(element)[0];var p1index=-1,i,len;for(i=0,len=p1.parentNode.childNodes.length;i<len;i++){if(p1.parentNode.childNodes[i]==p1){p1index=i;break;}}//创建范围range1.setStart(p1.parentNode,p1index);range1.setEnd(p1.parentNode,p1index+1);//创建元素本级的范围range2.setStart(p1,0);range2.setEnd(p1,p1.childNodes.length);return {//返回选择的范围range1:range1.startContainer,range2:range2.startContainer}p1=null;//清除范围,释放内存和引用range1.detach();range2.detach();range1=null;range2=null;}else{alert("浏览器不支持2.0的范围选取");}}//传入元素var p1=getRange("bd");console.log(p1.range1);console.log(p1.range2);console.log(p1.range2.firstChild);console.log(p1.range2.childNodes[1].lastChild.data);

//html部分

<div id="container"><div class="bd"><p id="p1"><b>Hello</b> world!</p></div></div>

相关文章:

javascript选取元素的范围,可以包含父级,也可以不包含父级

//函数可以选取元素的范围&#xff0c;对于要选取文本的非常方便&#xff0c;或选取特定的子节点 function getRange(element){//判断是否支持range范围选取var supdocument.implementation.hasFeature("Range","2.0");var also(typeof document.createRan…...

QGIS怎么修改源代码?持续更新...

修改配置文件保存位置 修改目的&#xff1a;放着和本地安装的其他QGIS共用一份配置文件 修改文件&#xff1a;core/qgsuserprofilemanager.cpp 修改位置&#xff1a;第37行 return basePath QDir::separator() "my_profiles";修改完毕后&#xff0c;再次生成一下…...

dev board sig技术文章:轻量系统适配ARM架构芯片平台

摘要&#xff1a;本文简单介绍OpenHarmony轻量系统移植&#xff0c;会分多篇 适合群体&#xff1a;想自己动手移植OpenHarmony轻量系统的朋友 开始尝试讲解一下系统的移植&#xff0c;主要是轻量系统&#xff0c;也可能会顺便讲下L1移植。 1.1移植类型 OpenHarmony轻量系统的…...

MyBatis之增删查改功能

文章目录 一、创建各种类二、MyBatis的各种功能 1、查询<select>2、增加<insert>3、修改<update>4、删除<delete>三、总结 前言 在MyBatis项目中编写代码实现对MySql数据库的增删查改 一、创建各种类 1、在Java包的mapper文件下创建一个接口 我创建…...

Leetcode算法入门与数组丨5. 数组二分查找

文章目录 1 二分查找算法2 二分查找细节3 二分查找两种思路3.1 直接法3.2 排除法 1 二分查找算法 二分查找算法是一种常用的查找算法&#xff0c;也被称为折半查找算法。它适用于有序数组的查找&#xff0c;并通过将待查找区间不断缩小一半的方式来快速定位目标值。 算法思想…...

拓扑关系如何管理?

在设备对接涂鸦的云端过程中&#xff0c;一部分设备由于自身资源或硬件配置&#xff0c;无法直接连接云端。而是需要通过网关进行中转&#xff0c;由网关代理实现和云端进行数据交互&#xff0c;间接实现设备接入云端。这样的设备也称为子设备。 要想实现网关代理子设备接入云…...

vue的由来、vue教程和M-V-VM架构思想、vue的使用、nodejs

vue vue的由来 vue教程和M-V-VM架构思想 vue的初步简单使用 nodejs vue的由来 # 1 HTML(5)、CSS(3)、JavaScript(ES5、ES6、ES11)&#xff1a;编写一个个的页面 -> 给后端(PHP、Python、Go、Java) -> 后端嵌入模板语法 -> 后端渲染完数据 -> 返回数据给前端 ->…...

课程表 循环依赖 拓扑排序 go语言

学会拓扑排序题目的基本解法 res数组 记录上课顺序g 记录学了课程i 能解锁的课程jindeg 记录每个课程的入度q 记录入度为0的课程 for循环q去解放其他课程 本题来自力扣课程表 func findOrder(numCourses int, prerequisites [][]int) []int {res : []int{}//建一个二维数组记…...

【红包雨接口设计】

一、服务器地址 http://rb.atguigu.cn 二、公共请求头参数 参数名称类型是否必选描述tokenString是用户唯一标识 备注&#xff1a;为了方便我们今天演示&#xff0c;服务端接受所有token。 三、接口 1. 创建红包雨 请求方式&#xff1a;GET请求地址&#xff1a;/api/v1/se…...

SSL证书到期更换证书会影响排名吗?

在现代的数字化时代&#xff0c;网络安全和用户体验成为了网站运营商和开发者们需要高度关注的问题。SSL证书作为一种重要的安全协议&#xff0c;对网站的安全性和用户信任起着至关重要的作用。然而&#xff0c;随着SSL证书的有效期限届满&#xff0c;许多网站运营商面临着更换…...

前端常用库之-JavaScript工具库lodash

文章目录 前端常用库之-JavaScript工具库lodash一、什么是lodash二、安装三、lodash使用Lodash 的 pick() 函数介绍和使用react 实例demo&#xff1a;pick结合...展开运算符(spread operator) 前端常用库之-JavaScript工具库lodash 一、什么是lodash 官网&#xff1a; https:…...

Linux- execve()

execve() 是 Linux/UNIX 中的 exec 函数家族中的一个&#xff0c;它允许进程执行一个新的程序。具体地&#xff0c;execve() 替换当前进程的映像为新的程序映像。 函数原型如下&#xff1a; int execve(const char *pathname, char *const argv[], char *const envp[]);pathn…...

007 数据结构_堆——“C”

前言 本文将会向您介绍关于堆Heap的实现 具体步骤 tips&#xff1a;本文具体步骤的顺序并不是源代码的顺序 typedef int HPDataType; typedef struct Heap {HPDataType* _a;int _size;int _capacity; }Heap;初始化 void HeapCreate(Heap* hp, HPDataType* a, int n) {hp-&…...

zabbix的原理与安装

一、Zabbix介绍 1、zabbix 是什么&#xff1f; zabbix是一个开源的IT基础监控软件&#xff0c;能实时监控网络服务&#xff0c;服务器和网络设备的状态&#xff0c;如网络使用&#xff0c;CPU负载、磁盘空间等&#xff0c;主要是包括数据的收集、报警和通知的可视化界面zabbi…...

ReactNative中升级IOS 17版本Crash解决

ReactNative中升级IOS 17版本Crash解决 ReactNative中升级IOS 17版本Crash解决一、问题描述二、原因分析三、解决方案决策3.1 设置宽高为非零值3.2 使用新的UIGraphicsImageRenderer替换就版本的UIGraphicsBeginImageContext 四、可能使用到该API的三方库4.1 react-native-fast…...

MongoDB详解

一、MongoDB概述 MongoDB 是一个基于 分布式文件存储 的开源 NoSQL 数据库系统&#xff0c;由 C 编写的。MongoDB 提供了 面向文档 的存储方式&#xff0c;操作起来比较简单和容易&#xff0c;支持“无模式”的数据建模&#xff0c;可以存储比较复杂的数据类型&#xff0c;是一…...

【SpringCloud微服务全家桶学习笔记-服务注册zookeeper/consul】

SpringCloud微服务全家桶学习笔记 Eureka服务注册 gitee码云仓库 9.其他服务注册框架 &#xff08;1&#xff09;zookeeper安装与使用 zookeeper需安装在虚拟机上&#xff0c;建议使用CentOS&#xff0c;安装地址如下&#xff1a; zookeeper镜像源 选择第一个进入后下载ta…...

【滑动窗口】LCR 016. 无重复字符的最长子串

LCR 016. 无重复字符的最长子串 解题思路 窗口内的字符串就是不重复子串每次遇到新的字符 看看窗口内是否存在该字符 如果存在直接剔除 然后调整窗口左边界不存在 添加窗口内部 右边界 class Solution {public int lengthOfLongestSubstring(String s) {if(s.length() < …...

C++中将类成员函数作为变量传递给函数

假设类ClassName有一个成员函数 void ClassName::funcname(int);通过typedef定义一个类成员函数指针类型,参数和返回值类型都要与成员函数对应 typedef void (ClassName::*FuncPtr)(int); // 定义类成员函数指针获取到的参数就是 FuncPtr pf...

2024届数字IC设计秋招面经-鼎信

背景 985硕士&#xff0c;计算机科班&#xff0c;实验室做cpu设计和fpga算法加速&#xff0c;我做处理器安全方向&#xff0c;有项目。 投递 8.25 没有笔试&#xff0c;两轮面试&#xff0c;直接通知下周一面试&#xff0c;草草的准备了下。 一面 技术面 9.4 不到半小时 …...

告别混乱!用Cadence Allegro SPB17.4从DXF文件创建PCB封装的完整清洁流程

告别混乱&#xff01;用Cadence Allegro SPB17.4从DXF文件创建PCB封装的完整清洁流程 在PCB设计领域&#xff0c;从机械图纸&#xff08;DXF&#xff09;快速创建精确的封装是工程师常面临的挑战。许多设计师都经历过这样的困扰&#xff1a;导入DXF后&#xff0c;封装在3D预览中…...

实战复盘:我是如何通过一个SSRF漏洞,利用Gopher协议拿下内网Redis的

从SSRF到内网Redis入侵&#xff1a;一次真实渗透测试的深度剖析 那天下午&#xff0c;我正在对某企业Web应用进行常规安全评估。一个看似普通的文件下载接口引起了我的注意——它接受URL参数并返回对应资源内容。直觉告诉我&#xff0c;这里可能存在SSRF漏洞。接下来的72小时&a…...

AI Agent配置安全实践:用Config-Guard为自动化变更加锁

1. 项目概述&#xff1a;为AI Agent系统配置变更加上“安全锁”如果你正在运行一个基于OpenClaw或其他类似框架的AI Agent系统&#xff0c;那么你一定对那个核心的配置文件——通常是openclaw.json或类似的config.json——又爱又恨。它掌控着网关、模型、渠道和工具的命脉&…...

AI开发者实战指南:从工具全景到本地知识库搭建

1. 从Awesome List到实战地图&#xff1a;一份AI开发者工具全景解析如果你是一名AI开发者、研究者&#xff0c;或者只是对构建AI应用充满好奇的技术爱好者&#xff0c;面对浩如烟海的工具、框架和平台&#xff0c;最头疼的恐怕就是“我该从哪里开始&#xff1f;”这个问题。网上…...

Beyond Compare 5完全激活指南:3种简单方法告别30天试用限制

Beyond Compare 5完全激活指南&#xff1a;3种简单方法告别30天试用限制 【免费下载链接】BCompare_Keygen Keygen for BCompare 5 项目地址: https://gitcode.com/gh_mirrors/bc/BCompare_Keygen 你是否正在使用Beyond Compare 5这款强大的文件对比工具&#xff0c;却因…...

XUnity.AutoTranslator完全指南:轻松实现Unity游戏多语言本地化

XUnity.AutoTranslator完全指南&#xff1a;轻松实现Unity游戏多语言本地化 【免费下载链接】XUnity.AutoTranslator 项目地址: https://gitcode.com/gh_mirrors/xu/XUnity.AutoTranslator 你是否曾因语言障碍而错过精彩的Unity游戏&#xff1f;是否想为心爱的游戏添加…...

从RISC-V到SSITH:构建下一代硬件安全架构的开放之路

1. 项目概述&#xff1a;从“亡羊补牢”到“未雨绸缪”的硬件安全范式转移在智能设备无处不在的今天&#xff0c;我们正面临一个尴尬的现实&#xff1a;许多产品的安全设计&#xff0c;更像是在一栋已经建好的毛坯房里&#xff0c;见缝插针地安装防盗门和监控摄像头。这种“事后…...

从新手到老手:四类Ozon卖家选品工具选择指南

选品工具没有“最好”&#xff0c;只有“最匹配你当前阶段”。四类卖家&#xff0c;四种方案。市面上的Ozon选品工具&#xff0c;功能各有侧重。有的擅长给数据&#xff0c;有的擅长给结论&#xff0c;有的擅长管店铺。不同阶段的卖家&#xff0c;痛点不同&#xff0c;适合的工…...

Sora 2国内可用性深度测评(2024Q2最新版):API调用失败率<0.8%的私有化部署方案首次公开

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;ChatGPT Sora 2视频生成怎么用 Sora 2 并非 OpenAI 官方发布的模型——截至目前&#xff08;2024年中&#xff09;&#xff0c;OpenAI 仅公开了 Sora&#xff08;初代&#xff09;的演示能力&#xff0…...

Flink:Keyed State vs Operator State 原理与实践

一、引言在 Flink 实时计算的世界里&#xff0c;流处理的本质可以概括为公式&#xff1a;实时流处理 业务逻辑 状态&#xff08;State&#xff09;。无论是窗口聚合、双流 Join 还是复杂的 CEP 模式匹配&#xff0c;都离不开状态管理。Flink 提供了两种基本的状态类型&#x…...