您的位置:首页 > 教程笔记 > 前端笔记

js如何获取标签内容

2024-06-22 12:25:20 前端笔记 100
如何使用 JavaScript 获取标签内容

获取文本内容

获取标签中文本内容有以下方法:

innerText:获取标签内部的所有文本内容,包括子标签的文本。

textContent:类似于 innerText,但它不会获取子标签的文本。

示例:

const text = element.innerText; // 获取标签及其所有子标签的文本

获取 HTML 内容

获取标签的 HTML 内容有以下方法:

innerHTML:获取标签内部的所有 HTML 内容,包括子标签。

outerHTML:获取标签及其自身内容的 HTML。

示例:

const html = element.innerHTML; // 获取标签及其所有子标签的 HTML

获取属性值

获取标签的属性值有以下方法:

getAttribute(attributeName):获取指定属性的属性值。

dataset[data-attribute-name]:获取 data-* 属性的属性值。

示例:

const value = element.getAttribute("href"); // 获取标签的 href 属性值
const dataValue = element.dataset.myValue; // 获取标签的 data-my-value 属性值

获取标签列表

获取页面中指定标签的列表有以下方法:

querySelectorAll(selector):返回匹配给定选择器的所有标签。

getElementsByTagName(tagName):返回具有指定标签名的所有标签。

示例:

const elements = document.querySelectorAll("p"); // 返回所有 <p> 标签
const elements = document.getElementsByTagName("p"); // 返回所有 </p><p> 标签</p>

相关推荐

  • PHP 内容缓存与优化策略

    PHP 内容缓存与优化策略

    内容缓存可优化 php 网站响应时间,推荐策略包括:内存缓存:用于高速缓存变量,如 mysql 查询结果。文件系统缓存:用于缓存 wordpress 帖子等内容。数据库缓存:适用于购物车或会话等经常更

    综合教程 2024-05-03 19:19:37 46
  • vue中label标签怎么用

    vue中label标签怎么用

    Vue 中 label 标签的使用label 标签的作用label 标签在 Vue 中用于为表单元素(如输入框、单选按钮或复选框)提供可点击的文本标签。当用户单击 label 标签时,它会自动触发关联

    前端笔记 2024-05-03 17:29:39 188
  • vue中通过什么属性获取相应dom元素

    vue中通过什么属性获取相应dom元素

    Vue 中通过什么属性获取相应 DOM 元素在 Vue 中,可以通过 属性获取相应 DOM 元素。 是一个包含所有已编译元素引用的对象。如何使用 要获取 DOM 元素的引用,可以在组件模板中向元素添

    前端笔记 2024-05-03 17:29:18 215
  • css中的em标签是什么意思

    css中的em标签是什么意思

    em 在 css 中代表一个相对于当前字号的长度单位, denoted as em (例如,font-size: 1.2em;)。它与 px (像素) 和 rem (根 em) 不同,因为它是相对的,

    前端笔记 2024-04-29 18:22:49 61
  • css中overflow属性值有哪些

    css中overflow属性值有哪些

    css overflow属性控制元素内容溢出时的处理方式,分别有:1. visible:超出边界显示;2. hidden:隐藏溢出内容;3. scroll:添加滚动条;4. auto:根据需要添加滚动

    前端笔记 2024-04-29 18:22:37 62