HTML | DOM 属性 属性

在 HTML 中，每个元素都可以具有属性(property)，属性是提供元素额外信息的有效方法，例如 id attribute(属性) 可以用于标识一个特定的 HTML 元素。 在 DOM (文档对象模型) 中，每个元素都是对象，每个属性也是一个对象属性。

HTML 属性

HTML 属性为可以设置、更改或获取标签的值(key-value)，如下所示：

<tagname attribute_name = "attribute_value">

例如：

<a href="www.example.com">This is a link</a>

DOM 元素属性

在 DOM 中，每个元素都是一个对象。这个对象有很多属性，可通过 JavaScript 来访问。这些属性通常称为节点对象，如下所示：

document.getElementById(id).属性

例如：

document.getElementById("myImage").src;

上述代码返回myImage元素的src属性值，可以获取、修改和设置。

JavaScript 可以更改任何 HTML 元素属性，例如：

document.getElementById("myImage").src = "landscape.jpg";

这会将myImage的src属性更改为“landscape.jpg”。

还可以通过HTML DOM查找和更改文本或元素内容，例如：

document.getElementById("demo").innerHTML = "Hello World!";

这会将具有 id="demo" 的元素的 HTML 内容更改为"Hello World!"。

HTML DOM 属性

HTML DOM 属性是 HTML 元素的标准属性对象模型。除了修改某些节点属性，还可以添加或删除属性，例如：

document.getElementById("myImage").id = "newImage";

这会将把myImage的id属性更改为"newImage"。

另一个示例是增加新的属性到 HTML 元素：

document.getElementById("myImage").alt = "A beautiful landscape";

上述代码将添加一个 alt 属性到 myImage，值为 "A beautiful landscape"。

也可以直接使用该元素的属性列表来添加或删除多个属性：

element.attribute = value;
element.setAttribute(attribute, value)
element.getAttribute(attribute)
element.removeAttribute(attribute)

例如：

document.getElementById("myImage").setAttribute("width", "600");

上述代码将myImage的宽度更改为600 pixels.

结论

在 HTML 中使用属性为元素提供附加信息，而在 DOM 中使用属性，可通过 JavaScript 访问、更改和设置节点对象的属性。通过 HTML DOM 属性，还可以添加、删除和修改元素属性。