HTML | DOM 对象类型属性

在 HTML 页面中，DOM（文档对象模型）是用于管理页面元素的树形结构。DOM 对象类型属性用于获取或设置 DOM 元素的各种属性。

以下是一些常用的 DOM 对象类型属性：

1. innerHTML

innerHTML 属性可用于获得或设置 HTML 元素的内容。

<div id="myDiv">Hello, world!</div>

var div = document.getElementById("myDiv");
console.log(div.innerHTML); // 输出 "Hello, world!"
div.innerHTML = "Goodbye, world!";
console.log(div.innerHTML); // 输出 "Goodbye, world!"

2. value

value 属性可用于获得或设置 input 元素中的文本值。

<input type="text" id="myInput" value="Hello, world!">

var input = document.getElementById("myInput");
console.log(input.value); // 输出 "Hello, world!"
input.value = "Goodbye, world!";
console.log(input.value); // 输出 "Goodbye, world!"

3. className

className 属性可用于获得或设置 HTML 元素的类名。

<div id="myDiv" class="colorful">Hello, world!</div>

var div = document.getElementById("myDiv");
console.log(div.className); // 输出 "colorful"
div.className = "plain";
console.log(div.className); // 输出 "plain"

4. style

style 属性可用于获得或设置 HTML 元素的样式。

<div id="myDiv" style="color: red; font-size: 24px;">Hello, world!</div>

var div = document.getElementById("myDiv");
console.log(div.style.color); // 输出 "red"
console.log(div.style.fontSize); // 输出 "24px"
div.style.color = "blue";
div.style.fontSize = "20px";
console.log(div.style.color); // 输出 "blue"
console.log(div.style.fontSize); // 输出 "20px"

5. src

src 属性可用于获得或设置 img 元素的图像的 URL。

<img id="myImage" src="image.jpg">

var img = document.getElementById("myImage");
console.log(img.src); // 输出 "image.jpg"
img.src = "image.png";
console.log(img.src); // 输出 "image.png"