JavaScript getAttribute (): Lấy giá trị của một thuộc tính trên một phần tử – es6 nhận giá trị thuộc tính

Trong hướng dẫn này, bạn sẽ học cách sử dụng phương thức getAttribute () của JavaScript để lấy giá trị của một thuộc tính được chỉ định trên một phần tử.

Bạn đang xem : es6 nhận giá trị thuộc tính

Tóm tắt : trong hướng dẫn này, bạn sẽ học cách sử dụng phương thức JavaScript getAttribute () để lấy giá trị của một thuộc tính được chỉ định trên một phần tử.

Giới thiệu về JavaScript < code> getAttribute () phương thức

Để nhận giá trị của một thuộc tính trên một phần tử được chỉ định, bạn gọi phương thức getAttribute () của phần tử:

 

let

value = element.getAttribute (name) ;

Ngôn ngữ mã:

JavaScript

(

javascript

)

Tham số

getAttribute () chấp nhận một đối số là tên của thuộc tính mà bạn muốn trả về giá trị.

Giá trị trả về

Nếu thuộc tính tồn tại trên phần tử, getAttribute () trả về một chuỗi đại diện cho giá trị của thuộc tính. Trong trường hợp thuộc tính không tồn tại, getAttribute () trả về null .

Lưu ý rằng bạn có thể sử dụng hasAttribute () để kiểm tra xem thuộc tính có tồn tại trên phần tử hay không trước khi nhận giá trị của nó.

JavaScript getAttribute () example

Hãy xem xét ví dụ sau:

 

& lt;

html

& gt;

& lt;

head

& gt;

& lt;

meta

bộ ký tự

=

" utf-8 "

& gt;

& lt;

title

& gt;

JS getAttribute () Demo

& lt; /

title

& gt;

& lt; /

head

& gt;

& lt;

body

& gt;

& lt;

a

href

=

" https://www.javascripttutorial.net "

target

=

"_ blank"

id

=

"js"

& gt;

Hướng dẫn JavaScript

& lt; /

a

& gt;

& lt;

script

& gt;

let

link =

document

.querySelector (

'# js' < / p>);

nếu

(liên kết) {

let

target = link.getAttribute (

'target'

);

bảng điều khiển

.log (target); }

& lt; /

script

& gt;

& lt; /

body

& gt;

& lt; /

html

& gt;

Ngôn ngữ mã:

HTML, XML

(

xml

)

Kết quả

< pre class = "wp-block-code">

_ blank

Cách hoạt động:

  • Đầu tiên, chọn phần tử liên kết có id js bằng cách sử dụng phương thức querySelector () .
  • Thứ hai, lấy thuộc tính đích của liên kết bằng cách gọi getAttribute () của liên kết đã chọn phần tử.
  • Thứ ba, hiển thị giá trị của target trên cửa sổ Console.

Ví dụ sau sử dụng phương thức getAttribute () để lấy giá trị thuộc tính title của phần tử liên kết với id js :

 

let

link =

document

.querySelector (

'# js '

);

nếu

(liên kết) {

let

title = link.getAttribute (

'title'

);

bảng điều khiển

.log (title); }

Ngôn ngữ mã:

JavaScript

(

javascript

)

Đầu ra:

 

null

Ngôn ngữ mã:

JavaScript

(

javascript

)

Tóm tắt

  • Nhận giá trị thuộc tính của một phần tử được chỉ định bằng cách gọi phương thức getAttribute () trên phần tử đó.
  • Trả về getAttribute () null nếu thuộc tính không tồn tại.

Hướng dẫn này có hữu ích không?

< p class = "wth-title">


Xem thêm những thông tin liên quan đến chủ đề es6 nhận giá trị thuộc tính

The Lesser Known Features of ES6

  • Tác giả: InfoQ
  • Ngày đăng: 2014-08-21
  • Đánh giá: 4 ⭐ ( 7949 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Bryan Hughes focuses on exciting new features for ES6 that fewer people are talking about, like, Destructing Assignment, Computed Property Names, the “for…of” statement, the Rest and Spread Operators.

    More HTML5 & JavaScript Resources: http://crcl.to/go

    Tickets to Forward 2: http://forwardjs.com/

Tổng hợp kiến thức ES6

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 5068 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: - 1. let, const và block scoping - 2. Arrow Functions - 3. Default Function Parameters - 4. Spread / Rest Operator - 5. Object Literal Extensions - 6. Octal và Binary Literals - 7. Array và Object Des...

Cách lấy các thuộc tính duy nhất của một tập hợp các đối tượng trong một mảng JavaScript

  • Tác giả: tech-wiki.online
  • Đánh giá: 3 ⭐ ( 3875 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Phần 1: Các lệnh tắt giá trị thuộc tính, Tên thuộc tính được tính toán, Định nghĩa phương pháp, Hàm mũi tên

  • Tác giả: itzone.com.vn
  • Đánh giá: 5 ⭐ ( 6334 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: The ITZone platform Vietnam is the community for anyone interested in news, training seminars, presentations etc in the IT industry

Tìm hiểu về Proxy trong ES6

  • Tác giả: kipalog.com
  • Đánh giá: 3 ⭐ ( 3132 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Vưỡn như thường lệ, bài gốc đăng ở Êku :bow: (Link) (Ảnh) _Dragon Knight Minh họa bởi (Link)_ Nói về ES6 có lẽ chúng ta đã quá quen thuộc với ...

Enhanced Object Properties trong ES6

  • Tác giả: toidicode.com
  • Đánh giá: 3 ⭐ ( 7749 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong Javascript đối tượng là thứ mà chúng ta thường xuyên phải sử dụng. Và cách khai báo nó cũng hết sức đơn giản (ai không biết xem lại). Nhưng nhận thấy cách thức khai báo và sử dụng trong javascript vẫn còn rườm ra và phức tạp quá, nên ES6 đã hỗ trợ thêm cho chúng ta các kiểu khai báo và sử dụng sau...

Tổng hợp những tính năng ES6 nổi bật

  • Tác giả: nthung2112.github.io
  • Đánh giá: 4 ⭐ ( 2246 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tổng hợp những tính năng ES6 nổi bật - Hung Tan Nguyen

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  LinkSprinter® - responsive tester