JavaScript 读取网页元素中的文本和属性

javascript 提供了读取网页元素文本和属性的方法，包括：读取文本：innertext、textcontent、value获取属性：getattribute、dataset、style

JavaScript 读取网页元素中的文本和属性

简介

JavaScript 提供了多种方法来读取和操作网页元素中的文本和属性。本文将探讨不同的方法并提供实战案例来说明它们的用法。

读取文本内容

innerText：获取元素中可见文本，包括子元素。

let text = document.getElementById("element").innerText;

登录后复制

textContent：与 innerText 类似，但也会获取隐藏文本。

let text = document.getElementById("element").textContent;

登录后复制

value：获取表单元素（如输入框和文本区域）的当前值。

let value = document.querySelector("input[type=text]").value;

登录后复制

获取属性

getAttribute(name)：获取指定属性的值。

let href = document.getElementById("link").getAttribute("href");

登录后复制

dataset：访问带有 data- 前缀的数据属性。

let username = document.querySelector("user-profile").dataset.username;

登录后复制

style：访问 CSS 样式属性。

let color = document.getElementById("element").style.color;

登录后复制

实战案例

获取页面标题

const title = document.querySelector("head title").innerText;
console.log(title); // 输出：我的网站

登录后复制

设置表单输入值

document.querySelector("input[name=name]").value = "John Doe";

登录后复制

读取按钮的 data 属性

const button = document.querySelector("button");
const action = button.dataset.action;
console.log(action); // 输出：show-details

登录后复制

基于 CSS 类获取元素

const elements = document.querySelectorAll(".error");
elements.forEach((element) => {
  console.log(element.innerText);
});

登录后复制

结论

JavaScript 提供了强大的工具来读取和操作网页元素的文本和属性。了解这些方法对于动态操作和操纵 DOM 内容至关重要。利用上面提供的实战案例，您可以轻松地将这些技术应用到自己的项目中。

以上就是JavaScript 读取网页元素中的文本和属性的详细内容，更多请关注叮当号网其它相关文章！