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

百变鹏仔 2个月前 (10-15) #JavaScript

文章标签属性

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

简介

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

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

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

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 内容至关重要。利用上面提供的实战案例，您可以轻松地将这些技术应用到自己的项目中。

文章推荐