Thêm thuộc tính vào đối tượng javascript
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. Show
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ápCá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ụ 1Trong 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ụ2Trong 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 Javascript
Có nhiều trường hợp cần xem xét, như sau
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
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
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ự
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
Cách tiếp cận này là lý tưởng nhất cho các trường hợp sau
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
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
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
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
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
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 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 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 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ó Tôi có thể thêm biến vào đối tượng trong JavaScript không?Chúng ta có thể thêm thuộc tính vào đối tượng JavaScript bằng cách sử dụng biến làm tên bằng cách sử dụng ký hiệu dấu chấm hoặc ký hiệu dấu ngoặc .
Tôi có thể thêm chức năng vào đối tượng JavaScript không?Các phương thức JavaScript là các hành động có thể được thực hiện trên các đối tượng . Phương thức JavaScript là thuộc tính chứa định nghĩa hàm. Phương thức là các chức năng được lưu trữ dưới dạng thuộc tính đối tượng.
Các thuộc tính được gán cho một đối tượng trong JavaScript như thế nào?JavaScript được thiết kế trên một mô hình dựa trên đối tượng đơn giản. Đối tượng là tập hợp các thuộc tính và thuộc tính là liên kết giữa tên (hoặc khóa) và giá trị . Giá trị của một thuộc tính có thể là một hàm, trong trường hợp đó, thuộc tính được gọi là một phương thức.
Phương pháp có thể được thêm vào một đối tượng?Chúng ta có thể thêm các hàm vào đối tượng, dưới dạng thuộc tính và khi hoàn thành, chúng được gọi là phương thức . |