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:访问带有 前缀的数据属性。
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 内容至关重要。利用上面提供的实战案例,您可以轻松地将这些技术应用到自己的项目中。
上一篇:uniapp可以开发什么
下一篇:uniapp要学什么语言
相关推荐
-
html怎么读取本地文本文件
如何在 HTML 中读取本地文本文件HTML 自身无法直接访问本地文件系统。但是,我们可以通过以下方法解决这个问题:使用 FileReader APIFileReader API 提供了 方法,可用
-
html文本怎么居中对齐
如何将 HTML 文本居中对齐方法一:使用 标签 标签是将文本水平居中的最直接方法。它被放置在需要居中的文本周围,如下所示:="html"center文本/center
-
html怎么对齐文本框内容
HTML 文本框内容对齐对齐文本框中的内容对于创建整洁且用户友好的表单至关重要。HTML 提供了多种方法来实现文本对齐。1. 使用 属性最直接的方法是使用 属性,该属性接受以下值:left:左对齐
-
文本编辑html后怎么打开
如何打开 HTML 编辑后的文本打开 HTML 编辑后的文本的方法很简单:步骤:HTML 文件现在将显示在浏览器窗口中,您可以查看和交互经过编辑的 HTML 代码。
-
在 HTML 中读取文本文件的简单指南
通过 javascript 创建 xmlhttprequest 对象、设置请求、监听响应就绪事件,即可在 html 中读取文本文件。在实战案例中,创建文本文件、添加 html 代码,就能将文本文件内容