From 218934fa2ed1c702a6d3923d2aa2cc6b43c48684 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:43:23 -0500 Subject: initial commit --- files/vi/web/api/htmlelement/dataset/index.html | 139 ++++++++++++ files/vi/web/api/htmlelement/index.html | 268 ++++++++++++++++++++++++ 2 files changed, 407 insertions(+) create mode 100644 files/vi/web/api/htmlelement/dataset/index.html create mode 100644 files/vi/web/api/htmlelement/index.html (limited to 'files/vi/web/api/htmlelement') diff --git a/files/vi/web/api/htmlelement/dataset/index.html b/files/vi/web/api/htmlelement/dataset/index.html new file mode 100644 index 0000000000..44ce2c7393 --- /dev/null +++ b/files/vi/web/api/htmlelement/dataset/index.html @@ -0,0 +1,139 @@ +--- +title: HTMLElement.dataset +slug: Web/API/HTMLElement/dataset +tags: + - API + - HTML DOM + - HTMLElement + - Tham khảo + - Thuộc tính + - dataset +translation_of: Web/API/HTMLOrForeignElement/dataset +--- +
{{ APIRef("HTML DOM") }}
+ +

The dataset property on the {{domxref("HTMLElement")}} interface provides read/write access to all the custom data attributes (data-*) set on the element. This access is available both in HTML and within the DOM.  It is a map of DOMString, one entry for each custom data attribute.  Note that the dataset property itself can be read, but not directly written.  Instead, all writes must be to the individual properties within the dataset, which in turn represent the data attributes.   Note also that an HTML data-attribute and its corresponding DOM dataset.property do not share the same name, but they are always similar:

+ + + +

In addition to the information below, you'll find a how-to guide for using HTML data attributes in our article Using data attributes.

+ +

Chuyển đổi tên

+ +

Từ dash-style (kiểu-gạch-nối) sang camelCase (bướuLạcĐà): Tên thuộc tính dữ liệu tùy biến được chuyển đổi thành khóa cho {{ domxref("DOMStringMap") }} dự trên quy định sau:

+ + + +

Từ camelCase (bướuLạcĐà) sang dash-style (kiểu-gạch-nối): Cách chuyển đổi ngược lại, dò theo khóa để tìm ra tên thuộc tính, bằng quy định sau:

+ + + +

Việc có rằng buộc trong quy định trên nhằm đảm bảo việc chuyển đổi có thể đảo ngược cho nhau.

+ +

Ví dụ, thuộc tính có tên data-abc-def sẽ có khóa tương ứng abcDef.

+ + + +

Truy cập giá trị

+ + + +

Loại giá trị

+ + + +

Cú pháp

+ + + +

Ví dụ

+ +
<div id="user" data-id="1234567890" data-user="johndoe" data-date-of-birth>John Doe</div>
+ +
const el = document.querySelector('#user');
+
+// el.id == 'user'
+// el.dataset.id === '1234567890'
+// el.dataset.user === 'johndoe'
+// el.dataset.dateOfBirth === ''
+
+// gán dữ liệu cho thuộc tính data
+el.dataset.dateOfBirth = '1960-10-03';
+// Kết quả: el.dataset.dateOfBirth === 1960-10-03
+
+delete el.dataset.dateOfBirth;
+// Kết quả: el.dataset.dateOfBirth === undefined
+
+// 'someDataAttr' in el.dataset === false
+el.dataset.someDataAttr = 'mydata';
+// Kết quả: 'someDataAttr' in el.dataset === true
+
+ +

Thông số kỹ thuật

