Làm cách nào chúng tôi có thể tìm nạp tất cả các thuộc tính cho phần tử html?

Sau đó, chúng tôi gọi

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
6 trên mảng để thêm tất cả thuộc tính
document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
7 với
document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
8 vào đối tượng
document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
9 với cuộc gọi lại

Chúng tôi trả lại

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
9 trong cuộc gọi lại

Trong đối số thứ 2, chúng tôi chuyển vào một đối tượng trống để đặt đối tượng đó làm giá trị của

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
9

Do đó,

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
9 là

{style: "color: red", class: "myDiv", id: "myDiv"}

Nhận tất cả các thuộc tính của một phần tử bằng jQuery

Chúng ta có thể sử dụng phương thức

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
3 của jQuery để lặp qua tất cả các thuộc tính và tên thuộc tính là tên thuộc tính và giá trị thuộc tính là giá trị của thuộc tính

Để làm điều này, chúng tôi viết

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)

Chúng tôi hủy cấu trúc div được trả về từ hàm

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
4

Sau đó, chúng tôi tạo đối tượng

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
9 trống

Tiếp theo, chúng tôi gọi

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
3 với
const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
7 để lặp qua tất cả các thuộc tính

Và trong cuộc gọi lại, chúng tôi điền vào

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
9 với
document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
7 là tên thuộc tính và
document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
8 là giá trị thuộc tính

Khi trình duyệt tải trang, nó sẽ “đọc” (một từ khác. “phân tích cú pháp”) HTML và tạo các đối tượng DOM từ nó. Đối với các nút phần tử, hầu hết các thuộc tính HTML tiêu chuẩn sẽ tự động trở thành thuộc tính của các đối tượng DOM

Chẳng hạn, nếu thẻ là

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
7, thì đối tượng DOM có
document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
8

Nhưng ánh xạ thuộc tính-thuộc tính không phải là một đối một. Trong chương này, chúng ta sẽ chú ý đến việc tách biệt hai khái niệm này, để xem làm thế nào để làm việc với chúng, khi chúng giống nhau và khi chúng khác nhau.

Thuộc tính DOM

Chúng tôi đã thấy các thuộc tính DOM tích hợp sẵn. Có rất nhiều. Nhưng về mặt kỹ thuật, không ai giới hạn chúng tôi và nếu không đủ, chúng tôi có thể thêm của riêng mình

Các nút DOM là các đối tượng JavaScript thông thường. Chúng ta có thể thay đổi chúng

Chẳng hạn, hãy tạo một thuộc tính mới trong

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
9

document.body.myData = {
  name: 'Caesar',
  title: 'Imperator'
};

alert(document.body.myData.title); // Imperator

Chúng ta cũng có thể thêm một phương thức

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)

Chúng tôi cũng có thể sửa đổi các nguyên mẫu dựng sẵn như

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
10 và thêm các phương thức mới cho tất cả các phần tử

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
1

Vì vậy, các thuộc tính và phương thức DOM hoạt động giống như các đối tượng JavaScript thông thường

  • Họ có thể có bất kỳ giá trị
  • Chúng phân biệt chữ hoa chữ thường (viết
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    11, không phải
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    12)

thuộc tính HTML

Trong HTML, các thẻ có thể có các thuộc tính. Khi trình duyệt phân tích cú pháp HTML để tạo các đối tượng DOM cho các thẻ, nó sẽ nhận ra các thuộc tính tiêu chuẩn và tạo các thuộc tính DOM từ chúng

Vì vậy, khi một phần tử có

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
13 hoặc một thuộc tính tiêu chuẩn khác, thì thuộc tính tương ứng sẽ được tạo. Nhưng điều đó không xảy ra nếu thuộc tính không chuẩn

Ví dụ

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
6

Xin lưu ý rằng một thuộc tính tiêu chuẩn cho một phần tử có thể không xác định đối với một phần tử khác. Chẳng hạn,

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
14 là tiêu chuẩn cho
const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
15 (HTMLInputElement), nhưng không phải cho
const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
16 (HTMLBodyElement). Các thuộc tính tiêu chuẩn được mô tả trong đặc tả cho lớp phần tử tương ứng

Ở đây chúng ta có thể thấy nó

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
0

Vì vậy, nếu một thuộc tính không chuẩn, thì sẽ không có thuộc tính DOM cho thuộc tính đó. Có cách nào để truy cập các thuộc tính như vậy không?

