如何在div中获取两个不同的类文本

在HTML中，如果你想在<div>元素中获取两个不同的类的文本，你可以使用JavaScript来实现。以下是一个基本的示例，展示了如何获取具有不同类的元素的文本内容：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>获取不同类的文本</title>
</head>
<body>

<div id="container">
  <span class="class1">这是类1的文本。</span>
  <span class="class2">这是类2的文本。</span>
</div>

<script>
// 获取容器元素
var container = document.getElementById('container');

// 获取类1的文本
var class1Text = container.querySelector('.class1').textContent;

// 获取类2的文本
var class2Text = container.querySelector('.class2').textContent;

console.log('类1的文本: ', class1Text);
console.log('类2的文本: ', class2Text);
</script>

</body>
</html>

在这个例子中，我们首先通过getElementById获取了包含两个类的<div>元素。然后，我们使用querySelector方法和类选择器（如.class1和.class2）来分别获取这两个类的元素，并通过textContent属性获取它们的文本内容。

如果你遇到的问题是在获取文本时发现内容为空或者不正确，可能的原因包括：

类选择器错误：确保你的类名与HTML中的类名完全匹配。
元素不存在：确保在尝试获取文本之前，对应的元素已经加载到DOM中。
JavaScript执行顺序问题：如果JavaScript代码在HTML元素渲染之前执行，可能会导致无法正确获取元素。可以通过将脚本放在<body>标签的底部或者使用DOMContentLoaded事件来解决。

解决这些问题的方法：

检查并确保类名的正确性。
确保JavaScript代码在DOM元素加载完成后执行，可以通过将<script>标签放在HTML文档的底部或者使用如下代码：

document.addEventListener('DOMContentLoaded', function() {
  // 你的代码
});

这样，你的JavaScript代码就会在DOM完全加载后执行，从而可以正确获取到元素的文本内容。

参考链接：

相关·内容

如何在非Spring容器管理的类中注入获取 Spring容器中的 Bean？

如何在非Spring容器管理的类中注入/获取 Spring容器中的 Bean？前言：此文仅限新手入行，大佬回避。...什么是被Spring容器管理的类？只要是被称之为Bean的类就是被Spring容器管理的类。...不了解的可以看看小简写的这一篇：将Bean交给Spring容器管理的几种方式在非Spring管理的类中怎么办？有时候我们就是需要在非Spring管理的类中使用Bean怎么办呢？...比如我这一篇：踩坑篇之WebSocket实现类中无法使用@Autowired注入对象解决方法我们定义一个上下文类，在Spring将Bean全部扫描完成后，我们去使用类去实现ApplicationContextAware...接口，重写setApplicationContext方法，获取到ApplicationContext数据后，放到静态属性中。

4.3K4 0

如何在 React 中实现鼠标悬停显示文本？

本文将详细介绍如何在 React 中实现鼠标悬停显示文本的功能，并提供示例代码帮助你理解和应用这个功能。...在组件的返回值中，我们将元素作为悬停触发区域，并根据 isHovered 状态来决定是否显示文本。...在 React 中，有一些流行的库可以帮助我们实现鼠标悬停显示文本的功能，如 react-tooltip 和 react-popper-tooltip继续上述内容：使用 react-tooltipreact-tooltip...通过 getTriggerProps 函数获取触发区域的属性，并通过 triggerRef 引用来获取触发区域的 DOM 元素。...使用 react-popper-tooltip，我们可以更灵活地定义工具提示的样式、位置和行为，满足不同的需求。

3.2K1 0

【Python爬虫实战】深入解锁 DrissionPage：ChromiumPage 自动化网页操作指南

在这些方法中，selector 是用于指定 HTML 元素的选择器，支持多种选择器类型（如 CSS 选择器、XPath）。...（二）常用的选择器类型在 ele() 和 eles() 方法中，支持以下几种选择器类型： CSS 选择器：使用 CSS 样式选择器定位元素，常见的形式包括：标签名：'div' 类名：'...例如，'//div[@class="classname"]' 可以定位类名为 classname 的 div 元素。...page.input('input#username', 'your_username') 获取文本内容：使用 text() 获取元素的文本内容。...text = page.ele('div.classname').text print(text) 获取属性值：使用 attr() 获取元素的指定属性值。

