如何在 javascript 中获取标签内容
在 JavaScript 中,可以通过以下两种主要方法获取标签内容:
1. innerHTML 属性
innerHTML 属性用于获取或设置 HTML 元素及其子元素的 HTML 内容。
<code class="js">// 获取元素的 HTML 内容 const htmlContent = element.innerHTML; // 设置元素的 HTML 内容 element.innerHTML = '<p>新的 HTML 内容</p>';</code>
2. textContent 属性
textContent 属性用于获取或设置 HTML 元素及其子元素的纯文本内容(不包括 HTML 标记)。
<code class="js">// 获取元素的纯文本内容 const textContent = element.textContent; // 设置元素的纯文本内容 element.textContent = '新的纯文本内容';</code>
选择器示例
以下是一些使用选择器来获取不同类型标签内容的示例:
-
获取所有 p 标签的文本内容:
<code class="js">const paragraphs = document.querySelectorAll('p'); paragraphs.forEach(paragraph => { console.log(paragraph.textContent); });</code> -
获取 id 为 "my-div" 的 div 标签的 HTML 内容:
<code class="js">const myDiv = document.getElementById('my-div'); console.log(myDiv.innerHTML);</code> -
获取 class 为 "my-class" 的所有 span 标签的纯文本内容:
<code class="js">const spans = document.querySelectorAll('.my-class'); spans.forEach(span => { console.log(span.textContent); });</code>










