理解 HTML 属性和 DOM 对象属性之间的关系

摘要: 在本教程中，您将学习 HTML 属性和 DOM 对象属性之间的关系。

当 Web 浏览器加载 HTML 页面时，它会根据文档的 DOM 节点生成相应的 DOM 对象。

例如，如果页面包含以下 input 元素

<input type="text" id="username">Code language: JavaScript (javascript)

Web 浏览器将生成一个 HTMLInputElement 对象。

input 元素有两个属性

type 属性的值为 text。
id 属性的值为 username。

生成的 HTMLInputElement 对象将具有相应的属性

input.type 的值为 text。
input.id 的值为 username。

换句话说，Web 浏览器会自动将 HTML 元素的属性转换为 DOM 对象的属性。

但是，Web 浏览器只将标准属性转换为 DOM 对象的属性。元素的标准属性列在元素的规范中。

属性-属性映射并不总是一对一。例如

<input type="text" id="username" secured="true">Code language: JavaScript (javascript)

在此示例中，secured 是一个非标准属性

let input = document.querySelector('#username');
console.log(input.secured); // undefinedCode language: JavaScript (javascript)

属性方法

要访问标准和非标准属性，可以使用以下方法

element.getAttribute(name) – 获取属性值
element.setAttribute(name, value) – 设置属性的值
element.hasAttribute(name) – 检查属性是否存在
element.removeAttribute(name) – 删除属性

element.attributes

element.attributes 属性提供特定元素上可用属性的实时集合。例如

let input = document.querySelector('#username');

for(let attr of input.attributes) {
    console.log(`${attr.name} = ${attr.value}` )  
}Code language: JavaScript (javascript)

输出

type = text
id = username
secure = trueCode language: JavaScript (javascript)

请注意，element.attributes 是一个 NamedNodeMap，而不是一个 Array，因此，它没有 Array 的方法。

属性-属性同步

当标准属性更改时，相应的属性会自动更新，但有一些例外，反之亦然。

假设您有以下 input 元素

<input type="text" id="username" tabindex="1">Code language: JavaScript (javascript)

以下示例说明了 tabindex 属性的更改是如何传播到 tabIndex 属性，反之亦然

let input = document.querySelector('#username');

// attribute -> property
input.setAttribute('tabindex', 2);
console.log(input.tabIndex);  // 2


// property -> attribute
input.tabIndex = 3;
console.log(input.getAttribute('tabIndex')); // 3Code language: JavaScript (javascript)

以下示例显示当 value 属性更改时，它会反映在 value 属性中，但反之则不会

let input = document.querySelector('#username');

// attribute -> property: OK
input.setAttribute('value','guest');
console.log(input.value);  // guest


// property -> attribute: doesn't change
input.value = 'admin';
console.log(input.getAttribute('value')); // guestCode language: JavaScript (javascript)

DOM 属性是类型化的

属性的值始终为字符串。但是，当属性转换为 DOM 对象的属性时，属性值可以是字符串、布尔值、对象等。

以下 checkbox 元素具有 checked 属性。当 checked 属性转换为属性时，它是一个布尔值

<input type="checkbox" id="chkAccept" checked> Accept

let checkbox = document.querySelector('#chkAccept');
console.log(checkbox.checked); // trueCode language: JavaScript (javascript)

以下显示了带有 style 属性的 input 元素

<input type="password" id="password" style="color:red;with:100%">Code language: JavaScript (javascript)

style 属性是一个字符串，而 style 属性是一个对象

let input = document.querySelector('#password');

let styleAttr = input.getAttribute('style');
console.log(styleAttr);

console.dir(input.style);Code language: JavaScript (javascript)

输出

[object CSSStyleDeclaration]Code language: JavaScript (javascript)

data-* 属性

如果您想向元素添加自定义属性，您应该在它前面加上 data-，例如，data-secured，因为所有以 data- 开头的属性都保留给开发人员使用。

要访问 data-* 属性，您可以使用 dataset 属性。例如，我们有以下带自定义属性的 div 元素

<div id="main" data-progress="pending" data-value="10%"></div>Code language: JavaScript (javascript)

以下显示了如何通过 dataset 属性访问 data-* 属性

let bar = document.querySelector('#main');
console.log(bar.dataset);Code language: JavaScript (javascript)

输出

[object DOMStringMap] {
    progress: "pending",
    value: "10%"
}Code language: JavaScript (javascript)

摘要

属性在 HTML 元素中指定。
属性在 DOM 对象中指定。
属性分别转换为属性。
使用 element.attributes 属性访问元素的标准和自定义属性。
使用 element.dataset 属性访问 data-* 属性。

本教程是否有帮助？