如何使用JavaScript获取HTML标签属性

小蓝 • 2024-12-12 11:58 • 编程

一、获取HTML标签的属性值

在JavaScript中，获取HTML标签的属性值可以通过以下方法：

// HTML代码
<div id="myDiv" class="box" style="display: none"></div>

// JavaScript代码
var myDiv = document.getElementById("myDiv");
console.log(myDiv.getAttribute("id")); // 输出：myDiv
console.log(myDiv.getAttribute("class")); // 输出：box
console.log(myDiv.getAttribute("style")); // 输出：display: none

上述代码中，我们首先使用document.getElementById()方法获取到了HTML标签<div>，然后通过getAttribute()方法来获取标签的属性值。其中getAttribute()方法的参数为属性名，返回值为属性值。

另外，如果我们要获取标签的class属性值，还可以使用以下方法：

// HTML代码
<div id="myDiv" class="box" style="display: none"></div>

// JavaScript代码
var myDiv = document.getElementById("myDiv");
console.log(myDiv.classList); // 输出：["box"]

上述代码中，我们使用了classList属性来获取标签的class属性值，返回值为一个数组，包含了标签的所有class值。

二、动态修改HTML标签的属性值

在JavaScript中，我们可以通过setAttribute()方法来动态修改HTML标签的属性值。例如：

// HTML代码
<div id="myDiv" class="box" style="display: none"></div>

// JavaScript代码
var myDiv = document.getElementById("myDiv");
myDiv.setAttribute("class", "container");
console.log(myDiv.getAttribute("class")); // 输出：container

上述代码中，我们首先获取了HTML标签<div>，然后使用setAttribute()方法来修改class属性的值为”container”。最后再使用getAttribute()方法来获取修改后的值，输出结果为”container”。

三、获取表单元素的值

在JavaScript中，获取表单元素的值可以通过以下方法：

// HTML代码
<form>
  <input type="text" id="username" value="John">
  <input type="password" id="password" value="123456">
  <select id="gender">
    <option value="male">Male</option>
    <option value="female" selected>Female</option>
  </select>
</form>

// JavaScript代码
var username = document.getElementById("username").value;
var password = document.getElementById("password").value;
var gender = document.getElementById("gender").value;
console.log(username); // 输出：John
console.log(password); // 输出：123456
console.log(gender); // 输出：female

上述代码中，我们通过document.getElementById()方法获取到了表单元素，然后通过value属性来获取元素的值。值得注意的是，对于<select>元素，我们需要获取选中的<option>元素的value值来获取整个表单元素的值。

四、获取链接元素的href属性

在JavaScript中，获取链接元素的href属性可以通过以下方法：

// HTML代码
<a href="https://www.baidu.com">百度一下，你就知道</a>

// JavaScript代码
var link = document.getElementsByTagName("a")[0];
console.log(link.href); // 输出：https://www.baidu.com

上述代码中，我们首先使用getElementsByTagName()方法获取页面中所有的<a>元素，然后通过数组下标获取其中的一个元素，最后使用href属性来获取链接的地址。

五、获取图片元素的src属性

在JavaScript中，获取图片元素的src属性可以通过以下方法：

// HTML代码
<img src="https://www.baidu.com/img/bd_logo1.png" alt="百度logo">

// JavaScript代码
var img = document.getElementsByTagName("img")[0];
console.log(img.src); // 输出：https://www.baidu.com/img/bd_logo1.png

上述代码中，我们使用了getElementsByTagName()方法获取页面中所有的<img>元素，然后通过数组下标获取其中的一个元素，最后使用src属性来获取图片的地址。

原创文章，作者：小蓝，如若转载，请注明出处：https://www.506064.com/n/236170.html