javascript标签下多个文本怎么取-前端问答-PHP中文网

javascript标签下多个文本怎么取

PHPz

发布： 2023-05-09 09:47:07

原创

839人浏览过

javascript作为一种常用的脚本语言，可以帮助网页开发者轻松地操作html文本。当我们需要获取标签下多个文本内容时，可以使用一些简单的javascript方法和语句来实现。

使用innerHTML属性

在JavaScript中，我们可以使用innerHTML属性获取HTML标签下的文本内容。innerHTML属性可以获取标签内所有包含在标签中的文本，包括嵌套标签的文本内容。

例如，假设我们有这样一个HTML结构：

<div id="container">
  <p>这是第一段文本</p>
  <p>这是第二段文本</p>
  <p>这是第三段文本</p>
</div>

登录后复制

我们可以使用以下代码获取所有p标签下的文本内容：

立即学习“Java免费学习笔记（深入）”；

var container = document.getElementById("container");
var innerText = container.innerHTML;

console.log(innerText);

登录后复制

输出结果为：

<p>这是第一段文本</p>
<p>这是第二段文本</p>
<p>这是第三段文本</p>

登录后复制

但是需要注意的是，innerHTML属性不仅会获取文本内容，还会获取标签本身的元素，包括标签内的属性和事件，所以使用innerHTML属性来获取文本内容时，需要先将标签内的HTML元素去除，才能得到我们想要的文本。

使用innerText属性

除了innerHTML属性，我们还可以使用innerText属性来获取HTML标签下的纯文本内容，它会忽略HTML标签，并仅返回文本内容部分。这个属性只能获取当前元素内部的文本内容，不包括它的子元素的文本内容。

Dompdf

dompdf是一个HTML到PDF转换器。在其核心，dompdf是一个（大部分）符合CSS 2.1标准的HTML布局和渲染引擎，使用PHP编写。它是一个以样式驱动的渲染器，它会下载并读取外部样式表，内联样式标签和单个HTML元素的样式属性。它还支持大多数表现性HTML属性。PDF渲染目前由PDFLib或由Wayne Munro编写的捆绑版本的R&OS CPDF类提供。（对R&OS类进行了一些重要的更改，但是）。为了使用dompdf与PDFLib，需要安装PDFLib PECL扩展。使用PD

查看详情

因此，如果我们想要获取HTML标签下的多个文本内容，我们需要使用for循环逐一获取子元素的innerText属性。例如：

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var innerText = "";

for (var i = 0; i < paragraphs.length; i++) {
  innerText += paragraphs[i].innerText + "
";
}

console.log(innerText);

登录后复制

输出结果为：

这是第一段文本
这是第二段文本
这是第三段文本

登录后复制

使用textContent属性

除了以上两种方法，我们还可以使用textContent属性获取HTML标签下的文本内容。与innerText不同的是，textContent属性会获取标签下所有的文本节点，包括标签内的所有空格和换行符。

同样地，如果我们想要获取HTML标签下的多个文本内容，我们需要使用for循环逐一获取子元素的textContent属性。例如：

var container = document.getElementById("container");
var paragraphs = container.getElementsByTagName("p");
var textContent = "";

for (var i = 0; i < paragraphs.length; i++) {
  textContent += paragraphs[i].textContent + "
";
}

console.log(textContent);

登录后复制

输出结果为：

这是第一段文本
这是第二段文本
这是第三段文本

登录后复制

综上所述，JavaScript中提供了多种方法来获取HTML标签下的文本内容。根据需要选择合适的方法来获取所需要的文本内容即可。

以上就是javascript标签下多个文本怎么取的详细内容，更多请关注php中文网其它相关文章！