The DOM is the structure of an HTML document starting from its root element till the end of the document. Any element, such as “p”, “div“, or “table“, is referred to as the DOM element. The DOM elements allow the user to modify the content of the webpage. An attribute specifies the collection of objects. Moreover, JavaScript provides setAttribute[] methods for adding or modifying the attributes of DOM elements. In this post, we have demonstrated all the possible methods to add attributes to the DOM elements in JavaScript.
- Cách thêm thuộc tính vào phần tử DOM trong JavaScript
- Thêm thuộc tính vào phần tử DOM
- Thêm nhiều thuộc tính vào phần tử DOM
Làm cách nào để thêm thuộc tính vào phần tử DOM trong JavaScript?
Phương thức setAttribute[] được sử dụng để thêm một thuộc tính vào các phần tử trong JavaScript. Phương thức tương tự cập nhật giá trị của thuộc tính nếu phần tử DOM đã chứa thuộc tính. Bài đăng này đã trình bày các phương pháp thêm thuộc tính cho các phần tử DOM trong JavaScript. Phương thức setAttribtue[] lấy tên và giá trị làm đối số. Hơn nữa, người dùng có thể đặt nhiều thuộc tính cho các phần tử DOM bằng cách sử dụng JavaScript. Bài viết này trình bày hai ví dụ bằng cách thêm cũng như sửa đổi giá trị thuộc tính của phần tử DOM trong JavaScript
Phương thức setAttribute[] được sử dụng để thiết lập hoặc thêm một thuộc tính cho một phần tử cụ thể và cung cấp một giá trị cho nó. Nếu thuộc tính đã tồn tại thì chỉ thiết lập hoặc thay đổi giá trị của thuộc tính. Vì vậy, chúng ta cũng có thể sử dụng phương thức setAttribute[] để cập nhật giá trị của thuộc tính hiện có. Nếu thuộc tính tương ứng không tồn tại, nó sẽ tạo một thuộc tính mới với tên và giá trị được chỉ định. Phương thức này không trả về bất kỳ giá trị nào. Tên thuộc tính tự động chuyển đổi thành chữ thường khi chúng ta sử dụng nó trên phần tử HTML
Mặc dù chúng ta có thể thêm thuộc tính style bằng phương thức setAttribute[] nhưng không nên sử dụng phương thức này để tạo kiểu. Để thêm kiểu, chúng ta có thể sử dụng các thuộc tính của đối tượng kiểu sẽ thay đổi kiểu một cách hiệu quả. Nó có thể rõ ràng với đoạn mã sau
cách sai
Khuyến cáo không nên dùng để thay đổi phong cách
cách đúng đắn
Cách chính xác để thay đổi phong cách được đưa ra dưới đây
Để lấy giá trị của một thuộc tính, chúng ta có thể sử dụng phương thức getAttribute[] và để xóa một thuộc tính cụ thể khỏi một phần tử, chúng ta có thể sử dụng phương thức removeAttribute[]
Nếu chúng ta đang thêm một thuộc tính Boolean chẳng hạn như bị vô hiệu hóa, thì bất kể giá trị của nó là gì, nó luôn được coi là đúng. Nếu chúng ta yêu cầu đặt giá trị của thuộc tính Boolean thành false, chúng ta phải xóa toàn bộ thuộc tính bằng phương thức removeAttribute[]
cú pháp
Các đối số của phương pháp này không phải là tùy chọn. Cả hai tham số phải được bao gồm khi sử dụng phương pháp này. Các giá trị tham số của phương thức này được định nghĩa như sau
Giá trị tham số
tên thuộc tính. Nó là tên của thuộc tính mà chúng ta muốn thêm vào một phần tử. Nó không thể để trống; . e. , nó không phải là tùy chọn
giá trị thuộc tính. Đó là giá trị của thuộc tính mà chúng tôi đang thêm vào một phần tử. Nó cũng không phải là một giá trị tùy chọn
Hãy hiểu cách sử dụng phương thức setAttribute[] bằng cách sử dụng một số hình ảnh minh họa
Ví dụ 1
Trong ví dụ này, chúng tôi đang thêm thuộc tính href có giá trị là "https. //www. javatpoint. com/" vào thẻ có id = "link"
Kiểm tra nó ngay bây giờđầu ra
Sau khi thực thi đoạn mã trên, đầu ra sẽ là -
Chúng ta có thể thấy rằng trước khi nhấp vào nút đã cho, liên kết không được tạo. Sau khi nhấp vào nút, đầu ra sẽ là -
Bây giờ, chúng ta có thể thấy rằng liên kết đã được tạo
Ví dụ2
Trong ví dụ này, chúng tôi đang cập nhật giá trị của thuộc tính hiện có bằng phương thức setAttribute[]. Ở đây, chúng tôi đang chuyển đổi trường văn bản thành nút bằng cách thay đổi giá trị của thuộc tính loại từ văn bản thành nút
Chúng ta phải nhấp vào nút được chỉ định để xem hiệu ứng
Kiểm tra nó ngay bây giờđầu ra
Sau khi thực thi đoạn mã trên, đầu ra sẽ là -
Sau khi nhấp vào nút, đầu ra sẽ là -
Ví dụ3
Ở đây, chúng tôi đang thêm một thuộc tính Boolean bị vô hiệu hóa để vô hiệu hóa nút được chỉ định. Nếu chúng ta đặt giá trị của thuộc tính bị vô hiệu hóa thành một chuỗi trống, thì nó sẽ tự động được đặt thành true khiến nút bị vô hiệu hóa
Để chứng minh việc thêm các thuộc tính mới vào đối tượng JavaScript, chúng tôi sẽ xem xét ví dụ sau về đối tượng nhân viên
5 điều tuyệt vời bạn có thể làm với
Vui lòng bật JavaScript
5 điều tuyệt vời bạn có thể làm với Javascriptvar employee = { name: "Jone Doe", age: 35}
Có nhiều trường hợp cần xem xét, như sau
- Tên thuộc tính tĩnh. Thêm thuộc tính “id” vào đối tượng nhân viên
- Tên thuộc tính động. Bao gồm thuộc tính dựa trên giá trị của biến “customProp”
- Thêm thuộc tính từ một đối tượng khác. Thêm thuộc tính vị trí từ đối tượng người vào đối tượng nhân viên
1. "sự vật. cú pháp property_name”
Ký hiệu dấu chấm là cách đơn giản nhất để truy cập/sửa đổi các thuộc tính của đối tượng JavaScript. Một thuộc tính mới có thể được khởi tạo theo cú pháp sau
object.new_property = new_value
Trong ví dụ dưới đây, chúng tôi đang tạo thuộc tính “id” với giá trị 130 cho đối tượng nhân viên
// Add new property
employee.id = 130
// update existing property
employee.age = 29
// Result: { id: 130, name: "Jone Doe", age: 29}
Hơn nữa, việc thêm các thuộc tính cho các đối tượng lồng nhau tuân theo một cú pháp tương tự
object.parent_prop.property = new_value
Bên dưới, thuộc tính “quốc gia” được thêm vào một đối tượng lồng nhau là giá trị của thuộc tính gốc “vị trí” trong đối tượng nhân viên
employee.location = {}
employee.location.country = "USA"
// Result: { name: "Jone Doe", age: 35, location: { country: "USA" }}
Cách tiếp cận này là lý tưởng nhất cho các trường hợp sau
- Tên thuộc tính là một giá trị tĩnh và cần được khởi tạo thủ công
- Tên thuộc tính không bao gồm các ký tự đặc biệt như dấu cách thừa, v.v.
2. Truy cập thuộc tính thông qua “đối tượng [‘property_name’]”
Cú pháp dựa trên dấu ngoặc vuông là một cách tiếp cận thay thế với các khả năng tương tự và tránh được hầu hết các nhược điểm của toán tử dấu chấm. Cú pháp thêm thuộc tính mới sử dụng dấu ngoặc vuông như sau
object["property_name"] = property_value;
Cú pháp dấu ngoặc vuông cung cấp các ưu điểm sau so với toán tử dấu chấm truyền thống
- Khi tên thuộc tính dựa trên một biến động. Ví dụ: tên thuộc tính được lấy từ các lệnh gọi API, đầu vào của người dùng, v.v.
- Giá trị chuỗi tên thuộc tính chứa các ký tự đặc biệt như khoảng trắng thừa, v.v.
Trong ví dụ bên dưới, không thể thêm trực tiếp thuộc tính “Họ” bằng cách sử dụng cú pháp toán tử dấu chấm do có các ký tự khoảng trắng. Do đó, chúng ta có thể hoàn thành việc tạo thuộc tính “Last name” bằng cú pháp dấu ngoặc vuông
var custom_prop = "Last name"
employee[custom_prop] = "Doe"
// Result: { name: "Jone Doe", age: 35, Last name: "doe"}
Các đối tượng lồng nhau được truy cập bằng cách sử dụng một loạt cú pháp nhiều dấu ngoặc vuông hoặc cách khác, cũng có thể sử dụng kết hợp toán tử dấu chấm và dấu ngoặc vuông
employee["location"] = {}
// Access nested objects with square brackets
employee["location"]["zip code"] = 1234
// Combine Dot operator with square brackets
employee.location["zip code"] = 1324
// Result: { name: "Jone Doe", age: 35, location: { zip code: 1324 }}
3. Tạo thuộc tính mới bằng Object. định nghĩaProperty[]
Lớp đối tượng JavaScript cũng cung cấp phương thức “defineProperty[]” riêng để xác định các thuộc tính mới cho một đối tượng. Ngoài việc chỉ định giá trị của thuộc tính mới, “defineProperty[]” còn cho phép định cấu hình hành vi cho thuộc tính
Cú pháp chung cho “defineProperty[]” như sau
________số 8Trong ví dụ dưới đây, chúng ta định nghĩa thuộc tính “id” cho đối tượng employee với giá trị là 130 và có thể ghi là false. Do đó, những thay đổi tiếp theo về giá trị của thuộc tính id bị loại bỏ. Đọc thêm về đối tượng. defineProperty từ nhà phát triển. mozilla. org/Object/defineProperty
Object.defineProperty[employee, 'id', {
value: 130,
writable: false
}];
// Discards changes in property value
employee.id = 412;
// Result: { id: 130, name: "Jone Doe", age: 29}
4. Cú pháp toán tử trải rộng “{ …object, property_name. giá trị tài sản }"
Toán tử trải rộng cho phép tạo một bản sao mềm của một đối tượng với các thuộc tính hiện có. Toán tử Spread theo sau là định nghĩa thuộc tính nội tuyến cho phép bổ sung các thuộc tính mới. Hơn nữa, các thuộc tính của một đối tượng khác có thể được thêm vào bằng cách sử dụng toán tử trải rộng nhiều lần
object.new_property = new_value
0Trong ví dụ dưới đây, chúng tôi tạo một bản sao của đối tượng nhân viên kết hợp với thuộc tính vị trí và id. Dòng tiếp theo, đối tượng “id” được thêm vào đối tượng nhân viên bằng cách sử dụng toán tử trải rộng
object.new_property = new_value
15. Gán thuộc tính bằng Object. giao phó[]
“Đối tượng. phương thức gán []” cho phép các thuộc tính của đối tượng nguồn được thêm vào đối tượng đích. Bằng cách xác định tất cả các thuộc tính mới cần được thêm vào đối tượng nguồn, chúng ta đạt được việc bổ sung các thuộc tính cho đối tượng đích
object.new_property = new_value
2Trong ví dụ dưới đây, chúng tôi thêm thuộc tính “id” có giá trị 670 vào đối tượng nhân viên bằng Object. giao phó