首页
学习
活动
专区
工具
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 元素下的所有 指定类型的标签 ; 代码示例 : <!

    9710

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

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

    4K30

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

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

    7610

    从零开始学 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错误) 获取某个字相对于容器内所有的innertext的index(其实就是为了知道光标相对于innertext...的index位置) 获取第index个字符距离容器的左上角的距离 把弹窗准确挂在所选文字结束光标下 基于这一套,服务端只需要存储的信息是:光标起点位置、光标终点位置、所选文字,前端这边完全可以实现所有的需求...渲染的时候有补上id了,所以这些信息都是可以知道的。原生dom操作选择元素,加上一个active激活类。...问题等于,判断commonAncestorContainer是否属于container下 获取起点光标和结束点光标距离container所有的innertext的index 通过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() - 设置或返回所选元素的内容...方法用于获取属性值。

    70920

    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() - 设置或返回所选元素的内容...方法用于获取属性值。

    96050
    领券