Thuộc tính của thẻ như thuộc tính trong JavaScript

Bây giờ hãy học cách lấy các thuộc tính của thẻ. Quy tắc ở đây như sau: mỗi thuộc tính của thẻ tương ứng với một thuộc tính DOM cùng tên của phần tử.

Hãy xem xét một ví dụ. Giả sử chúng ta có một thẻ như thế này:

<input id="elem" type="text">

Lấy tham chiếu đến phần tử của chúng ta vào một biến:

let elem = document.querySelector('#elem');

In ra giá trị của các thuộc tính chúng ta cần:

console.log(elem.id);   // in ra 'elem'
console.log(elem.type); // in ra 'text'

Và bây giờ, để làm ví dụ, hãy thay đổi giá trị của thuộc tính:

elem.type = 'submit';

Cho trước input sau:

<input id="elem" type="email">

Cũng có một nút. Khi nhấn vào nút, hãy hiển thị trên màn hình nội dung của thuộc tính type của input được chỉ định ở trên.

Cho trước input sau:

<input id="elem" type="email">

Cũng có một nút. Khi nhấn vào nút, hãy ghi vào thuộc tính type giá trị submit.

Giả sử bạn có một liên kết dưới dạng thẻ a, một nút và một đoạn văn. Khi nhấn vào nút, hãy hiển thị trong đoạn văn nội dung của thuộc tính href của liên kết.

Giả sử bạn có một liên kết và một nút. Khi nhấn vào nút, hãy thêm vào cuối văn bản của liên kết nội dung thuộc tính href của nó trong dấu ngoặc tròn.

Giả sử bạn có một hình ảnh. Hãy đặt nó trên trang bằng thẻ img. Giả sử cũng có một nút và một đoạn văn. Hãy làm sao để khi nhấp vào nút, đường dẫn đến hình ảnh từ thuộc tính src của nó được ghi vào đoạn văn.

Cho trước một hình ảnh trong thẻ img và một nút. Khi nhấn vào nút, hãy ghi vào thuộc tính width giá trị 300.

Cho trước một hình ảnh trong thẻ img và một nút. Giả sử trong thuộc tính width đã đặt một chiều rộng nào đó. Hãy tạo một nút mà khi nhấn vào đó chiều rộng hình ảnh sẽ tăng lên 2 lần.

Giả sử bạn có hai hình ảnh. Hãy tạo trên trang một thẻ img và hai nút. Khi nhấn vào nút thứ nhất, hãy ghi vào thuộc tính src đường dẫn đến hình ảnh thứ nhất, và khi nhấn vào nút thứ hai - đường dẫn đến hình ảnh thứ hai.