JavaScript获取网页元素文本及属性

在网页开发中，JavaScript是一门强大的脚本语言，获取网页元素的文本和属性是其常见的操作之一。这不仅能帮助开发者动态地修改页面内容，还能更好地响应用户的交互。

获取网页元素文本，有多种方式。最常用的是使用 textContent 属性。例如，当我们有一个 <p> 标签：<p id="myPara">这是一段示例文本</p>，在JavaScript中，通过 document.getElementById('myPara').textContent 就能轻松获取到 “这是一段示例文本” 这段内容。textContent 会获取元素及其后代元素的所有文本内容，并且会去除HTML标签。

另一个属性 innerText 也可用于获取文本。不过，innerText 和 textContent 有细微差别。innerText 会考虑CSS样式，它不会返回那些因CSS样式设置为 display: none 而隐藏的文本，而 textContent 则会返回所有文本，无论是否隐藏。

除了获取文本，获取网页元素属性同样重要。若想获取元素的某个属性值，可使用 getAttribute() 方法。比如，有一个带有 href 属性的链接：<a id="myLink" href="https://www.example.com">点击访问</a>，通过 document.getElementById('myLink').getAttribute('href')，就能获取到链接的地址 “https://www.example.com”。

在实际开发中，常常需要批量获取元素的文本或属性。比如，页面上有多个具有相同类名的 <li> 元素。我们可以使用 document.querySelectorAll() 方法先获取所有符合条件的元素，然后通过循环遍历这些元素，再分别获取它们的文本或属性。例如：

const listItems = document.querySelectorAll('.list-item');
listItems.forEach((item) => {
    const itemText = item.textContent;
    const itemAttr = item.getAttribute('data-value');
    console.log(itemText, itemAttr);
});

通过JavaScript获取网页元素的文本和属性，为网页的动态交互和内容处理提供了极大的便利。开发者可以根据不同的需求，灵活运用这些方法，实现各种丰富的功能，打造出更加流畅和用户体验良好的网页应用。