当前位置: 首页 > 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>
http://www.lryc.cn/news/171313.html

相关文章:

  • QGIS怎么修改源代码?持续更新...
  • dev board sig技术文章:轻量系统适配ARM架构芯片平台
  • MyBatis之增删查改功能
  • Leetcode算法入门与数组丨5. 数组二分查找
  • 拓扑关系如何管理?
  • vue的由来、vue教程和M-V-VM架构思想、vue的使用、nodejs
  • 课程表 循环依赖 拓扑排序 go语言
  • 【红包雨接口设计】
  • SSL证书到期更换证书会影响排名吗?
  • 前端常用库之-JavaScript工具库lodash
  • Linux- execve()
  • 007 数据结构_堆——“C”
  • zabbix的原理与安装
  • ReactNative中升级IOS 17版本Crash解决
  • MongoDB详解
  • 【SpringCloud微服务全家桶学习笔记-服务注册zookeeper/consul】
  • 【滑动窗口】LCR 016. 无重复字符的最长子串
  • C++中将类成员函数作为变量传递给函数
  • 2024届数字IC设计秋招面经-鼎信
  • 【数据结构】二叉树的节点数,叶子数,第K层节点数,高度,查找x节点,判断是否为完全二叉树等方法
  • 前馈神经网络(FFNN)和多层感知机(MLP)
  • EasySwipeMenuLayout - 独立的侧滑删除
  • 优麒麟下载、安装、体验
  • Appium混合页面点击方法tap的使用
  • 求解灰度直方图,如何绘制灰度直方图(数字图像处理大题复习 P1)
  • 8种结构型设计模式对比
  • 【PX4】Ubuntu20.04+ROS Noetic 配置PX4-v1.12.2和Gazebo11联合仿真环境【教程】
  • msvcp120.dll丢失怎么办?(五种方法快速解决)
  • eslint写jsx报错
  • 最新适合小白前端 Javascript 高级常见知识点详细教程(每周更新中)