使用 JavaScript 获取 HTML 元素的属性
本教程指导如何使用 JavaScript 和 jQuery 获取 HTML 元素的属性。
我们将使用带有 querySelector() 和 getElementById() 方法的 getAttribute() 函数，以及 attributes 节点列表来获取属性名称及其值。
getAttribute() 方法输出元素属性的值；该元素可以通过标签或 ID 选择。
我们使用 querySelector 选择标签元素；它给出了文档中与选择器匹配的第一个元素，而 getElementById() 获取具有指定 id 的第一个元素。
attributes 属性返回特定 HTML 元素的属性集合。
在 JavaScript 中使用 getAttribute() 获取 HTML 元素的属性
让我们从 HTML 文档对象模型 (DOM) 的 getAttribute() 函数开始获取指定 HTML 元素的属性值。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Get Attribues of HTML Element Using JavaScript</title>
</head>
<body>
<span id="getAttr" name="attr" message="get attributes"></span>
<p id="testP" name="testing"> This is a paragraph </p>
<script>
const getElementByID = document.getElementById("getAttr")
const getElementByQuery = document.querySelector('p');
console.log(getElementByID.getAttribute("name"));
console.log(getElementByQuery.getAttribute("id"));
</script>
</body>
</html>
输出：
"attr"
"testP"
在 JavaScript 中使用 attributes 属性获取 HTML 元素的属性
在下面的代码中，我们使用 attributes 属性来访问特定 HTML 元素的属性名称和值，并使用 push() 方法将它们插入到两个单独的数组中。
你可以在此处找到有关 push() 函数的更多信息。看下面的启动代码来练习。
<!DOCTYPE html>
<html>
<head>
<title>Get Attribues of HTML Element Using JavaScript</title>
</head>
<body>
<span id="getAttr" name="attr" message="get attributes"></span>
<script>
const getElementByID = document.getElementById("getAttr");
attrs = getElementByID.attributes;
n = attrs.length;
attrNameArray = [];
attrValueArray = [];
for (var i = 0; i < n; i++){
attrNameArray.push(attrs[i].nodeName);
attrValueArray.push(attrs[i].nodeValue);
}
console.log("Print attribute names and values with loop");
console.log(attrNameArray);
console.log(attrValueArray);
</script>
</body>
</html>
输出：
"Print attribute names and values with loop"
["id", "name", "message"]
["getAttr", "attr", "get attributes"]
在 JavaScript 中使用 jQuery 获取 HTML 元素的属性
以下代码使用 jQuery 使用 each() 函数获取属性的名称和值。each() 方法为每个匹配的元素运行一个函数/方法。
示例代码：
<!DOCTYPE html>
<html>
<head>
<title>Get Attribues of HTML Element Using JavaScript</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js">
</script>
</head>
<body>
<span id="getAttr" name="attr" message="get attributes"></span>
<script>
var element = $("#getAttr");
$(element[0].attributes).each(function() {
console.log(this.nodeName+':'+this.nodeValue);
});
</script>
</body>
</html>
输出：
"id:getAttr"
"name:attr"
"message:get attributes"
相关文章
JavaScript 中的 Map 索引
发布时间：2024/03/20 浏览次数：197 分类：JavaScript
-
JavaScript map 方法很容易实现，我们将讨论它的不同参数，以及它们在不同场景中的使用方式。
JavaScript 中 let 和 var 的区别
发布时间：2024/03/20 浏览次数：79 分类：JavaScript
-
本教程描述了两个关键字 var 和 let 在 JavaScript 中的实际区别。
JavaScript 指针
发布时间：2024/03/20 浏览次数：166 分类：JavaScript
-
JavaScript 没有明确的方法来定义指针。它允许在对象之间传递值和引用，但不能显示引用。本文将介绍在 JavaScript 中定义指针的好方法。
JavaScript 元组示例
发布时间：2024/03/20 浏览次数：166 分类：JavaScript
-
在 JavaScript 语言中，元组是具有不可变特性的数组类型。我们可以使用单个变量访问元组，该变量是数组的一种。
使用 JavaScript 编码 HTML
发布时间：2024/03/20 浏览次数：83 分类：JavaScript
-
本教程将教你如何使用不同的方法对 HTML 字符串进行编码。这些方法的共同点是字符串替换，它替换了具有潜在危险的字符。
使用 JavaScript 加载外部 HTML 文件
发布时间：2024/03/20 浏览次数：133 分类：JavaScript
-
本文演示了如何使用 JavaScript 和 jQuery 加载外部 html 文件。
JavaScript 延迟后重定向页面
发布时间：2024/03/20 浏览次数：87 分类：JavaScript
-
本教程展示了如何使用 JavaScript 中的 setTimeout 方法在延迟后重定向页面。
