如何使用Javascript获取具有类名的几个段落的值?

Posted

技术标签:

【中文标题】如何使用Javascript获取具有类名的几个段落的值?【英文标题】:How to get the value of several paragraphs with the class name using Javascript? 【发布时间】:2020-10-25 09:41:30 【问题描述】:

我想通过使用类名单击 div 来获取包含在 div 中的段落文本 (p)。我尝试使用innerTextinnerhtml,但它在控制台中返回undefined。我怎样才能只使用 javascript 来做到这一点?

HTML

<div class="showName">
   <p class="paragraphs">Text 1</p>
</div>
<div class="showName">
   <p class="paragraphs">Text 2</p>
</div>
<div class="showName">
   <p class="paragraphs">Text 3</p>
</div>

Javascript

const showName = document.getElementsByClassName('showName');
const paragraphs = document.getElementsByClassName('paragraphs');

Array.prototype.forEach.call(showName, function(element) 
   element.addEventListener('click', function() 
      // How can I do it here?
   );
);

【问题讨论】:

【参考方案1】:

工作示例:https://codepen.io/shinaBR2/pen/qBbxRgz 基本代码是

Array.prototype.forEach.call(showName, function(element) 
   element.addEventListener('click', function() 
      // How can I do it here?
     const text = element.querySelector('.paragraphs').textContent;
     alert(text);
   );
);

【讨论】:

【参考方案2】:

如果您想在具有“paragraphs”类的所有段落中获取文本,此代码也可以帮助您:

HTML

<div class="showName">
   <p class="paragraphs">Text 1</p>
</div>
<div class="showName">
   <p class="paragraphs">Text 2</p>
</div>
<div class="showName">
   <p class="paragraphs">Text 3</p>
</div>

JAVASCRIPT

const showName = document.getElementsByClassName('showName');
const paragraphs = document.getElementsByClassName('paragraphs');

for(i=0; i < paragraphs.length; i++)
    console.log(paragraphs[i].innerText);

【讨论】:

以上是关于如何使用Javascript获取具有类名的几个段落的值?的主要内容,如果未能解决你的问题,请参考以下文章

Throwable的几个常见方法。

如何获取具有多个类但只知道其中一个的元素的类名

具有相同类的几个元素。但我只能得到第一个,为啥?

来自具有相同类名的段落的输入或字符串的值总和始终显示“0”

我可以使用 Markdown 在段落上定义类名吗?

在多个页面中搜索类名并使用 javascript 获取该类的 url