Hôm nay, chúng ta sẽ xem xét cách lấy, đặt, xóa và kiểm tra các thuộc tính dữ liệu trên một phần tử. Nào cùng đào vào bên trong!
Thuộc tính dữ liệu là gì? Thuộc tính dữ liệu là một thuộc tính tùy chỉnh trên một phần tử bắt đầu bằng data- *. Nó có thể được sử dụng để lưu trữ thông tin (hoặc “trạng thái”) về phần tử, hoặc thậm chí chỉ như một bộ chọn cho các thành phần JavaScript.
Trong ví dụ này, nút có một thuộc tính dữ liệu có tên [data-click].

Bạn đang xem : vani js get thuộc tính

Ngày 3 tháng 11 năm 2021

Cách lấy, đặt và xóa các thuộc tính dữ liệu với JavaScript vani

Hôm nay, chúng ta sẽ xem xét cách lấy, đặt, xóa và kiểm tra các thuộc tính dữ liệu trên một phần tử. Hãy cùng tìm hiểu!

Thuộc tính dữ liệu là gì?

Thuộc tính dữ liệu là thuộc tính tùy chỉnh trên phần tử bắt đầu bằng data- * . Nó có thể được sử dụng để lưu trữ thông tin (hoặc “trạng thái”) về phần tử hoặc thậm chí chỉ làm bộ chọn cho các thành phần JavaScript .

Trong ví dụ này, nút có thuộc tính dữ liệu có tên là [data-click] . Nó có giá trị là count .

Nút

  

& lt;

data-click

=

" count "

& gt; Nút Đếm ngược

& lt; /

& gt;

Tuy nhiên, thuộc tính dữ liệu không nhất thiết phải có giá trị. Trong ví dụ này, nút có thiếu dữ liệu là [data-count] , không có giá trị.

Nút

  

& lt;

data-count

& gt;

Nút đếm ngược

& lt; /

& gt;

Bây giờ, hãy xem cách sử dụng chúng với JavaScript vani.

Thao tác thuộc tính dữ liệu với JavaScript

Element.getAttribute () , Element.setAttribute () , Element.removeAttribute () Element.hasAttribute Các phương thức () được sử dụng để 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ử.

Nếu thuộc tính không tồn tại trên một phần tử, phương thức Element.getAttribute () trả về null .

  

let

btn

=

tài liệu

.

querySelector

(

'nút'

);

// Lấy giá trị của thuộc tính [data-click]

// trả về "số lượng"

hãy để

nhấp vào

=

btn

.

getAttribute

(

'data-click'

);

// Đặt giá trị cho thuộc tính [data-count]

// & lt; button data-count = "up" & gt; Đếm ngược & lt; / button & gt;

btn

.

setAttribute

(

'data-count'

,

'up'

);

// Xóa thuộc tính [data-click]

btn

.

removeAttribute

(

'data-click'

);

// Kiểm tra xem một phần tử có thuộc tính `[data-toggle]` hay không

if

(

btn

.

hasAttribute

(

'chuyển đổi dữ liệu'

))

{

bảng điều khiển

.

log

(

'Chuyển đổi cái gì đó, anh bạn!'

);

}

Thuộc tính dữ liệu và CSS

Thuộc tính dữ liệu cũng là bộ chọn CSS hợp lệ. Gói các bộ chọn thuộc tính trong dấu ngoặc vuông, như thế này.

  

/ **

* Tạo kiểu cho nút [data-count]

* /

[

data-count

]

{

background-color

:

# 0088cc

;

border-color

:

# 0088cc

;

color

:

# ffffff

; < / p>

}

Bạn cũng có thể sử dụng với các phương thức JavaScript chấp nhận bộ chọn CSS làm đối số, như document.querySelector () , document.querySelectorAll () , Phần tử. đối sánh () Element.closet () .

  

// Lấy các phần tử có thuộc tính dữ liệu

hãy để

đếm

=

tài liệu

.

querySelector

(

'[data-count]'

);

let

allCounts

=

document

.

querySelectorAll

(

' [data-count] '

);

// Kiểm tra xem một phần tử có thuộc tính dữ liệu hay không

if

(

đếm

.

khớp

(

'[data-click]'

))

{

bảng điều khiển

.

log

(

'Chúng ta có một trận đấu!'

);

}

Cũng có một số cách nâng cao để nhắm mục tiêu các thuộc tính dữ liệu .

Thuộc tính tùy chỉnh

Mặc dù các thuộc tính dữ liệu (bắt đầu bằng data- * ) là một quy ước chung, bạn cũng có thể tạo các thuộc tính tùy chỉnh. Một số thư viện làm điều này.

