HTML | DOM 主体属性

HTML（Hyper Text Markup Language）是一种用于创建 Web 页面的标准标记语言。DOM（Document Object Model）是对 HTML 文档中每个元素的抽象表示，让开发者可以通过 JavaScript 来操作 HTML 元素。在这里我们将介绍 DOM 主体属性，它们用于获取或设置 HTML 元素的内容或属性，或者用于创建或删除 HTML 元素。

1. innerHTML

innerHTML 属性用于获取或设置 HTML 元素的内容，包括标签和文本。当用于获取时，它返回 HTML 元素的内容作为字符串，当用于设置时，它将指定的字符串作为 HTML 元素的内容，可以包含标签和文本。

### 获取元素内容

```javascript
const element = document.getElementById('example');
const content = element.innerHTML;
console.log(content);

设置元素内容

const element = document.getElementById('example');
element.innerHTML = '<h1>Hello World!</h1>';

注意：使用 innerHTML 设置 HTML 元素的内容是一种常见的攻击方式，称为跨站脚本攻击（XSS），因为它可以注入一些想要的恶意代码。请确保不要在用户输入的内容中使用 innerHTML。

2. textContent

textContent 属性用于获取或设置 HTML 元素的文本内容。当用于获取时，它返回 HTML 元素的纯文本内容作为字符串，当用于设置时，它将指定的字符串作为 HTML 元素的纯文本内容。

### 获取元素文本内容

```javascript
const element = document.getElementById('example');
const content = element.textContent;
console.log(content);

设置元素文本内容

const element = document.getElementById('example');
element.textContent = 'Hello World!';

3. value

value 属性用于获取或设置表单元素（如文本框、复选框、单选按钮等）的值。当用于获取时，它返回表单元素的值作为字符串，当用于设置时，它将指定的字符串作为表单元素的值。

### 获取表单元素的值

```html
<input type="text" id="example" value="Hello World!" />

const element = document.getElementById('example');
const value = element.value;
console.log(value);

设置表单元素的值

<input type="text" id="example" />

const element = document.getElementById('example');
element.value = 'Hello World!';

4. src / href

src 属性用于获取或设置图片、音频或视频文件的 URL ，href 属性用于获取或设置链接元素的 URL。当用于获取时，它返回 URL 作为字符串，当用于设置时，它将指定的字符串作为 URL。

### 获取图片 URL

```html
<img id="example" src="https://example.com/example.png" />

const element = document.getElementById('example');
const url = element.src;
console.log(url);

设置图片 URL

<img id="example" />

const element = document.getElementById('example');
element.src = 'https://example.com/example.png';

5. className

className 属性用于获取或设置 HTML 元素的 class 属性值。当用于获取时，它返回 HTML 元素的 class 属性值作为字符串，当用于设置时，它将指定的字符串作为 HTML 元素的 class 属性值，多个 class 名称之间用空格分隔。

### 获取元素的 class 属性值

```html
<div id="example" class="foo bar"></div>

const element = document.getElementById('example');
const className = element.className;
console.log(className);

设置元素的 class 属性值

<div id="example"></div>

const element = document.getElementById('example');
element.className = 'foo bar';