如何使用JavaScript獲取HTML標籤屬性

一、獲取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屬性來獲取圖片的地址。