HTML | DOM 值属性

简介

在 HTML 中，DOM（文档对象模型）是一种用于访问 HTML 元素的编程接口。DOM 实际上是把 HTML 文档表示为对象树的方式，通过操作这些对象，可以对 HTML 进行动态的改变和交互。

值属性（Value Properties）是 DOM 元素对象上的一种特殊属性类型，用于获取或设置元素的值。它们常用于表单元素（如输入框、单选框、复选框等）和一些其他元素（如图像、链接等）。

本文将介绍一些常用的 HTML DOM 值属性，帮助程序员更好地理解和使用它们。

常用的值属性

1. value

value 属性用于获取或设置表单元素的值。它适用于输入框、单选框、复选框等元素。

示例：

// 获取输入框的值
var input = document.getElementById("myInput");
var inputValue = input.value;

// 设置输入框的值
input.value = "Hello world!";

2. src

src 属性用于获取或设置图像元素的源 URL。

示例：

// 获取图像的源 URL
var img = document.getElementById("myImage");
var imgUrl = img.src;

// 设置图像的源 URL
img.src = "new_image.jpg";

3. href

href 属性用于获取或设置链接元素的目标 URL。

示例：

// 获取链接的目标 URL
var link = document.getElementById("myLink");
var linkUrl = link.href;

// 设置链接的目标 URL
link.href = "http://www.example.com";

4. innerHTML

innerHTML 属性用于获取或设置元素内部的 HTML 内容。它可以用于创建、修改或获取元素的子节点。

示例：

// 获取元素的内部 HTML 内容
var element = document.getElementById("myElement");
var htmlContent = element.innerHTML;

// 设置元素的内部 HTML 内容
element.innerHTML = "<strong>Hello</strong>, world!";

5. innerText

innerText 属性用于获取或设置元素内部的文本内容。它类似于 innerHTML，但只获取或设置纯文本，不包含 HTML 标签。

示例：

// 获取元素的内部文本内容
var element = document.getElementById("myElement");
var textContent = element.innerText;

// 设置元素的内部文本内容
element.innerText = "Hello, world!";

6. checked

checked 属性用于获取或设置复选框元素的选中状态。

示例：

// 获取复选框的选中状态
var checkbox = document.getElementById("myCheckbox");
var isChecked = checkbox.checked;

// 设置复选框的选中状态
checkbox.checked = true;

结论

通过使用 HTML DOM 值属性，程序员可以方便地获取和设置 HTML 元素的值，从而实现对表单元素、图像、链接等的操作和控制。上述介绍的一些常用值属性只是冰山一角，还有很多其他有用的属性可以在 DOM 中发现。掌握这些属性能够提高 JavaScript 与 HTML 结合编程的效率和能力。

通过反复实践和对文档的深入研究，你将更加熟悉这些值属性，并能够在实际项目中灵活运用它们。祝你编程愉快！