+ + + + + + + + + + + + + + + + + + + + + + + + +
Thông số kỹ thuậtTrạng tháiChú thích
{{SpecName('HTML WHATWG', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML WHATWG')}}No change from latest snapshot, {{SpecName('HTML5.1')}}
{{SpecName('HTML5.1', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5.1')}}Snapshot of {{SpecName('HTML WHATWG')}}, no change from {{SpecName('HTML5 W3C')}}
{{SpecName('HTML5 W3C', "dom.html#dom-dataset", "HTMLElement.dataset")}}{{Spec2('HTML5 W3C')}}Snapshot of  {{SpecName('HTML WHATWG')}}, initial definition.
+ +

Tính tương thích trên trình duyệt

+ + + +

{{Compat("api.HTMLElement.dataset")}}

+ +

Xem thêm

+ + diff --git a/files/vi/web/api/htmlelement/index.html b/files/vi/web/api/htmlelement/index.html new file mode 100644 index 0000000000..1a625a2a5b --- /dev/null +++ b/files/vi/web/api/htmlelement/index.html @@ -0,0 +1,268 @@ +--- +title: HTMLElement +slug: Web/API/HTMLElement +tags: + - API + - HTML DOM + - Interface +translation_of: Web/API/HTMLElement +--- +
{{ APIRef("HTML DOM") }}
+ +

Interface HTMLElement đại diện cho mọi phần tử HTML. Một vài phần tử sử dụng trực tiếp interface này, một vài phần tử khác lại sử dụng nó thông qua các lớp khác kế thừa nó.

+ +

{{InheritanceDiagram}}

+ +

Các thuộc tính

+ +

Được kế thừa từ {{domxref("Element")}}, và sử dụng chúng từ {{domxref("GlobalEventHandlers")}} và {{domxref("TouchEventHandlers")}}.

+ +
+
{{domxref("HTMLElement.accessKey")}}
+
Là một {{domxref("DOMString")}} trả về từ khoá truy cập được gán cho phần tử.
+
{{domxref("HTMLElement.accessKeyLabel")}} {{readonlyInline}}
+
Trả về một {{domxref("DOMString")}} chứa các từ khoá truy cập đã được gán của phần tử.
+
{{domxref("HTMLElement.contentEditable")}}
+
Là một {{domxref("DOMString")}}, nếu giá trị là "true", ta có thể chỉnh sửa phần tử này và ngược lại nếu giá trị là "false".
+
{{domxref("HTMLElement.isContentEditable")}} {{readonlyInline}}
+
Trả về giá trị {{domxref("Boolean")}} cho biết nội dung của phần tử có được phép chỉnh sửa hay không.
+
{{domxref("HTMLElement.contextMenu")}} {{deprecated_inline}}
+
Là một {{domxref("HTMLMenuElement")}} trả về một menu tóm lược liên kết các phần tử. Giá trị có thể là null.
+
{{domxref("HTMLElement.dataset")}} {{readonlyInline}}
+
Trả về một {{domxref("DOMStringMap")}} cho phép ta thao tác với các thuộc tính dữ liệu tùy biến của phần tử (data-*) .
+
{{domxref("HTMLElement.dir")}}
+
Là một {{domxref("DOMString")}}, tương tự với thuộc tính global dir, đại diện cho hướng hiển thị của phần tử. Các giá trị cho phép là "ltr", "rtl", và "auto".
+
{{domxref("HTMLElement.draggable")}}
+
Có kiểu {{jsxref("Boolean")}} cho ta biết phần tử có thể được kéo (drag) hay không.
+
{{domxref("HTMLElement.dropzone")}} {{readonlyInline}}
+
Trả về một {{domxref("DOMSettableTokenList")}} tương tự với thuộc tính global dropzone mô tả hành vi của phần tử liên quan đến hành động thả (drop).
+
{{domxref("HTMLElement.hidden")}}
+
Có kiểu {{jsxref("Boolean")}} cho ta biết phần tử có ẩn hay không.
+
{{domxref("HTMLElement.inert")}}
+
Có kiểu {{jsxref("Boolean")}} cho ta biết user agent must act as though the given node is absent đối với các sự kiện tương tác của người dùng, tìm kiếm văn bản trong trang, và lựa chọn văn bản.
+
{{domxref("HTMLElement.innerText")}}
+
Trả về nội dung văn bản được "render" từ một node và phần tử con của nó. Điều này tương tự với việc người dùng bôi đen văn bản và sao chép chúng.
+
{{domxref("HTMLElement.itemScope")}} {{experimental_inline}}
+
Có kiểu {{jsxref("Boolean")}} cho biết scope của item.
+
{{domxref("HTMLElement.itemType")}} {{readonlyInline}}{{experimental_inline}}
+
Trả về một {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemId")}} {{experimental_inline}}
+
Là một {{domxref("DOMString")}} cho biết ID của item.
+
{{domxref("HTMLElement.itemRef")}} {{readonlyInline}}{{experimental_inline}}
+
Là một {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemProp")}} {{readonlyInline}}{{experimental_inline}}
+
Trả về một {{domxref("DOMSettableTokenList")}}…
+
{{domxref("HTMLElement.itemValue")}} {{experimental_inline}}
+
Trả về một {{jsxref("Object")}} cho biết giá trị của item.
+
{{domxref("HTMLElement.lang")}}
+
Là một {{domxref("DOMString")}} cho biết ngôn ngữ của thuộc tính của một phần tử, của văn bản và của nội dung phần tử đó.
+
{{domxref("HTMLElement.noModule")}}
+
Có kiểu {{jsxref("Boolean")}} cho biết rằng việc nhúng đoạn script có thể được thực thi bởi user agent (có hỗ trợ module scripts) hay không.
+
{{domxref("HTMLElement.nonce")}}
+
Returns the cryptographic number used once that is used by Content Security Policy to determine whether a given fetch will be allowed to proceed.
+
{{domxref("HTMLElement.offsetHeight")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the height of an element, relative to the layout.
+
{{domxref("HTMLElement.offsetLeft")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's left border to its offsetParent's left border.
+
{{domxref("HTMLElement.offsetParent")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("Element")}} that is the element from which all offset calculations are currently computed.
+
{{domxref("HTMLElement.offsetTop")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double, the distance from this element's top border to its offsetParent's top border.
+
{{domxref("HTMLElement.offsetWidth")}}{{readonlyInline}}{{experimental_inline}}
+
Returns a double containing the width of an element, relative to the layout.
+
{{domxref("HTMLElement.properties")}} {{readonlyInline}}{{experimental_inline}}
+
Returns a {{domxref("HTMLPropertiesCollection")}}…
+
{{domxref("HTMLElement.spellcheck")}}{{ gecko_minversion_inline("1.9")}}
+
Is a {{jsxref("Boolean")}} that controls spell-checking. It is present on all HTML elements, though it doesn't have an effect on all of them.
+
{{domxref("HTMLElement.style")}}
+
Is a {{domxref("CSSStyleDeclaration")}}, an object representing the declarations of an element's style attributes.
+
{{domxref("HTMLElement.tabIndex")}}
+
Is a long representing the position of the element in the tabbing order.
+
{{domxref("HTMLElement.title")}}
+
Is a {{domxref("DOMString")}} containing the text that appears in a popup box when mouse is over the element.
+
{{domxref("HTMLElement.translate")}} {{experimental_inline}}
+
Is a {{jsxref("Boolean")}} representing the translation.
+
+ +

Event handlers

+ +

Most event handler properties, of the form onXYZ, are defined on the {{domxref("GlobalEventHandlers")}} or {{domxref("TouchEventHandlers")}} interfaces and implemented by HTMLElement. In addition, the following handlers are specific to HTMLElement.

+ +
+
{{ domxref("HTMLElement.oncopy") }} {{ non-standard_inline() }}
+
Returns the event handling code for the copy event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.oncut") }} {{ non-standard_inline() }}
+
Returns the event handling code for the cut event ({{bug("280959")}}).
+
{{ domxref("HTMLElement.onpaste") }} {{ non-standard_inline() }}
+
Returns the event handling code for the paste event ({{bug("280959")}}).
+
{{domxref("TouchEventHandlers.ontouchstart")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchstart")}} event.
+
{{domxref("TouchEventHandlers.ontouchend")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchend")}} event.
+
{{domxref("TouchEventHandlers.ontouchmove")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchmove")}} event.
+
{{domxref("TouchEventHandlers.ontouchenter")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchenter")}} event.
+
{{domxref("TouchEventHandlers.ontouchleave")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchleave")}} event.
+
{{domxref("TouchEventHandlers.ontouchcancel")}} {{non-standard_inline}}
+
Returns the event handling code for the {{event("touchcancel")}} event.
+
+ +

Các phương thức

+ +

Được kế thừa từ {{domxref("Element")}}.

+ +
+
{{domxref("HTMLElement.blur()")}}
+
Bỏ truy cập phần tử hiện tại.
+
{{domxref("HTMLElement.click()")}}
+
Gửi một sự kiện click chuột đến phần tử.
+
{{domxref("HTMLElement.focus()")}}
+
Truy cập đến phần tử hiện tại (truy cập bằng cách click vào phần tử hoặc nhấn phím Tab để di chuyển đến).
+
{{domxref("HTMLElement.forceSpellCheck()")}} {{experimental_inline}}
+
Kiểm tra chính tả nội dung của phần tử.
+
+ +

Các sự kiện

+ +

Bắt các sự kiện bằng cách sự dụng phương thức addEventListener() hoặc bằng cách gán một thuộc tính sự sự kiện on_tên_sự_kiện dựa trên interface này.

+ +
+
invalid
+
Được gọi khi một phần tử không thỏa điều kiện khi đang xác minh (validation) thông tin.
+ Dùng tương tự với thuộc tính oninvalid.
+
+ +

Các sự kiện animation

+ +
+
animationcancel
+
Được gọi khi một animation dừng đột ngột.
+ Dùng tương tự với thuộc tính onanimationcancel.
+
animationend
+
Được gọi khi một animation kết thúc.
+ Dùng tương tự với thuộc tính onanimationend.
+
animationiteration
+
Được gọi khi một vòng lặp animation kết thúc.
+ Dùng tương tự với thuộc tính onanimationiteration.
+
animationstart
+
Fired when an animation starts.
+ Dùng tương tự với thuộc tính onanimationstart.
+
+ +

Các sự kiện input

+ +
+
beforeinput
+
Được gọi khi giá trị của một phần tử {{HTMLElement("input")}}, {{HTMLElement("select")}}, hoặc {{HTMLElement("textarea")}} sắp được chỉnh sửa.
+
input
+
Được gọi khi giá trị của một phần tử {{HTMLElement("input")}}, {{HTMLElement("select")}}, hoặc {{HTMLElement("textarea")}} đã được chỉnh sửa.
+ Dùng tương tự với thuộc tính oninput.
+
+ +

Pointer events

+ +
+
gotpointercapture
+
Fired when an element captures a pointer using setPointerCapture().
+ Also available via the ongotpointercapture property.
+
lostpointercapture
+
Fired when a captured pointer is released.
+ Also available via the onlostpointercapture property.
+
pointercancel
+
Fired when a pointer event is canceled.
+ Also available via the onpointercancel property.
+
pointerdown
+
Fired when a pointer becomes active.
+ Also available via the onpointerdown property.
+
pointerenter
+
Fired when a pointer is moved into the hit test boundaries of an element or one of its descendants.
+ Also available via the onpointerenter property.
+
pointerleave
+
Fired when a pointer is moved out of the hit test boundaries of an element.
+ Also available via the onpointerleave property.
+
pointermove
+
Fired when a pointer changes coordinates.
+ Also available via the onpointermove property.
+
pointerout
+
Fired when a pointer is moved out of the hit test boundaries of an element (among other reasons).
+ Also available via the onpointerout property.
+
pointerover
+
Fired when a pointer is moved into an element's hit test boundaries.
+ Also available via the onpointerover property.
+
pointerup
+
Fired when a pointer is no longer active.
+ Also available via the onpointerup property.
+
+ +

Các sự kiện transition

+ +
+
transitioncancel
+
Được gọi khi một CSS transition bị hủy.
+ Dùng tương tự với thuộc tính ontransitioncancel.
+
transitionend
+
Được gọi khi một CSS transition hoàn thành.
+ Dùng tương tự với thuộc tính ontransitionend.
+
transitionrun
+
Được gọi khi một CSS transition được tạo ra đầu tiên.
+ Dùng tương tự với thuộc tính ontransitionrun.
+
transitionstart
+
Được gọi khi một CSS transition thực sự bắt đầu.
+ Dùng tương tự với thuộc tính ontransitionstart.
+
+ +

Specifications

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('CSSOM View', '#extensions-to-the-htmlelement-interface', 'HTMLElement')}}{{Spec2('CSSOM View')}}Added the following properties: offsetParent, offsetTop, offsetLeft, offsetWidth, and offsetHeight.
{{SpecName('HTML WHATWG', 'elements.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML WHATWG')}}Added the following properties: translate, itemScope, itemType, itemId, itemRef, itemProp, properties, and itemValue.
+ Added the following method: forceSpellcheck().
+ Moved the onXYZ attributes to the {{domxref("GlobalEventHandlers")}} interface and added an inheritance from it.
{{SpecName('HTML5 W3C', 'dom.html#htmlelement', 'HTMLElement')}}{{Spec2('HTML5 W3C')}}Added the following properties: dataset, hidden, tabindex, accessKey, accessKeyLabel, draggable, dropzone, contentEditable, isContentEditable, contextMenu, spellcheck, commandType, commandLabel, commandIcon, commandHidden, commandDisabled, commandChecked, style, and all the onXYZ properties.
+ Moved the id and className properties to the {{domxref("Element")}} interface.
{{SpecName('DOM2 HTML', 'html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM2 HTML')}}No change from {{SpecName('DOM2 HTML')}}
{{SpecName('DOM1', 'level-one-html.html#ID-011100101', 'HTMLElement')}}{{Spec2('DOM1')}}Initial definition.
+ +

Khả năng tương thích của trình duyệt

+ + + +

{{Compat("api.HTMLElement")}}

+ +

Xem thêm

+ + -- cgit v1.2.3-54-g00ecf