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.

  • 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à -

Thêm thuộc tính vào đối tượng javascript

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à -

Thêm thuộc tính vào đối tượng javascript

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à -

Thêm thuộc tính vào đối tượng javascript

Sau khi nhấp vào nút, đầu ra sẽ là -

Thêm thuộc tính vào đối tượng javascript

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

var employee = { name: "Jone Doe", age: 35}

Có nhiều trường hợp cần xem xét, như sau

  1. Tên thuộc tính tĩnh. Thêm thuộc tính “id” vào đối tượng nhân viên
  2. 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”
  3. 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

  1. Tên thuộc tính là một giá trị tĩnh và cần được khởi tạo thủ công
  2. 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

  1. 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.
  2. 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ố 8

Trong 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
0

Trong 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
1

5. 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
2

Trong 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 .