JavaScript reads text and attributes in web page elements

JavaScript provides methods for reading the text and attributes of web page elements, including: Reading text: innerText, textContent, value Obtaining attributes: getAttribute, dataset, style

JavaScript reads text and attributes in web page elements

Introduction

JavaScript provides a variety of methods to read and manipulate text and attributes in web page elements. This article will explore different methods and provide practical examples to illustrate their use.

Read text content

innerText: Get the visible text in the element, including child elements.

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

textContent: Similar to innerText, but also gets hidden text.

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

value: Get the current value of form elements (such as input boxes and text areas).

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

Get attributes

getAttribute(name): Get the value of the specified attribute.

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

dataset: Access data attributes with the data- prefix.

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

style: Access CSS style properties.

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

Practical case

Get the page title

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

Set the form input value

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

Read the data attribute of the button

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

Get elements based on CSS classes

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

Conclusion

JavaScript provides powerful tools to read Get and manipulate text and attributes of web page elements. Understanding these methods is critical for dynamically manipulating and manipulating DOM content. Using the practical examples provided above, you can easily apply these techniques to your own projects.

The above is the detailed content of JavaScript reads text and attributes in web page elements. For more information, please follow other related articles on the PHP Chinese website!