首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

获取所选文本的所有DOM块元素

获取所选文本的所有DOM块元素可以使用JavaScript代码实现。以下是一个示例代码:

代码语言:javascript
复制
// 获取所有的DOM块元素
function getBlockElements() {
  const blockElements = ['div', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'ol', 'ul', 'li', 'pre', 'blockquote', 'hr', 'table', 'tbody', 'thead', 'tfoot', 'tr', 'td', 'th', 'form', 'fieldset', 'legend', 'label', 'input', 'textarea', 'select', 'button', 'img', 'canvas', 'video', 'audio', 'iframe', 'embed', 'object', 'param', 'applet', 'map', 'area', 'script', 'noscript', 'style', 'link', 'meta', 'head', 'title', 'base', 'body', 'html'];
  const elements = [];
  for (const element of blockElements) {
    const selectedElements = document.querySelectorAll(element);
    elements.push(...selectedElements);
  }
  return elements;
}

// 调用函数获取所有的DOM块元素
const blockElements = getBlockElements();
console.log(blockElements);

这个代码会获取页面上所有的DOM块元素,包括div、p、h1、h2、h3、h4、h5、h6、ol、ul、li、pre、blockquote、hr、table、tbody、thead、tfoot、tr、td、th、form、fieldset、legend、label、input、textarea、select、button、img、canvas、video、audio、iframe、embed、object、param、applet、map、area、script、noscript、style、link、meta、head、title、base、body和html等元素。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 【Web APIs】DOM 文档对象模型 ② ( 根据标签名获取 DOM 元素 - getElementsByTagName 函数 | 获取指定标签下 DOM 元素 )

    函数 , 可以获取 指定标签名称 若干 Element 对象集合 ; 调用 Document 函数 , 获取是 整个文档 指定标签名称 元素 ; 调用 Element 函数 , 获取是...对象 ; 该对象中 DOM 元素顺序是按照 DOM DOM 元素 发现顺序 进行排列 ; HTMLCollection 对象是一个 " 伪数组 " , 有数组长度 , 也可以使用索引下标访问...函数 , 可以获取到 封装了多个 Element DOM 元素 HTMLCollection 对象 ; HTMLCollection 对象是 时刻 动态改变 , 如果 HTML 文档结构发生了改变...: 3、获取指定标签下 DOM 元素 - getElementsByTagName 函数 上面的示例中都是获取 Document 文档下面的所有 标签名称 对应 Element 元素 , 如果指向获取某一个指定标签下...函数 , 获取 Element 元素所有 指定类型标签 ; 代码示例 : <!

    7510

    动态生成DOM元素高度及行数获取与计算方法

    背景 在开发IM项目过程中,经常会有出现一些需要计算DOM高度,然后超出若干行隐藏等需求。很多时候,需要计算高度DOM元素都是动态生成,我们无法在数据渲染前获取到它高度。...但是,如果我们需要获取到这段在内存中未渲染动态文本,也能够通过如下几个方法。...技术方案 根据前端基本常识,在内存中未渲染DOM元素是无法获取到高度,因此我们有两个方向来解决这个难题: 通过字数对行数进行估算 将元素渲染后进行高度测算 实现方案 以下实现方案将根据上面所选技术方案来进行实现...在DOM渲染后进行操作 方案 顾名思义,此方案就是先不考虑DOM元素行数逻辑,直接将所有DOM节点全部渲染到页面中,渲染完成后再对进行后续逻辑判断。获取高度后页面行数计算将在后面统一讲解。...理论上我们容器都应该为元素,否则计算高度意义也就不存在了。因此在容器clone时只需要留意即可,不需要重新指定。

    3.9K30

    C# 获取 Excel 文件所有文本数据内容

    功能需求 获取上传 EXCEL 文件所有文本信息并存储到数据库里,可以进一步实现对文件内容资料关键字查询全文检索。...有助于我们定位相关文档,基本实现步骤如下: 1、上传 EXCEL 文件,获取二进制数据并创建副本文件。 2、将EXCEL 副本文件通过 COM API 导出到指定文本文件。...3、获取文本文件内容字符串并存储到数据库中。...Excel文件文本内容 getExcelContent 方法返回 string 类型内容,即表示EXCEL 文件文本内容,说明如下表: 序号 参数名 类型 说明 1 _filename string...总结 以上代码我们提供了一些操作 EXCEL API关键方法,后续我们可以将文本内容存储到数据库中,查询或下载,可以参考我文章: 《C# 将 Word 转文本存储到数据库并进行管理》 关于 EXCEL

    6710

    从零开始学 Web 之 DOM(二)对样式操作,获取元素方式

    2、获取元素方式总结 1、根据 id 属性获取元素,返回值是一个元素对象 document.getElementById("id属性值"); 2、根据标签名获取元素,返回值是包含多个元素对象伪数组...document.getElementsByTagName("标签名字"); 3、根据 name 属性获取元素,返回值是包含多个元素对象伪数组 document.getElementsByName...("name属性值"); 4、根据 class 类样式名字获取元素,返回值是包含多个元素对象伪数组 document.getElementsByClassName("class类样式值"); 5...、根据 CSS 选择器获取元素,返回值是一个元素对象 document.querySelector("#id属性值"); document.querySelector("标签名字"); document.querySelector...(".class类样式值"); 6、根据 CSS 选择器获取元素,返回值是包含多个元素对象伪数组 document.querySelectorAll("#id属性值"); document.querySelectorAll

    2.1K40

    Web前端JQuery面试题(二)

    DOM对象,DOM文本对象模型,DOM每一个页面都是一个DOM对象。通过JavaScript方法获取页面元素对象,就是DOM对象。...) 获取包含给定文本元素 :empty 获取所有不包含子元素文本元素 如: :has(selector) 获取所选择器所有元素 :parent 获取含有子元素文本元素...匹配所有复选框 :submit 匹配所有提交按钮 :image 匹配所有图像 :reset 匹配所有重置按钮 :button 匹配所有按钮 :file 匹配所有文本域 5.请问你能写出dom结构吗?...text(val): 设置元素文本内容 val(): 获取元素值 val(val): 为元素设置值 val().join(","): 获取选中多个选项值,用于获取select中多个选项值...wrap(elem): 将所有选择元素用其他Dom元素包裹起来 wrap(fn) unwrap() 移除所选元素元素或包裹标记 wrapAll(html),wrapAll(elem) wrapInner

    1.9K30

    jQuery学习笔记

    ;区分大小写 :empty 选取不含子元素或者文本节点元素 :has(selector) 选取含有选择器所匹配元素元素 :parent 选取含有子元素文本节点元素 属性过滤选择器 [...100% 完成之后执行 jQuery DOM 获取/设置内容 text() 设置/返回所选元素文本内容[原型:innerhtml] html() 设置/返回所选元素内容(含HTML标签) val(...) 设置/樊湖表单字段value 获取/设置属性 attr() 设置/返回所选元素属性内容(支持多个属性设置,返回数组) 添加元素 append() 尾部插入元素 prepend() 开头插入元素...向上遍历DOM树 parent() 返回自己直接父类元素 parents() 返回自己所有直系类元素(直至根元素) parentsUntil() 返回两种直接所有直系类元素(不包含) // parents...,指定标签、类名、id、name等) 水平遍历DOM树 siblings() 返回被选元素所有同级元素(支持过滤参数) next() 返回被选元素下一个同级元素 nextAll() 返回被选元素之后所有同级元素

    7.4K30

    你这磨人小妖精——选中文本并标注实现过程

    ().getRangeAt(0)获取range对象(有时候会失败,因为没选,需要catch错误) 获取某个字相对于容器内所有的innertextindex(其实就是为了知道光标相对于innertext...index位置) 获取第index个字符距离容器左上角距离 把弹窗准确挂在所选文字结束光标下 基于这一套,服务端只需要存储信息是:光标起点位置、光标终点位置、所选文字,前端这边完全可以实现所有的需求...渲染时候有补上id了,所以这些信息都是可以知道。原生dom操作选择元素,加上一个active激活类。...问题等于,判断commonAncestorContainer是否属于container下 获取起点光标和结束点光标距离container所有的innertextindex 通过container、startOffset...react元素 // 现在全部换成原生js字符串拼接 + 原生dom操作 aside.innerHTML = ` xxxxx

    1.9K30

    JavaScript强化教程——jQuery - 获得内容和属性

    社区 未经同意,禁止转载 本文为 H5EDU 机构官方 HTML5培训 教程,主要介绍:JavaScript强化教程 —— jQuery - 获得内容和属性 jQuery 拥有可操作 HTML 元素和属性强大方法...jQuery DOM 操作 jQuery 中非常重要部分,就是操作 DOM 能力。 jQuery 提供一系列与 DOM 相关方法,这使访问和操作元素和属性变得很容易。...提示:DOM = Document Object Model(文档对象模型) DOM 定义访问 HTML 和 XML 文档标准: “W3C 文档对象模型独立于平台和语言界面,允许程序和脚本动态访问和更新文档内容...获得内容 - text()、html() 以及 val() 三个简单实用用于 DOM 操作 jQuery 方法: text() - 设置或返回所选元素文本内容 html() - 设置或返回所选元素内容...方法用于获取属性值。

    95050
    领券