JavaScript常用DOM API研究详解05：innerHTML、textContent、style.property

本文链接：https://blog.youkuaiyun.com/qq_33546823/article/details/142783979

JavaScript常用DOM API研究详解05：innerHTML、textContent、style.property

在Web开发中，操作DOM（文档对象模型）是前端开发者的日常工作之一。本篇文章将深入探讨以下三个常用的DOM属性和方法：

innerHTML
textContent
style.property

通过对这些属性的详细介绍和示例，将了解如何使用JavaScript来动态地操作网页的内容和样式。

一、`innerHTML` 属性

1.1 什么是 `innerHTML`？

innerHTML 是一个常用的DOM属性，用于获取或设置元素的HTML内容。它以字符串的形式表示元素内部的所有HTML代码，包括标签和文本内容。

1.2 获取 `innerHTML`

1.2.1 语法

const htmlContent = element.innerHTML;

element：要操作的DOM元素。
htmlContent：字符串，包含元素内部的HTML代码。

1.2.2 示例

<div id="content">
  <p>这是一个<strong>示例</strong>段落。</p>
</div>

const contentDiv = document.getElementById('content');
const htmlContent = contentDiv.innerHTML;
console.log(htmlContent);
// 输出：<p>这是一个<strong>示例</strong>段落。</p>

1.3 设置 `innerHTML`

1.3.1 语法

element.innerHTML = htmlString;

htmlString：要设置的HTML代码，以字符串形式提供。

1.3.2 示例

const contentDiv = document.getElementById('content');
contentDiv.innerHTML = '<h2>新的标题</h2><p>新的内容。</p>';

结果：<div id="content"> 内部的内容被替换为新的HTML代码。

二、`textContent` 属性

2.1 什么是 `textContent`？

textContent 是一个DOM属性，用于获取或设置元素及其后代的纯文本内容，不包含任何HTML标签。它会提取元素内部的所有文本，包括子元素中的文本。

2.2 获取 `textContent`

2.2.1 语法

const text = element.textContent;

2.2.2 示例

<div id="content">
  <p>这是一个<strong>示例</strong>段落。</p>
</div>

const contentDiv = document.getElementById('content');
const text = contentDiv.textContent;
console.log(text);
// 输出：这是一个示例段落。

2.3 设置 `textContent`

2.3.1 语法

element.textContent = textString;

textString：要设置的文本内容，所有特殊字符都会被视为纯文本。

2.3.2 示例

const contentDiv = document.getElementById('content');
contentDiv.textContent = '<h2>新的标题</h2><p>新的内容。</p>';

结果：<div id="content"> 内部的内容被替换为字符串 <h2>新的标题</h2><p>新的内容。</p>，不会被解析为HTML。

2.4 注意事项

不包含注释和脚本内容：textContent 不会返回注释和 script、style 标签中的内容。
覆盖所有子节点的内容：设置 textContent 会移除所有子节点，替换为新的文本节点。

三、`style.property` 属性

3.1 什么是 `style.property`？

每个DOM元素都有一个 style 属性，它是一个 CSSStyleDeclaration 对象，包含了该元素的内联样式。通过操作 style 对象的属性，可以动态地更改元素的样式。

3.2 设置样式属性

3.2.1 语法

element.style.propertyName = value;

propertyName：CSS属性名，使用驼峰命名法（camelCase）。
value：字符串，表示CSS属性的值。

3.2.2 示例

const box = document.getElementById('box');

// 设置背景色
box.style.backgroundColor = 'blue';

// 设置宽度和高度
box.style.width = '200px';
box.style.height = '150px';

3.3 获取样式属性

const bgColor = box.style.backgroundColor;
console.log(bgColor); // 输出: blue

3.4 常见的样式属性名

backgroundColor
color
fontSize
margin
padding
border
width
height
display
position

3.5 属性名的命名规则

由于 JavaScript 中不允许使用连字符（-）作为变量名的一部分，因此在访问 CSS 属性时，需要将属性名转换为驼峰命名法。

转换规则：

移除属性名中的连字符。
将连字符后的第一个字母大写。

示例：

background-color → backgroundColor
font-size → fontSize
z-index → zIndex

3.6 处理复杂的属性值

有些CSS属性需要复杂的值，如 transform、box-shadow 等，可以直接以字符串形式赋值。

box.style.transform = 'rotate(45deg)';
box.style.boxShadow = '0 0 10px rgba(0,0,0,0.5)';

3.7 重置样式属性

将样式属性的值设置为空字符串，可以移除该内联样式。

box.style.backgroundColor = ''; // 移除背景色

3.8 使用 `cssText` 属性

style.cssText 可以一次性设置或获取元素的所有内联样式。

设置样式

box.style.cssText = 'background-color: red; color: white;';

获取样式

const styles = box.style.cssText;
console.log(styles);
// 输出: background-color: red; color: white;

3.9 注意事项

3.9.1 优先级问题

通过 style 属性设置的样式，优先级高于外部样式表和嵌入式样式，但低于 !important 声明。

3.9.2 动态样式的管理

频繁地直接操作 style 属性可能导致样式难以管理。建议：

使用类名切换：通过 classList 添加或移除类名，配合CSS样式表管理样式。
使用样式表对象：在JavaScript中创建和修改样式表。

四、综合示例

4.1 动态生成内容并应用样式

<div id="container"></div>

<style>
  .card {
    border: 1px solid #ccc;
    padding: 16px;
    margin: 8px;
  }
  .card h3 {
    margin-top: 0;
  }
</style>

const container = document.getElementById('container');

// 数据数组
const items = [
  { title: '标题一', content: '这是第一段内容。' },
  { title: '标题二', content: '这是第二段内容。' },
  { title: '标题三', content: '这是第三段内容。' },
];

items.forEach((item) => {
  // 创建元素
  const card = document.createElement('div');
  card.classList.add('card');

  const title = document.createElement('h3');
  title.textContent = item.title;

  const content = document.createElement('p');
  content.textContent = item.content;

  // 将元素添加到卡片中
  card.appendChild(title);
  card.appendChild(content);

  // 动态设置样式
  card.style.backgroundColor = '#f9f9f9';

  // 将卡片添加到容器中
  container.appendChild(card);
});

结果：页面上生成三个卡片，包含标题和内容，并应用了样式。

4.2 安全地插入用户输入

<input type="text" id="userInput" placeholder="输入一些文本">
<button id="submitButton">提交</button>
<div id="displayArea"></div>

const input = document.getElementById('userInput');
const button = document.getElementById('submitButton');
const displayArea = document.getElementById('displayArea');

button.addEventListener('click', () => {
  const userText = input.value;

  // 使用 textContent 防止XSS
  displayArea.textContent = userText;

  // 如果使用 innerHTML，可能会有安全风险
  // displayArea.innerHTML = userText;
});