Chắc chắn rồi. Tất cả các thuộc tính có thể truy cập bằng cách sử dụng các phương pháp sau

  • const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    17 – kiểm tra sự tồn tại
  • const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    18 – nhận giá trị
  • const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    19 – đặt giá trị
  • const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    60 – loại bỏ thuộc tính

Các phương thức này hoạt động chính xác với những gì được viết bằng HTML

Ngoài ra, người ta có thể đọc tất cả các thuộc tính bằng cách sử dụng

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
61. một tập hợp các đối tượng thuộc về lớp Attr dựng sẵn, với các thuộc tính
const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
62 và
const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
63

Đây là bản demo đọc thuộc tính không chuẩn

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
8

Thuộc tính HTML có các tính năng sau

  • Tên của họ không phân biệt chữ hoa chữ thường (
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    13 giống như
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    65)
  • Giá trị của chúng luôn là các chuỗi

Đây là bản trình diễn mở rộng về cách làm việc với các thuộc tính

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
1

Xin lưu ý

  1. const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    66 – chữ cái đầu tiên ở đây là chữ hoa và trong HTML tất cả đều là chữ thường. Nhưng điều đó không quan trọng. tên thuộc tính không phân biệt chữ hoa chữ thường
  2. Chúng ta có thể gán bất cứ thứ gì cho một thuộc tính, nhưng nó sẽ trở thành một chuỗi. Vì vậy, ở đây chúng tôi có giá trị
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    67
  3. Tất cả các thuộc tính bao gồm cả những thuộc tính mà chúng tôi đặt đều hiển thị trong
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    68
  4. Bộ sưu tập
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    69 có thể lặp lại và có tất cả các thuộc tính của phần tử (chuẩn và không chuẩn) dưới dạng các đối tượng có thuộc tính
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    62 và
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    63

Đồng bộ hóa thuộc tính thuộc tính

Khi một thuộc tính tiêu chuẩn thay đổi, thuộc tính tương ứng sẽ được cập nhật tự động và ngược lại (với một số ngoại lệ)

Trong ví dụ bên dưới,

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
13 được sửa đổi dưới dạng thuộc tính và chúng ta có thể thấy thuộc tính cũng được thay đổi. Và sau đó ngược lại như vậy

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
9

Nhưng có những trường hợp loại trừ, ví dụ:

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
03 chỉ đồng bộ hóa từ thuộc tính → thuộc tính chứ không quay lại

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
1

Trong ví dụ trên

  • Thay đổi thuộc tính
    const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    63 cập nhật thuộc tính
  • Nhưng thay đổi thuộc tính không ảnh hưởng đến thuộc tính

“Tính năng” đó thực sự có thể hữu ích, bởi vì các hành động của người dùng có thể dẫn đến ____163 thay đổi, và sau đó, nếu chúng ta muốn khôi phục giá trị “gốc” từ HTML, thì đó là thuộc tính

Thuộc tính DOM được gõ

Thuộc tính DOM không phải lúc nào cũng là chuỗi. Chẳng hạn, thuộc tính

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
06 (đối với các hộp kiểm) là một giá trị boolean

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
5

Có những ví dụ khác. Thuộc tính

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
07 là một chuỗi, nhưng thuộc tính
const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
07 là một đối tượng

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
0

Hầu hết các thuộc tính là chuỗi mặc dù

Rất hiếm khi, ngay cả khi loại thuộc tính DOM là một chuỗi, nó có thể khác với thuộc tính. Chẳng hạn, thuộc tính DOM

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
09 luôn là một URL đầy đủ, ngay cả khi thuộc tính chứa một URL tương đối hoặc chỉ một
const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
80

Đây là một ví dụ

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
1

Nếu chúng tôi cần giá trị của

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
09 hoặc bất kỳ thuộc tính nào khác chính xác như được viết trong HTML, chúng tôi có thể sử dụng
const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
82

Thuộc tính không chuẩn, tập dữ liệu

Khi viết HTML, chúng ta sử dụng rất nhiều thuộc tính chuẩn. Nhưng còn những cái không chuẩn, tùy chỉnh thì sao?

Đôi khi các thuộc tính không chuẩn được sử dụng để chuyển dữ liệu tùy chỉnh từ HTML sang JavaScript hoặc để "đánh dấu" các phần tử HTML cho JavaScript

Như thế này

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
2

Ngoài ra, chúng có thể được sử dụng để tạo kiểu cho một phần tử

Chẳng hạn, ở đây đối với trạng thái đơn đặt hàng, thuộc tính

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
83 được sử dụng

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
3