1681 0

2.2.3 文档对象模型DOM及表单

标签的id是HTML元素的唯一标识符（就像人的身份证号码一样，标签的id是html里的唯一标识），js中可以通过document的函数getElementByID来获取该元素，从而可以操作该标签元素。...如例获取可用于绘图的canvas元素的绘图环境上下文： 1. functionGetCanvasContext(canvasID){ 2....");//调用该元素函数，并返回调用结果 4. } 再比如通过js修改网页标题： 1. document.title="thisTitle"; ---- 下面简要介绍表单： HTML标签中有一类特殊的标签... 运行显式结果如下：如何在网页脚本中获取用户输入的参数呢？form中的button定义了onclick属性，表明点击后会调用main()函数，main函数获取用户输入，如下： 1....//根据id获取文本输入框的内容并转换为整形 2. functionGetInputNumber(id){ 3.

1.6K2 0

【Python爬虫实战】深入解析 Selenium：从元素定位到节点交互的完整自动化指南

本指南将带您详细了解如何在 Selenium 中查找和定位页面元素，并深入介绍各种节点交互方法，包括点击、输入文本、选择选项等操作。...通过多种定位方法和技巧，可以精确地找到页面元素，结合显式等待提高定位的稳定性，适应不同类型的页面布局和内容。掌握这些方法后，可以灵活应对网页自动化任务中的复杂定位需求。...二、节点交互在 Selenium 中，节点交互是指与网页元素（节点）进行操作的过程，如点击、输入文本、清除文本、提交表单等。通过这些交互操作，可以模拟用户的真实行为，从而完成自动化任务。...clear() 方法清除输入框中的现有文本内容。...使用 text 属性获取元素的文本内容，例如标题、段落内容等。

1661 0

2.2.3 文档对象模型DOM及表单

标签的id是HTML元素的唯一标识符（就像人的身份证号码一样，标签的id是html里的唯一标识），js中可以通过document的函数getElementByID来获取该元素，从而可以操作该标签元素。...如例获取可用于绘图的canvas元素的绘图环境上下文： 1. functionGetCanvasContext(canvasID){ 2....");//调用该元素函数，并返回调用结果 4. } 再比如通过js修改网页标题： 1. document.title="thisTitle"; ---- 下面简要介绍表单： HTML标签中有一类特殊的标签... 运行显式结果如下： ? 如何在网页脚本中获取用户输入的参数呢？form中的button定义了onclick属性，表明点击后会调用main()函数，main函数获取用户输入，如下： 1....//根据id获取文本输入框的内容并转换为整形 2. functionGetInputNumber(id){ 3.

2.1K0 0

Bootstrap 辅助类教程演示

本章将讨论 Bootstrap 中的一些可能会派上用场的辅助类。文本以下不同的类展示了不同的文本颜色。...如果文本是个链接鼠标移动到文本上会变暗：类描述实例 .text-muted "text-muted" 类的文本样式尝试一下 .text-primary "text-primary" 类的文本样式..." 类的文本样式尝试一下 .text-danger "text-danger" 类的文本样式尝试一下背景以下不同的类展示了不同的背景颜色。...，在元素获取焦点时显示(如：键盘操作的用户) 尝试一下 .text-hide 将页面元素所包含的文本内容替换为背景图尝试一下 .close 显示关闭按钮尝试一下 .caret 显示下拉式功能尝试一下..."form-control" placeholder="Password"> 结果如下所示：在这里，我们看到两个 input 类型的 label 标签都带有

1.1K4 0

JS设置标签的内容和样式

在学CSS的时候，我们是如何选择到对应的标签进行样式的控制？利用了CSS选择器。那么JS如何在网页中找到相应的标签进行相关的操作？...注意：元素.style.属性中，“属性”只能接受把CSS属性（由一个以上单词组成，用“-”中划线连接的CSS属性）转成小驼峰命名的形式，如：font-size——>fontSize；例如：eleObj.style.fontSize...代码introEle.className = 'intro-ele';中，intro-ele是我们预先定义好的类名选择器（在例子中，我们在头部定义好了类名选择器）。...代码分析：获取到的标签是对象，通过对象.属性的形式来调用innerHTML属性，实现修改或获取标签的内容； innerHTML属性不仅仅可以添加文本内容，还可以添加HTML标签，如：introEle.innerHTML...从显示结果中可以得出什么结论？ 2 有两个对象，var o = {num: 1};var p = {num: 2};要求书写一段代码，使得o + p===3为true。

20.4K9 0

通过WebRTC进行实时通信- 使用RTCDataChannel交换数据

更新 HTML 对于这一步，我们将使用WebRTC的 data channel 在同一页中的两个 textarea之间发送文本。...证明前面的步骤，在codelab里的大块代码做剪切复制不是一个好的想法，但（证如RTCPeerConnection）别无选择。...它是如何工作的这个代码使用 RTCPeerConnection 和 RTCDataChannel 交换文本消息。在这一步中，大部分代码与RTCPeerChannection 例子是一样的。...我们学到了什么在这一步我们学习了如何：在两个 WebRTC 端点之间建立连接。在端点之间交换文本数据。这一步完整的版本在 step-03目录下。...下一步您已经学会了如何在同一页面上的端点之间交换数据，但是如何在不同的机器之间进行此操作？首先，您需要设置信令通道来交换元数据消息。了解下一步的工作方式！

4.2K2 0

CSS技术入门

这是为了避免在不同的浏览器中的可视化差异。IE8 和早期有一个问题，当使用 float 属性时。如果一个容器元素（在本例中）指定的宽度，!...media 规则媒体类型允许你指定文件将如何在不同媒体呈现。该文件可以以不同的方式显示在屏幕上，在纸张上，或听觉浏览器等等。 @media 规则允许在相同样式表为不同媒体设置不同的样式。...如：div{border:2px solid;padding:10px 40px; width:300px;resize:both;overflow:auto;}可以拖拉文本框的大小。...如果在元素上设置了 box-sizing: border-box; 则 padding(内边距) 和 border(边框) 也包含在 width 和 height 中:两个 div 现在是一样大小的，若去除掉...并在打包产物中，将哈希值作为类名使用。并且打包工具会保证，即使是不同的 CSS 文件中，存在同名的类，生成的哈希值也是不同的。从而保证了局部作用域。

2.9K6 1

CSS选择器分类

简单选择器根据标签名、id、类名来选取。id：是标签id的属性值，类名：是标签class的属性值。元素选择器：根据标签名来选择html元素，如p、h1、div、input等待。...符号，后边跟类名。 .par{ font-size:16px; } 还可以指定特定的某个元素，如：下边实例指定的是p标签上的元素。...组合类选择器 css有四种不同的组合器：后代选择器（空格）子选择器（>）相邻兄弟选择器（+）通用兄弟选择器（~）实例：内容后代选择器：div p{ font-size...} 伪类选择器可以设置鼠标经过，元素获取焦点，已访问过和未访问链接等设置不同样式。...上述讲的都是一些常见选择器，自己可在w3c中查看全部。

9562 0

CSS选择器分类

1.3K5 0

jQuery 教程

$("td:parent") //含有子元素或者文本的元素 :contains()选择包含指定文本的所有元素，如：$("div:containers('home')")...text() 设置或返回被选元素的文本内容 toggleClass() 在被选元素中添加/移除一个或多个类之间切换 unwrap() 移除被选元素的父元素 val() 设置或返回被选元素的属性值（针对表单元素...AJAX 修改文本获取外部文本可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数...id="div1">使用 jQuery AJAX 修改该文本获取外部内容为了避免多页面情形下的代码重复...过滤元素并移除实例解析 jQuery Get 和设置 CSS 类 jQuery addClass() 不同元素添加 class 属性 jQuery addClass() – 多个类使用 addClass

17K2 0

Selenium面试题

24、Selenium中隐式等待的主要缺点是什么？ 25、Selenium Grid/网格是什么？ 26、如何在Selenium WebDriver中启动不同的浏览器？...34、如何在下拉列表中选择值？ 35、有哪些不同类型的导航命令？ 36、如何处理WebDriver中的框架？ 37、.NET是否有HtmlUnitDriver？...它的优点是什么？ 40、如何在WebDriver中截取屏幕截图？ 41、如何使用Selenium在文本框中输入文本？ 42、怎么知道一个元素是否显示在屏幕上？...26、如何在Selenium WebDriver中启动不同的浏览器？我们需要创建该特定浏览器的驱动程序实例。...返回浏览器历史记录： Java 在浏览器历史记录中向前导航： driver.navigate().forward(); 33、怎样才能得到一个网页元素的文本？获取命令用于获取指定网页元素的内部文本。

8.5K1 1

Blazor学习之旅 (13) Razor类库的使用

我们都知道，在.NET应用程序中，我们可以通过NuGet来安装各种基础功能的类库来帮我们实现底层的基础功能从而不需要重复造轮子。...与其他 .NET 类库项目一样，Razor 类库可以捆绑为 NuGet 包并在 NuGet 包存储库（如 NuGet.org）上共享。.../MyRazorClassLibrary 方式二：打包Razor类库 dotnet add package MyRazorClassLibrary 接下来，我们就来看看如何创建一个Razor类库，又如何在...假设，我们需要封装一个ModalDialog（模态对话框）的Razor类库，这样我们在不同的Blazor应用中只需要引用该类库或通过NuGet安装它，就可以复用ModalDialog功能实现，而不需要单独实现一遍它...添加ModalDialog并配置自定义内容，这里我们定义了对话框中的标题和内容，以及两个按钮的文本，并且让它显示出来（Show="true"）。

4011 0

JavaScript类库---JQuery（一）

1、基础： Jquery类库定义了一个全局函数：JQuery(); 别名$.是JQuery在全局命名空间中定义的唯一两个变量。...方法的4种不同调用方式：参数是字符串表示的CSS选择器：$('.class')返回当前文档中匹配到的元素集。...function(){}); JQuery遍历用的几个基础方法： each(): 例$('div').each(function(index,this){});此方法唯一参数为一个回调函数，回调函数的有两个参数...匹配到就返回true； 2、JQuery中的属性操作： JQuery使用同一个方法来获取和设置属性，区别是参数的不同，类似于重载；　　setter(设置)时返回的是JQuery对象；getter(获取...; 元素数据：设置与获取与文档、元素、window对象相关联的数据 $('div').data("x",1); 获取$('div').data('x'); 3、文档操作： 4、JQuery中的处理事件

4.2K3 0

分享5个关于 Vue 的小知识，希望对你有所帮助（五）

有时候，我们想要使用Vue.js来过滤文本输入，只接受数字和小数点。我们可以通过检查不是数字的键码并阻止默认操作来使用Vue.js过滤文本输入，只接受数字和小数点。默认操作将是接受输入。...我们从 evt.which 或 evt.keyCode 属性中获取键盘按键字符代码。然后检查该字符编码是否在数字键盘范围内（48到57之间）或者是否是小数点(46的字符编码)。...在本文中，我们将讨论如何在进行HTTP请求时传递自定义头部。请查看下面的代码，了解如何在进行HTTP请求时向我们的API添加标头。...在下面的代码片段中，我们有一个异步的JavaScript函数getJokes，它向Chuck Norris API发出HTTP API请求，以获取一个随机笑话。...同时，如果您想获取更多前端技术的知识，欢迎关注我，您的支持将是我分享最大的动力。我会持续输出更多内容，敬请期待。

1611 0

CSS3高级选择器用法

作为结束的element元素如：div[class$=over]: 匹配class属性值以over作为结束的div元素 3.7、element[attr*=value] 匹配attr属性值中【包含】value...的element元素如：div[class*=on] 匹配class属性值中包含on的div元素 4、伪类选择器 4.1、目标伪类：突出显示活动的锚点元素语法：:target 如： a:target...{} div:target{} 4.2、元素状态伪类：多数用在表单控件上，去匹配表单控件的不同状态 4.2.1、:enabled 匹配每个已启用元素（所有表单控件） 4.2.2、:disabled...匹配没有子元素（包含文本内容）的元素 4.3.4、:only-child 匹配属于其父元素中的唯一子元素 4.3.5、:nth-child(n)匹配属于其父元素中的第n个子元素 4.4、否定伪类：将匹配的元素排除在外...、::selection 匹配用户选取的部分注意：W3C规定所有的伪类选择器全部使用一个冒号，在CSS3中，所有的伪元素选择器，全部使用两个冒号。

6095 0

59道CSS面试题(附答案)

，因为 clearfix已经应用在各大CSS框架（如 Bootstrap等）中，并成为行业的默认规范。...（1）HTML（ Hyper Text Markup Language，超文本标记语言）是做网站时使用的些文本标记标签，比如div、span等（2）CSS（ Cascading Style Sheet...例如都是块级元素，当显示这些元素中间的文本时，都将从新行中开始显示，其后的内容也将在新行中显示。行内元素可以和其他行内元素位于同一行，在浏览器中显示时不会换行。...IFC中是不可能有块级元素的，当插入块级元素时（如在p中插入div），会产生两个匿名块，两者与div分隔开，即产生两个IFC，每个IFC对外表现为块级元素，与div垂直排列。...（1）当两个相邻的外边距都是正数时，折叠的结果是它们两者中较大的值（2）当两个相邻的外边距都是负数时，折叠的结果是两者中绝对值较大的值。（3）当两个外边距一正一负时，折叠的结果是两者相加的和。

5K5 0

python爬虫系列之 xpath：html解析神器

对象我们可以通过_Element对象来使用 xpath #导入 etree类 from lxml import etree #作为示例的 html文本 html = '''<div class...''' #对 html文本进行处理获得一个_Element对象 dom = etree.HTML(html) #获取 a标签下的文本 a_text = dom.xpath('//div/div/div...('//div//a/text()') #如果 div标签下有两个 a标签，那么这两个 a标签都会被选择（注意两个 a标签并不一定是兄弟节点） #比如下面的例子中的两个 a标签都会被选择因为这两个 a..."]：选择具有 class属性的值为 container的 div节点 //a[contains(text(), "点")]：选择文本内容里含有 “点” 的 a标签，比如上面例子中的两个 a标签 //...a[contains(@id, "abc")]：选择 id属性里有 abc的 a标签，如 #这两条 xpath规则都可以选取到例子中的两个 a标签 path = '//a[contains(@href

2.2K3 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

如何在div中获取两个不同的类文本

相关·内容

如何在非Spring容器管理的类中注入获取 Spring容器中的 Bean？

如何在 React 中实现鼠标悬停显示文本？

【Python爬虫实战】深入解锁 DrissionPage：ChromiumPage 自动化网页操作指南

2.2.3 文档对象模型DOM及表单

【Python爬虫实战】深入解析 Selenium：从元素定位到节点交互的完整自动化指南

2.2.3 文档对象模型DOM及表单

Bootstrap 辅助类教程演示

JS设置标签的内容和样式

通过WebRTC进行实时通信- 使用RTCDataChannel交换数据

CSS技术入门

CSS选择器分类

CSS选择器分类

jQuery 教程

Selenium面试题

Blazor学习之旅 (13) Razor类库的使用

JavaScript类库---JQuery（一）

分享5个关于 Vue 的小知识，希望对你有所帮助（五）

CSS3高级选择器用法

59道CSS面试题(附答案)

python爬虫系列之 xpath：html解析神器

扫码

相关资讯

热门标签

活动推荐

运营活动

社区

活动

资源

关于

腾讯云开发者

热门产品

热门推荐

更多推荐