Ví dụ: Vue thực hiện điều này với các thuộc tính v- * .

  

& lt;

div

id

=

" app-3 "

& gt;

& lt;

span

v-if

=

"đã thấy"

& gt;

Bây giờ bạn thấy tôi

& lt; / < / p>

span

& gt;

& lt; /

div

& gt;

Bạn cũng có thể sử dụng các phương thức Element. * Attribute () để thao tác các thuộc tính tùy chỉnh.

  

let

span

=

tài liệu

.

querySelector

(

'[v-if]'

);

// Cập nhật giá trị của thuộc tính [v-if]

span

.

setAttribute

(

'v-if'

,

'vô hình'

);

Ngày mai, chúng ta sẽ xem xét một cách khác để lấy và đặt các thuộc tính dữ liệu: thuộc tính Element.dataset . Và vào thứ Sáu, chúng ta sẽ khám phá các chiến lược khác nhau để làm việc với các thuộc tính dữ liệu.


Xem thêm những thông tin liên quan đến chủ đề vani js get thuộc tính

How to create a Web Component using Vanilla JS

  • Tác giả: A shot of code
  • Ngày đăng: 2020-03-10
  • Đánh giá: 4 ⭐ ( 3404 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: In this video we look at creating a Web Component without the help of any framework or libraries! this allows us to dig into the deeper details of Web Components including the lifecycle events, ShadowDOM and the many issues that a library or framework abstracts away for us. Problems dealing with events and rendering become immediately apparent when looking to roll our own solution rather than using something like LitElement, Stencil, svelte, react, vue, angular or any other framework that provides an abstraction layer on top of creating a Web Component.
    We look at the issues in using innerHTML to setup the UserInterface and also how tricky it is to sync the attributes and properties between the component class and the tag element on the html page.

    0:00 Intro
    1:26 Create Shadow DOM
    2:18 Component HTML
    3:55 Render using Connected Callback Life Cycle event
    4:50 Define CustomElement and name it
    5:30 Show Web Component on Simple Web Page
    6:45 Configure properties/attributes using ObservedAttributes callback
    7:45 Sync attributes/properties using AttributeChanged callback
    8:30 Refresh component on property change
    9:25 Define golden source as for property/attribute value
    11:00 Update property programmatically
    13:30 Handle Events within Component

    P.S Just joined buy me a coffee 🙂
    https://www.buymeacoffee.com/ashotofcode

Get / Set thuộc tính thông qua JS DOM

  • Tác giả: hanoiict.edu.vn
  • Đánh giá: 4 ⭐ ( 1842 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 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.

Cách đếm số lượng thuộc tính của đối tượng JavaScript

  • Tác giả: helpex.vn
  • Đánh giá: 4 ⭐ ( 5482 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Trong khi làm việc với JavaScript, tôi bắt gặp một yêu cầu để đếm một số thuộc tính trong một đối tượng JavaScript. Tôi tìm thấy hai cách để tìm số lượng thuộc tính trong một đối tượng.…

Backbone.js lấy và đặt thuộc tính đối tượng lồng nhau

  • Tác giả: qastack.vn
  • Đánh giá: 3 ⭐ ( 2323 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: [Tìm thấy giải pháp!] Mặc dù this.model.get(“obj1”).myAttribute1ổn, nhưng nó có một chút vấn đề vì sau đó bạn có thể…

Truy cập và lấy thuộc tính của object trong javascript

  • Tác giả: laptrinhcanban.com
  • Đánh giá: 4 ⭐ ( 2450 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Hướng dẫn cách truy cập và lấy thuộc tính của object javascript. Bạn sẽ học được các phương pháp cơ bản để truy cập và lấy thuộc tính của object trong JavaScript sau bài học này.

Getter và setter trong JavaScript

  • Tác giả: vi-magento.com
  • Đánh giá: 3 ⭐ ( 8603 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Getters và setters tồn tại trong hầu hết các ngôn ngữ lập trình hướng đối tượng, bao gồm cả JavaScript.

Cách tạo class trong Javascript (Hướng đối tượng OOP ES6)

  • Tác giả: freetuts.net
  • Đánh giá: 3 ⭐ ( 9992 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Class trong javascript là một kỹ thuật giúp ta tạo ra các lớp mẫu chương trình để thể hiện cho các đối tượng. Qua đó, ta có thể thêm thuộc tính và phương thức

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  Các vòng lặp lồng nhau trong Python - các vòng lồng nhau trong python

By ads_php