GetAttribute trong JavaScript

Trong bài hướng dẫn tự học lập trình JavaScript này, bạn sẽ tìm hiểu cách get, set và xóa các thuộc tính khỏi các thành phần HTML trong JavaScript với JS DOM.

Google

JavaScript cung cấp một số cách khác nhau để chọn các thành phần trên một trang.

Nếu bạn không nhớ thì vui lòng xem lại bài học DOM Selector trong JavaScript nhé.

Set [Thiết lập] thuộc tính thông qua JS DOM

Phương thức setAttritute[] được sử dụng để set [thiết lập] thuộc tính trên phần tử đã chỉ định bằng JS DOM.

Nếu thuộc tính đã tồn tại trên phần tử, giá trị được cập nhật.

Nếu không, một thuộc tính mới được thêm vào với tên [name] và giá trị [value] được chỉ định.

Đoạn code JavaScript trong ví dụ sau sẽ thêm một class và một thuộc tính disabled vào phần tử .

Như bạn đã thấy ở ví dụ trên, mình đã thêm vào nút một thuộc tính mới có name và value như:

    + Một thuộc tính có name là "class" và giá trị là "click-btn"

    + Sau đó, mình lại thiết lập thêm một thuộc tính có name là "disabled" và không có value.

Tương tự, bạn có thể sử dụng phương thức setAttribute[] để cập nhật hoặc thay đổi giá trị của một thuộc tính hiện có trên một phần tử HTML.

Đoạn code JavaScript trong ví dụ sau sẽ cập nhật giá trị của thuộc tính href hiện có của thẻ .

Tự học JavaScript

Xóa thuộc tính khỏi các phần tử thông qua JS DOM

Phương thức removeAttribute[] được sử dụng để xóa một thuộc tính khỏi thành phần được chỉ định.

Đoạn code JavaScript trong ví dụ sau sẽ xóa thuộc tính href khỏi phần tử anchor.

NIIT - ICT Hà Nội

Bạn thử chạy ví dụ trên và kiểm tra phần tử xem, có còn thấy thuộc tính href không?

Như vậy, qua bài viết này, mình đã giúp bạn biết cách get, set thuộc tính và xóa thuộc tính khỏi phần tử HTML thông qua JS DOM.

Hi vọng bài viết giúp cho quá trình học lập trình web của bạn trở nên tốt hơn. Chúc bạn thành công với nghề lập trình này.

Note: Nếu bạn muốn trở thành Lập trình viên phát triển website thực thụ, hãy tham khảo ngay KHÓA HỌC LẬP TRÌNH VIÊN FULL STACK tại NIIT - ICT Hà Nội. Đầu tư 12 tháng, dùng cả đời.

Trình duyệt, hay máy xử lý siêu văn bản, biết rằng có một đoạn văn bản có tiêu đề 'Title' và nội dung là 'Content'.

    var paragraphs = document.getElementsByTagName['P'];
    var firstParagraph = paragraphs[0];
    firstParagraph.innerText = 'Nội dung đoạn văn';

• Đáng lưu ý ở đây, đối tượng document [có phương thức getElementsByTagName[]] không phải là một đối tượng sẵn có trong Javascript. Đây là một đối tượng của DOM, chính là nút gốc của cây DOM.

• Từ ví dụ trên, ta thấy DOM thể hiện và lưu giữ cấu trúc của văn bản, còn javascript được dùng để truy cập và sửa đổi cấu trúc này. Web [XML] API được hiểu là giao diện cho Javascript truy xuất DOM. Đến nay javascript gần như là con đường duy nhất để làm việc này. Vì sự gắn kết chặt chẽ như vậy nên các đối tượng DOM cùng các phương thức của chúng thường bị hiểu lầm là đối tượng và phương thức của JS.

• Như đã nói, DOM là một cấu trúc dạng cây, đã là cây thì phải có các nốt [node]. Cây DOM có 4 dạng nốt. Cụ thể xem xét cây DOM có thể hiện HTML như sau;

DOCTYPE html>

  
    This dummy
  

Cây DOM có sơ đồ như sau

document
|__ documentElement [HTML]
   |__ bodyElement [BODY]
      |__ widthAttribute [value = 200px]
      |__ textNode [CDATA = 'This dummy']

• document là nút gốc, điểm bắt đầu xây dựng cây DOM
• element: nút phần tử, được phép có các nhánh con. Nút phần tử documentElement thường được đồng nhất với nút document. Theo mình biết hiện chỉ có Firefox phân biệt 2 nút này.
• attribute: nút thuộc tính, là nút con của nút phần tử, đây là lá, không có nhánh
• text: nút văn bản, đây là lá, không có nhánh. Cho biết nội dung có thể đọc [human readable], bởi đã là văn bản tất nhiên phải có nội dung gì đó để đọc. Như vậy, attribute là thuộc tính của các phần tử DOM. Attribute cho biết các đặc điểm của phần tử DOM đó.

• Như đã đề cập ở trên, các phần tử DOM được ánh xạ thành các đối tượng Javascript khi ta sử dụng Js để thao tác với DOM.

var paragraphs = document.getElementsByTagName['P'];
var firstParagraph = paragraphs[0]; 

• Phần tử

  đầu tiên của văn bản được ánh xạ thành đối tượng JS được trỏ bởi biến firstParagraph. [Chú ý getElementsByTagName[] trả lại NodeList, là một cấu trúc dữ liệu tương tự 1 mảng các Node, tức là có thuộc tính length, và truy xuất thông qua chỉ số.]

• Phần tử DOM được ánh xạ thành đối tượng Js, là đối tượng thì sẽ có thuộc tính và phương thức. Thuộc tính của đối tượng Js, được gọi là property. Vậy: Attribute là thuộc tính của phần tử DOM. Property là thuộc tính của đối tượng Javascript.

Lưu ý

• Attribute của DOM element và property của Js object tương ứng không có quan hệ 1 - 1. Ví dụ, attribute class được ánh xạ thành property className, attribute for được ánh xạ thành htmlFor

• Để tương tác với attribute, dùng phương thức getAttribute[name] và setAttribute['name', 'value']. Để thao tác với property, dùng dot notation [element.property = value]

• Thay đổi property không chắc chắn làm thay đổi attribute và ngược lại.

Ví dụ, attribute value của phần tử

    var paragraphs = document.getElementsByTagName['P'];
    var firstParagraph = paragraphs[0];
    firstParagraph.innerText = 'Nội dung đoạn văn';

• Ban đầu, giá trị trong input được đặt là 'type to search', propery tương ứng cũng vậy. Sau khi người dùng nhập dữ liệu, 'abc' chẳng hạn, thì property sẽ được thiết lập thành 'abc', tuy vậy, attribute vẫn không thay đổi

console.log[input.getAttribute['value']]; 
// type to search

console.log[input.value]; 
// 'abc'

Dù tên giống nhau nhưng attribute và property thuộc về 2 thế giới hoàn toàn khác nhau. Cần nắm rõ để tránh các hiểu lầm không cần thiết.