Tại sao sử dụng một thuộc tính lại thích hợp hơn là có các lớp như

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
84,
const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
85,
const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
86?

Bởi vì một thuộc tính thuận tiện hơn để quản lý. Trạng thái có thể được thay đổi dễ dàng như

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
4

Nhưng có thể có vấn đề với các thuộc tính tùy chỉnh. Điều gì sẽ xảy ra nếu chúng ta sử dụng một thuộc tính không chuẩn cho mục đích của mình và sau đó tiêu chuẩn giới thiệu nó và khiến nó làm một việc gì đó? . Có thể có những hiệu ứng bất ngờ trong trường hợp như vậy

Để tránh xung đột, tồn tại data-* thuộc tính

Tất cả các thuộc tính bắt đầu bằng “data-” được dành riêng cho người lập trình sử dụng. Chúng có sẵn trong tài sản

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
87

Chẳng hạn, nếu một

const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
88 có một thuộc tính có tên là
const [node] = $('div')
const attrs = {}
$.each(node.attributes, (index, attribute) => {
  attrs[attribute.name] = attribute.value;
});
console.log(attrs)
89, thì thuộc tính đó có sẵn là
const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
10

Như thế này

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
5

Các thuộc tính nhiều từ như ________ 311 trở thành trường hợp lạc đà.

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
12

Đây là một ví dụ về "trạng thái đơn hàng" được viết lại

document.body.sayTagName = function() {
  alert(this.tagName);
};

document.body.sayTagName(); // BODY (the value of "this" in the method is document.body)
6

Sử dụng thuộc tính

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
13 là cách hợp lệ, an toàn để chuyển dữ liệu tùy chỉnh

Xin lưu ý rằng chúng tôi không chỉ có thể đọc mà còn có thể sửa đổi các thuộc tính dữ liệu. Sau đó, CSS cập nhật chế độ xem cho phù hợp. trong ví dụ trên dòng cuối cùng

const node = document.querySelector('div')
const attributeNodeArray = [...node.attributes];

const attrs = attributeNodeArray.reduce((attrs, attribute) => {
  attrs[attribute.name] = attribute.value;
  return attrs;
}, {});
console.log(attrs)
14 đổi màu thành xanh lam

Bản tóm tắt

  • Thuộc tính – là những gì được viết bằng HTML
  • Thuộc tính – là những gì có trong các đối tượng DOM

Một so sánh nhỏ

PropertiesAttributesTypeBất kỳ giá trị nào, thuộc tính tiêu chuẩn có các loại được mô tả trong thông số kỹ thuậtMột chuỗiNameName phân biệt chữ hoa chữ thườngTên không phân biệt chữ hoa chữ thường

Các phương pháp để làm việc với các thuộc tính là

  • const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    17 – để kiểm tra sự tồn tại
  • const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    18 – để lấy giá trị
  • const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    19 – để đặt giá trị
  • const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    60 – để xóa thuộc tính
  • const node = document.querySelector('div')
    const attributeNodeArray = [...node.attributes];
    
    const attrs = attributeNodeArray.reduce((attrs, attribute) => {
      attrs[attribute.name] = attribute.value;
      return attrs;
    }, {});
    console.log(attrs)
    
    61 là tập hợp tất cả các thuộc tính

Đối với hầu hết các trường hợp, sử dụng thuộc tính DOM là tốt hơn. Chúng ta chỉ nên đề cập đến các thuộc tính khi các thuộc tính DOM không phù hợp với chúng ta, chẳng hạn như khi chúng ta cần các thuộc tính chính xác

Chúng ta sẽ sử dụng phương pháp nào để tìm nạp phần tử từ HTML?

Phương thức getElementById() trả về một phần tử có giá trị được chỉ định. Phương thức getElementById() trả về null nếu phần tử không tồn tại. Phương thức getElementById() là một trong những phương thức phổ biến nhất trong HTML DOM.

Làm cách nào để lấy thuộc tính dữ liệu từ Element?

Cách tiếp cận. Đầu tiên, chọn phần tử có thuộc tính dữ liệu. Chúng ta có thể sử dụng thuộc tính tập dữ liệu để có quyền truy cập vào các thuộc tính dữ liệu hoặc sử dụng. getAttribute() để chọn chúng bằng cách gõ cụ thể tên của chúng.

Tất cả các phần tử HTML có thể có thuộc tính không?

Thuộc tính chung là thuộc tính chung cho tất cả các phần tử HTML ; .