Xóa thuộc tính JavaScript

Sử dụng phương pháp

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

7 để loại bỏ thuộc tính

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

8 khỏi một phần tử, e. g.

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

9. Phương thức

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

0 xóa thuộc tính đã truyền vào khỏi phần tử

Đây là HTML cho các ví dụ trong bài viết này

  
    
  

  
    
Box content 1

    
  

Và đây là mã JavaScript liên quan

Chúng tôi đã sử dụng phương thức removeAttribute để xóa thuộc tính

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

8 khỏi phần tử

Tham số duy nhất mà phương thức lấy là tên của thuộc tính cần xóa

Nếu thuộc tính không tồn tại trên phần tử, giá trị

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

77 hoặc chuỗi rỗng sẽ được trả về, tùy thuộc vào cách triển khai của trình duyệt

Hôm nay, chúng ta sẽ xem xét cách lấy, đặt và xóa các thuộc tính và thuộc tính bằng vanilla JS. Chúng ta cũng sẽ tìm hiểu sự khác biệt giữa thuộc tính và thuộc tính, và một số "khó khăn" khi làm việc với chúng

Nào cùng đào vào bên trong

Các phương pháp

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

3

Bạn có thể sử dụng các phương thức

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

4,

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

5,

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

0 và

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

1 để lấy, đặt, xóa và kiểm tra sự tồn tại của các thuộc tính [bao gồm cả thuộc tính dữ liệu] trên một phần tử, tương ứng

Nếu một thuộc tính không tồn tại trên một phần tử, phương thức

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

4 trả về

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

3

let elem = document.querySelector['#lunch'];

// Get the value of the [data-sandwich] attribute
let sandwich = elem.getAttribute['data-sandwich'];

// Set a value for the [data-sandwich] attribute
elem.setAttribute['data-sandwich', 'turkey'];

// Remove the [data-chips] attribute
elem.removeAttribute['data-chips'];

// Check if an element has the `[data-drink]` attribute
if [elem.hasAttribute['data-drink']] {
	console.log['Add a drink!'];
}

Đây là một bản demo

Thuộc tính phần tử

Các phần tử HTML có hàng chục thuộc tính mà bạn có thể truy cập trực tiếp

Một số trong số chúng ở dạng chỉ đọc, nghĩa là bạn có thể nhận giá trị của chúng nhưng không đặt giá trị đó. Những người khác có thể được sử dụng để đọc và đặt giá trị. Bạn có thể tìm thấy danh sách đầy đủ trên Mozilla Developer Network

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

Đây là một bản demo khác

Sự khác biệt giữa thuộc tính và thuộc tính là gì?

Trong JavaScript, một phần tử có thuộc tính và thuộc tính. Các thuật ngữ thường được sử dụng thay thế cho nhau, nhưng chúng thực sự là hai điều riêng biệt

Một thuộc tính là trạng thái ban đầu khi được hiển thị trong DOM. Một tài sản là trạng thái hiện tại

Trong hầu hết các trường hợp, các thuộc tính và thuộc tính được tự động đồng bộ hóa. Ví dụ: khi bạn sử dụng

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

5 để cập nhật thuộc tính ID, thuộc tính

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

5 cũng được cập nhật

Hello

________số 8

Tuy nhiên, các thuộc tính biểu mẫu có thể thay đổi của người dùng—đáng chú ý là

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

6,

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

7 và

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

8—không được đồng bộ hóa tự động

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

2

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

3

Nếu bạn cố gắng cập nhật trực tiếp thuộc tính

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

6, điều đó sẽ cập nhật giao diện người dùng

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

5

Điều này cho phép bạn chọn các cách tiếp cận khác nhau tùy thuộc vào việc bạn có muốn ghi đè lên các cập nhật của người dùng hay không

Nếu bạn muốn cập nhật một trường, nhưng chỉ khi người dùng chưa thực hiện bất kỳ thay đổi nào, hãy sử dụng

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

5. Nếu bạn muốn ghi đè bất cứ thứ gì họ đã làm, hãy sử dụng thuộc tính

let elem = document.querySelector['#main'];

// Get the ID of the element
// returns "main"
let id = elem.id;

// Set the ID of the element
elem.id = 'secondary';

// Get the parentNode of the element
// This property is read-only
let parent = elem.parentNode;

6

Bạn có thể xóa một thuộc tính trong JavaScript không?

Làm cách nào để xóa thuộc tính lớp trong JavaScript?

Làm cách nào để xóa thuộc tính đã chọn trong JavaScript?

Làm cách nào để xóa các phần tử trong JavaScript?